@yueglobal/vue-ui

粤链全球 - Vue 组件库

如需React版本，请前往 @yueglobal/ui

安装使用

yarn add @yueglobal/vue-ui

import {
  // 页面头部组件
  YuePageHeader,
  // 页面底部组件
  YuePageFooter,
} from '@yueglobal/vue-ui';

// 引入样式文件
import '@yueglobal/vue-ui/style.css';

YuePageHeader

页面头部组件，包含一级和二级导航菜单、面包屑、以及登录/用户信息等功能。

属性

| 属性 | 说明 | 类型 | 默认值 | | ----------------- | ----------------------------------- | ------------------------------------------- | ---------- | | width | 内容宽度 | string | number | 80% | | backgroundColor | 头部背景色 | string | #fff | | activeLabel | 当前选中的一级菜单项的标题 | string | | | rightContent | 顶部右侧的登录/用户信息按钮 | Component | | | onLocaleChange | 切换语言时的回调事件 | ({locale: string}) => void | | | | 以下二级导航栏的配置 | | | | menuItems | 各业务系统的菜单 | YueMenuItem[] | | | pageTitle | 缺值时从一级菜单取值 | string | | | pageIcon | 页面图标 | string | Component | | | breadcrumbs | 自定义面包屑数据 | YueBreadcrumb[] | | | routes | 路由数据,用于自动生成面包屑 | any | | | pathname | 当前的路由 | string | | | subMenuLayout | 二级导航栏的菜单弹出层布局 | vertical | horizontal | vertical | | onRouteChange | 点击菜单/面包屑时触发的路由切换事件 | ({ key: string; label?: string }) => void | |

• 业务子系统：pageTitle或pageIcon缺省时会根据url自动从一级菜单匹配值

• 面包屑：若breadcrumbs缺省，则会根据routes、pathname自动生成面包屑的数据

• routes是vue的路由列表，需按如下方式取值：

import { useRouter } from 'vue-router';
// .......
const routes = useRouter().getRoutes();

YueMenuItem

| 属性 | 说明 | 类型 | 备注 | | ---------- | ---------- | --------------- | ------------------------------ | | key | 唯一标识 | string | 必填，可传路由地址如 /home | | label | 菜单项文案 | string | 必填 | | children | 子菜单项 | YueMenuItem[] | |

YueBreadcrumb

| 属性 | 说明 | 类型 | 备注 | | ------- | ---------------------- | -------- | ---------------------- | | key | 唯一标识，用于路由跳转 | string | 可传路由地址如 /home | | label | 面包屑项文案 | string | |

使用示例

<script>
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { YuePageHeader } from '@yueglobal/vue-ui';
import RightContent from './right-content.vue';

const route = useRoute();
const routes = useRouter().getRoutes();

const pathname = ref(route.path);
const menuItems = ref([
  { key: '/home', label: '首页' },
  {
    key: '/exhibition',
    label: '展会',
    children: [
      { key: '/exhibition/international', label: '国际展会' },
      { key: '/exhibition/domestic', label: '国内展会' },
    ],
  },
  { key: '/business', label: '商务' },
]);
// 顶部右侧的 登录/用户信息 组件
const rightContent = ref(RightContent);

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    pathname.value = newPath;
  },
);

function onRouteChange({ key, label }) {
  // 在这里处理路由跳转逻辑, 比如
  if (key.startsWith('/')) {
    history.push(key);
  }
}

function onLocaleChange({ locale }) {
  console.log('切换语言为：', locale);
}
</script>

<template>
  <yue-page-header
    width="1440px"
    pageTitle="出海培训"
    :menuItems="menuItems"
    :pathname="pathname"
    :routes="routes"
    :breadcrumbs="breadcrumbs"
    :right-content="rightContent"
    @route-change="onRouteChange"
    @locale-change="onLocaleChange"
  />
</template>

YuePageFooter

页面底部组件，显示版权信息、联系方式和相关链接。

属性

| 属性 | 说明 | 类型 | 默认值 | | ------- | -------- | -------------------- | ------ | | width | 内容宽度 | string | number | 80% |

使用示例

<script>
import { YuePageFooter } from '@yueglobal/vue-ui';
</script>
<template>
  <yue-page-footer width="1440px" />
</template>