@yueglobal/vue-ui 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +155 -154
  2. package/components/ASvgIcon.vue.d.ts +1 -1
  3. package/index.d.ts +1 -0
  4. package/index.mjs +2009 -2027
  5. package/index.umd.js +16 -16
  6. package/package.json +4 -4
  7. package/style.css +1 -1
  8. package/yue-page-footer/index.vue.d.ts +8 -2
  9. package/yue-page-header/first-menus/index.vue.d.ts +3 -8
  10. package/yue-page-header/helper.d.ts +55 -0
  11. package/yue-page-header/index.vue.d.ts +9 -2
package/README.md CHANGED
@@ -1,154 +1,155 @@
1
- # @yueglobal/vue-ui
2
-
3
- 粤链全球 - Vue 组件库
4
-
5
- 如需`React`版本，请前往 [@yueglobal/ui](https://www.npmjs.com/package/@yueglobal/ui)
6
-
7
- ## 安装使用
8
-
9
- ```shell
10
- yarn add @yueglobal/vue-ui
11
- ```
12
-
13
- ```ts
14
- import {
15
- // 页面头部组件
16
- YuePageHeader,
17
- // 页面底部组件
18
- YuePageFooter,
19
- } from '@yueglobal/vue-ui';
20
-
21
- // 引入样式文件
22
- import '@yueglobal/vue-ui/style.css';
23
- ```
24
-
25
- ## YuePageHeader
26
-
27
- 页面头部组件，包含一级和二级导航菜单、面包屑、以及登录/用户信息等功能。
28
-
29
- ### 属性
30
-
31
- | 属性 | 说明 | 类型 | 默认值 |
32
- | ----------------- | ----------------------------------- | ------------------------------------------- | ------ |
33
- | `width` | 内容宽度 | `string` \| `number` | `80%` |
34
- | `backgroundColor` | 头部背景色 | `string` | `#fff` |
35
- | `rightContent` | 顶部右侧的登录/用户信息按钮 | `Component` | |
36
- | `menuItems` | 各业务系统的菜单 | `YueMenuItem`[] | |
37
- | `pageTitle` | 缺值时从一级菜单取值 | `string` | |
38
- | `pageIcon` | 页面图标 | `string` \| `Component` | |
39
- | `breadcrumbs` | 自定义面包屑数据 | `YueBreadcrumb`[] | |
40
- | `routes` | 路由数据,用于自动生成面包屑 | any | |
41
- | `pathname` | 当前的路由 | `string` | |
42
- | `onRouteChange` | 点击菜单/面包屑时触发的路由切换事件 | `({ key: string; label?: string }) => void` | |
43
- | `onLocaleChange` | 切换语言时的回调事件 | `({locale: string}) => void` | |
44
-
45
- - 业务子系统：`pageTitle`或`pageIcon`缺省时会根据`url`自动从一级菜单匹配值
46
-
47
- - 面包屑：若`breadcrumbs`缺省，则会根据`routes`、`pathname`自动生成面包屑的数据
48
-
49
- - `routes`是`vue`的路由列表，需按如下方式取值：
50
-
51
- ```ts
52
- import { useRouter } from 'vue-router';
53
- // .......
54
- const routes = useRouter().getRoutes();
55
- ```
56
-
57
- ### YueMenuItem
58
-
59
- | 属性 | 说明 | 类型 | 备注 |
60
- | ---------- | ---------- | --------------- | ------------------------------ |
61
- | `key` | 唯一标识 | `string` | `必填`，可传路由地址如 `/home` |
62
- | `label` | 菜单项文案 | `string` | `必填` |
63
- | `children` | 子菜单项 | `YueMenuItem`[] | |
64
-
65
- ### YueBreadcrumb
66
-
67
- | 属性 | 说明 | 类型 | 备注 |
68
- | ------- | ---------------------- | -------- | ---------------------- |
69
- | `key` | 唯一标识，用于路由跳转 | `string` | 可传路由地址如 `/home` |
70
- | `label` | 面包屑项文案 | `string` | |
71
-
72
- ### 使用示例
73
-
74
- ```vue | pure
75
- <script>
76
- import { ref } from 'vue';
77
- import { useRouter, useRoute } from 'vue-router';
78
- import { YuePageHeader } from '@yueglobal/vue-ui';
79
- import RightContent from './right-content.vue';
80
-
81
- const route = useRoute();
82
- const routes = useRouter().getRoutes();
83
-
84
- const pathname = ref(route.path);
85
- const menuItems = ref([
86
- { key: '/home', label: '首页' },
87
- {
88
- key: '/exhibition',
89
- label: '展会',
90
- children: [
91
- { key: '/exhibition/international', label: '国际展会' },
92
- { key: '/exhibition/domestic', label: '国内展会' },
93
- ],
94
- },
95
- { key: '/business', label: '商务' },
96
- ]);
97
- // 顶部右侧的 登录/用户信息 组件
98
- const rightContent = ref(RightContent);
99
-
100
- // 监听路由变化
101
- watch(
102
- () => route.path,
103
- (newPath) => {
104
- pathname.value = newPath;
105
- },
106
- );
107
-
108
- function onRouteChange({ key, label }) {
109
- // 在这里处理路由跳转逻辑, 比如
110
- if (key.startsWith('/')) {
111
- history.push(key);
112
- }
113
- }
114
-
115
- function onLocaleChange({ locale }) {
116
- console.log('切换语言为：', locale);
117
- }
118
- </script>
119
-
120
- <template>
121
- <yue-page-header
122
- width="1440px"
123
- pageTitle="出海培训"
124
- :menuItems="menuItems"
125
- :pathname="pathname"
126
- :routes="routes"
127
- :breadcrumbs="breadcrumbs"
128
- :right-content="rightContent"
129
- @route-change="onRouteChange"
130
- @locale-change="onLocaleChange"
131
- />
132
- </template>
133
- ```
134
-
135
- ## YuePageFooter
136
-
137
- 页面底部组件，显示版权信息、联系方式和相关链接。
138
-
139
- ### 属性
140
-
141
- | 属性 | 说明 | 类型 | 默认值 |
142
- | ------- | -------- | -------------------- | ------ |
143
- | `width` | 内容宽度 | `string` \| `number` | `80%` |
144
-
145
- ### 使用示例
146
-
147
- ```vue | pure
148
- <script>
149
- import { YuePageFooter } from '@yueglobal/vue-ui';
150
- </script>
151
- <template>
152
- <yue-page-footer width="1440px" />
153
- </template>
154
- ```
1
+ # @yueglobal/vue-ui
2
+
3
+ 粤链全球 - Vue 组件库
4
+
5
+ 如需`React`版本，请前往 [@yueglobal/ui](https://www.npmjs.com/package/@yueglobal/ui)
6
+
7
+ ## 安装使用
8
+
9
+ ```shell
10
+ yarn add @yueglobal/vue-ui
11
+ ```
12
+
13
+ ```ts
14
+ import {
15
+ // 页面头部组件
16
+ YuePageHeader,
17
+ // 页面底部组件
18
+ YuePageFooter,
19
+ } from '@yueglobal/vue-ui';
20
+
21
+ // 引入样式文件
22
+ import '@yueglobal/vue-ui/style.css';
23
+ ```
24
+
25
+ ## YuePageHeader
26
+
27
+ 页面头部组件，包含一级和二级导航菜单、面包屑、以及登录/用户信息等功能。
28
+
29
+ ### 属性
30
+
31
+ | 属性 | 说明 | 类型 | 默认值 |
32
+ | ----------------- | ----------------------------------- | ------------------------------------------- | ------ |
33
+ | `width` | 内容宽度 | `string` \| `number` | `80%` |
34
+ | `backgroundColor` | 头部背景色 | `string` | `#fff` |
35
+ | `activeLabel` | 当前选中的一级菜单项的标题 | `string` | |
36
+ | `rightContent` | 顶部右侧的登录/用户信息按钮 | `Component` | |
37
+ | `menuItems` | 各业务系统的菜单 | `YueMenuItem`[] | |
38
+ | `pageTitle` | 缺值时从一级菜单取值 | `string` | |
39
+ | `pageIcon` | 页面图标 | `string` \| `Component` | |
40
+ | `breadcrumbs` | 自定义面包屑数据 | `YueBreadcrumb`[] | |
41
+ | `routes` | 路由数据,用于自动生成面包屑 | any | |
42
+ | `pathname` | 当前的路由 | `string` | |
43
+ | `onRouteChange` | 点击菜单/面包屑时触发的路由切换事件 | `({ key: string; label?: string }) => void` | |
44
+ | `onLocaleChange` | 切换语言时的回调事件 | `({locale: string}) => void` | |
45
+
46
+ - 业务子系统：`pageTitle`或`pageIcon`缺省时会根据`url`自动从一级菜单匹配值
47
+
48
+ - 面包屑：若`breadcrumbs`缺省，则会根据`routes`、`pathname`自动生成面包屑的数据
49
+
50
+ - `routes`是`vue`的路由列表，需按如下方式取值：
51
+
52
+ ```ts
53
+ import { useRouter } from 'vue-router';
54
+ // .......
55
+ const routes = useRouter().getRoutes();
56
+ ```
57
+
58
+ ### YueMenuItem
59
+
60
+ | 属性 | 说明 | 类型 | 备注 |
61
+ | ---------- | ---------- | --------------- | ------------------------------ |
62
+ | `key` | 唯一标识 | `string` | `必填`，可传路由地址如 `/home` |
63
+ | `label` | 菜单项文案 | `string` | `必填` |
64
+ | `children` | 子菜单项 | `YueMenuItem`[] | |
65
+
66
+ ### YueBreadcrumb
67
+
68
+ | 属性 | 说明 | 类型 | 备注 |
69
+ | ------- | ---------------------- | -------- | ---------------------- |
70
+ | `key` | 唯一标识，用于路由跳转 | `string` | 可传路由地址如 `/home` |
71
+ | `label` | 面包屑项文案 | `string` | |
72
+
73
+ ### 使用示例
74
+
75
+ ```vue | pure
76
+ <script>
77
+ import { ref } from 'vue';
78
+ import { useRouter, useRoute } from 'vue-router';
79
+ import { YuePageHeader } from '@yueglobal/vue-ui';
80
+ import RightContent from './right-content.vue';
81
+
82
+ const route = useRoute();
83
+ const routes = useRouter().getRoutes();
84
+
85
+ const pathname = ref(route.path);
86
+ const menuItems = ref([
87
+ { key: '/home', label: '首页' },
88
+ {
89
+ key: '/exhibition',
90
+ label: '展会',
91
+ children: [
92
+ { key: '/exhibition/international', label: '国际展会' },
93
+ { key: '/exhibition/domestic', label: '国内展会' },
94
+ ],
95
+ },
96
+ { key: '/business', label: '商务' },
97
+ ]);
98
+ // 顶部右侧的 登录/用户信息 组件
99
+ const rightContent = ref(RightContent);
100
+
101
+ // 监听路由变化
102
+ watch(
103
+ () => route.path,
104
+ (newPath) => {
105
+ pathname.value = newPath;
106
+ },
107
+ );
108
+
109
+ function onRouteChange({ key, label }) {
110
+ // 在这里处理路由跳转逻辑, 比如
111
+ if (key.startsWith('/')) {
112
+ history.push(key);
113
+ }
114
+ }
115
+
116
+ function onLocaleChange({ locale }) {
117
+ console.log('切换语言为：', locale);
118
+ }
119
+ </script>
120
+
121
+ <template>
122
+ <yue-page-header
123
+ width="1440px"
124
+ pageTitle="出海培训"
125
+ :menuItems="menuItems"
126
+ :pathname="pathname"
127
+ :routes="routes"
128
+ :breadcrumbs="breadcrumbs"
129
+ :right-content="rightContent"
130
+ @route-change="onRouteChange"
131
+ @locale-change="onLocaleChange"
132
+ />
133
+ </template>
134
+ ```
135
+
136
+ ## YuePageFooter
137
+
138
+ 页面底部组件，显示版权信息、联系方式和相关链接。
139
+
140
+ ### 属性
141
+
142
+ | 属性 | 说明 | 类型 | 默认值 |
143
+ | ------- | -------- | -------------------- | ------ |
144
+ | `width` | 内容宽度 | `string` \| `number` | `80%` |
145
+
146
+ ### 使用示例
147
+
148
+ ```vue | pure
149
+ <script>
150
+ import { YuePageFooter } from '@yueglobal/vue-ui';
151
+ </script>
152
+ <template>
153
+ <yue-page-footer width="1440px" />
154
+ </template>
155
+ ```
package/components/ASvgIcon.vue.d.ts CHANGED
@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
28
28
  };
29
29
  }>> & Readonly<{}>, {
30
30
  style: Record<string, any>;
31
- className: string;
32
31
  title: string;
32
+ className: string;
33
33
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
34
34
  export default _default;
package/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default as YuePageFooter } from './yue-page-footer/index.vue';
2
2
  export { default as YuePageHeader } from './yue-page-header/index.vue';
3
+ export type { YueBreadcrumb, YueMenuItem, YuePageHeaderProps, } from './yue-page-header/helper';