@dcyjs-materials/the-header v0.1.12

usage

<template>
  <the-header
    v-model="word"
    :menus="menus"
    :user-info="userInfo"
    @search="onSearch"
    @logout="onLogout"
    @login="onLogin"
    @clickMenuName="onClickMenuName"
  >
     <template #logo>
      <!-- 替换logo svg -->
      <span i-dcy:logo style="font-size: 27px;" />
    </template>
  </the-header>
</template>

<script lang="ts">
import TheHeader from '@dcyjs-materials/the-header';
import { ref } from 'vue';

// 搜索框关键词
const word = ref('');

const userInfo = {
  schollName: '',
  schollId: '',
  idcard: '',
  grade: '',
  mobile: '',
  course: [],
  professionalTitle: '',
  userType: 0,
  userName: '',
  id: '1',
  courseId: [],
  professional: '',
  status: 0,
  role: '',
  verifyCode: '',
};

const menus = [
  {
    name: '首页',
    url: '/',
  },
  {
    name: '课程',
    url: '/',
    children: [
      {
        name: '教学空间',
        url: '/teaching-space',
      },
      {
        name: '课程主页',
        url: '/course',
      },
      {
        name: '教学任务',
        url: '/teaching-task',
        count: 3,
      },
      {
        name: '课程达成',
        url: '/',
      },
    ],
  },
  {
    name: '项目',
    url: '/',
  },
  {
    name: '资源',
    url: '/exercise-library',
    children: [
      {
        name: '资源首页',
        url: '/',
      },
      {
        name: '云资源',
        url: '/cloud-resource',
      },
      {
        name: '我的资源',
        url: '/my-resources/my-library',
        count: 1,
      },
    ],
  },
  {
    name: '互动',
    url: '/',
  },
  {
    name: '日程',
    url: '/',
  },
];

function onSearch() {
  alert('serach');
}

function onLogout() {
  alert('logout')
}

function onClickMenuName(url: string) {
  alert(url)
}

function onLogin() {
  alert('login')
}

// 目前vue-live导出defineComponent存在问题，所以仅支持普通对象导出。
export default {
  name: 'BasicDemo',
  components: {
    TheHeader,
  },
  setup: () => {
    return {
      menus,
      userInfo,
      word,
      onSearch,
      onLogin,
      onLogout,
      onClickMenuName,
    };
  },
};
</script>