@hlw-uni/mp-vue 1.0.13 → 1.0.14
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.
- package/dist/components/hlw-menu/types.d.ts +20 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +62 -53
- package/dist/index.mjs +63 -54
- package/dist/style.css +33 -41
- package/package.json +1 -1
- package/src/components/hlw-menu/index.vue +29 -85
- package/src/components/hlw-menu/types.ts +20 -0
- package/src/index.ts +1 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface HlwMenuItem {
|
|
2
|
+
/** 图标 class,如 'i-fa6-solid-gear' */
|
|
3
|
+
icon: string;
|
|
4
|
+
/** 图标主题色 */
|
|
5
|
+
iconTheme?: "orange" | "purple" | "cyan" | "emerald" | "slate" | "wechat" | "rose" | "blue" | "red";
|
|
6
|
+
/** 菜单文字 */
|
|
7
|
+
label: string;
|
|
8
|
+
/** 跳转路径,有值则用 navigator 包裹 */
|
|
9
|
+
url?: string;
|
|
10
|
+
/** 右侧标签文字 */
|
|
11
|
+
tag?: string;
|
|
12
|
+
/** 标签主题色 */
|
|
13
|
+
tagTheme?: "orange" | "red" | "wechat" | "rose" | "blue";
|
|
14
|
+
/** 标签是否闪烁 */
|
|
15
|
+
tagPulse?: boolean;
|
|
16
|
+
/** 加载中状态 */
|
|
17
|
+
loading?: boolean;
|
|
18
|
+
/** 是否显示,默认 true */
|
|
19
|
+
visible?: boolean;
|
|
20
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export { default as HlwEmpty } from './components/hlw-empty/index.vue';
|
|
|
8
8
|
export { default as HlwHeader } from './components/hlw-header/index.vue';
|
|
9
9
|
export { default as HlwLoading } from './components/hlw-loading/index.vue';
|
|
10
10
|
export { default as HlwMenu } from './components/hlw-menu/index.vue';
|
|
11
|
-
export type { HlwMenuItem } from './components/hlw-menu/
|
|
11
|
+
export type { HlwMenuItem } from './components/hlw-menu/types';
|
|
12
12
|
export { default as HlwMenuList } from './components/hlw-menu-list/index.vue';
|
|
13
13
|
export { default as HlwPage } from './components/hlw-page/index.vue';
|
|
14
14
|
export type { MenuItem } from './components/hlw-menu-list/types';
|
package/dist/index.js
CHANGED
|
@@ -85,14 +85,14 @@
|
|
|
85
85
|
class: "hlw-card-header"
|
|
86
86
|
};
|
|
87
87
|
const _hoisted_3$4 = { class: "flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30" };
|
|
88
|
-
const _hoisted_4$
|
|
89
|
-
const _hoisted_5$
|
|
90
|
-
const _hoisted_6$
|
|
91
|
-
const _hoisted_7$
|
|
88
|
+
const _hoisted_4$3 = { key: 0 };
|
|
89
|
+
const _hoisted_5$2 = { class: "text-sm font-bold text-slate-800 flex items-center gap-2 tracking-wide" };
|
|
90
|
+
const _hoisted_6$2 = { key: 1 };
|
|
91
|
+
const _hoisted_7$2 = {
|
|
92
92
|
key: 0,
|
|
93
93
|
class: "text-[10px] text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100 tracking-wide"
|
|
94
94
|
};
|
|
95
|
-
const _hoisted_8 = { class: "hlw-card-body" };
|
|
95
|
+
const _hoisted_8$1 = { class: "hlw-card-body" };
|
|
96
96
|
const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
|
|
97
97
|
...{
|
|
98
98
|
options: {
|
|
@@ -113,9 +113,9 @@
|
|
|
113
113
|
_ctx.$slots.header || __props.title || __props.icon || _ctx.$slots["header-left"] || _ctx.$slots["header-right"] ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$6, [
|
|
114
114
|
vue.renderSlot(_ctx.$slots, "header", {}, () => [
|
|
115
115
|
vue.createElementVNode("view", _hoisted_3$4, [
|
|
116
|
-
_ctx.$slots["header-left"] || __props.title || __props.icon ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_4$
|
|
116
|
+
_ctx.$slots["header-left"] || __props.title || __props.icon ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_4$3, [
|
|
117
117
|
vue.renderSlot(_ctx.$slots, "header-left", {}, () => [
|
|
118
|
-
vue.createElementVNode("view", _hoisted_5$
|
|
118
|
+
vue.createElementVNode("view", _hoisted_5$2, [
|
|
119
119
|
__props.icon ? (vue.openBlock(), vue.createElementBlock("text", {
|
|
120
120
|
key: 0,
|
|
121
121
|
class: vue.normalizeClass([__props.icon, __props.iconColor])
|
|
@@ -124,15 +124,15 @@
|
|
|
124
124
|
])
|
|
125
125
|
], true)
|
|
126
126
|
])) : vue.createCommentVNode("", true),
|
|
127
|
-
_ctx.$slots["header-right"] || __props.extra ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_6$
|
|
127
|
+
_ctx.$slots["header-right"] || __props.extra ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_6$2, [
|
|
128
128
|
vue.renderSlot(_ctx.$slots, "header-right", {}, () => [
|
|
129
|
-
__props.extra ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_7$
|
|
129
|
+
__props.extra ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_7$2, vue.toDisplayString(__props.extra), 1)) : vue.createCommentVNode("", true)
|
|
130
130
|
], true)
|
|
131
131
|
])) : vue.createCommentVNode("", true)
|
|
132
132
|
])
|
|
133
133
|
], true)
|
|
134
134
|
])) : vue.createCommentVNode("", true),
|
|
135
|
-
vue.createElementVNode("view", _hoisted_8, [
|
|
135
|
+
vue.createElementVNode("view", _hoisted_8$1, [
|
|
136
136
|
vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
137
137
|
])
|
|
138
138
|
]);
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
key: 1,
|
|
147
147
|
class: "hlw-empty__icon"
|
|
148
148
|
};
|
|
149
|
-
const _hoisted_4$
|
|
149
|
+
const _hoisted_4$2 = { class: "hlw-empty__text" };
|
|
150
150
|
const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
|
|
151
151
|
__name: "index",
|
|
152
152
|
props: {
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
src: __props.image,
|
|
163
163
|
mode: "aspectFit"
|
|
164
164
|
}, null, 8, _hoisted_2$5)) : (vue.openBlock(), vue.createElementBlock("text", _hoisted_3$3, "📦")),
|
|
165
|
-
vue.createElementVNode("text", _hoisted_4$
|
|
165
|
+
vue.createElementVNode("text", _hoisted_4$2, vue.toDisplayString(__props.text || "暂无数据"), 1),
|
|
166
166
|
vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
167
167
|
]);
|
|
168
168
|
};
|
|
@@ -300,41 +300,21 @@
|
|
|
300
300
|
});
|
|
301
301
|
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-14242381"]]);
|
|
302
302
|
const _hoisted_1$2 = { class: "hlw-menu" };
|
|
303
|
-
const _hoisted_2$2 =
|
|
304
|
-
const _hoisted_3$2 = {
|
|
303
|
+
const _hoisted_2$2 = { class: "hlw-menu-left" };
|
|
304
|
+
const _hoisted_3$2 = { class: "hlw-menu-label" };
|
|
305
|
+
const _hoisted_4$1 = { class: "hlw-menu-right" };
|
|
306
|
+
const _hoisted_5$1 = ["onClick"];
|
|
307
|
+
const _hoisted_6$1 = { class: "hlw-menu-left" };
|
|
308
|
+
const _hoisted_7$1 = { class: "hlw-menu-label" };
|
|
309
|
+
const _hoisted_8 = { class: "hlw-menu-right" };
|
|
310
|
+
const _hoisted_9 = {
|
|
311
|
+
key: 0,
|
|
312
|
+
class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
|
|
313
|
+
};
|
|
314
|
+
const _hoisted_10 = {
|
|
305
315
|
key: 2,
|
|
306
316
|
class: "hlw-menu-divider"
|
|
307
317
|
};
|
|
308
|
-
const HlwMenuItemContent = vue.defineComponent({
|
|
309
|
-
name: "HlwMenuItemContent",
|
|
310
|
-
props: {
|
|
311
|
-
item: { type: Object, required: true }
|
|
312
|
-
},
|
|
313
|
-
setup(props) {
|
|
314
|
-
return () => {
|
|
315
|
-
const item = props.item;
|
|
316
|
-
return vue.h("view", { class: "hlw-menu-item-inner" }, [
|
|
317
|
-
// 左侧
|
|
318
|
-
vue.h("view", { class: "hlw-menu-left" }, [
|
|
319
|
-
vue.h("view", { class: `hlw-menu-icon hlw-menu-icon--${item.iconTheme || "slate"}` }, [
|
|
320
|
-
vue.h("text", { class: item.icon })
|
|
321
|
-
]),
|
|
322
|
-
vue.h("text", { class: "hlw-menu-label" }, item.label)
|
|
323
|
-
]),
|
|
324
|
-
// 右侧
|
|
325
|
-
vue.h("view", { class: "hlw-menu-right" }, [
|
|
326
|
-
item.loading ? vue.h("text", { class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted" }) : null,
|
|
327
|
-
item.tag ? vue.h(
|
|
328
|
-
"text",
|
|
329
|
-
{ class: `hlw-menu-tag hlw-menu-tag--${item.tagTheme || "rose"} ${item.tagPulse ? "hlw-menu-tag-pulse" : ""}` },
|
|
330
|
-
item.tag
|
|
331
|
-
) : null,
|
|
332
|
-
vue.h("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" })
|
|
333
|
-
])
|
|
334
|
-
]);
|
|
335
|
-
};
|
|
336
|
-
}
|
|
337
|
-
});
|
|
338
318
|
const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
339
319
|
__name: "index",
|
|
340
320
|
props: {
|
|
@@ -360,9 +340,23 @@
|
|
|
360
340
|
"hover-class": "hlw-menu-item--active"
|
|
361
341
|
}, {
|
|
362
342
|
default: vue.withCtx(() => [
|
|
363
|
-
vue.
|
|
364
|
-
vue.
|
|
365
|
-
|
|
343
|
+
vue.createElementVNode("view", _hoisted_2$2, [
|
|
344
|
+
vue.createElementVNode("view", {
|
|
345
|
+
class: vue.normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
346
|
+
}, [
|
|
347
|
+
vue.createElementVNode("text", {
|
|
348
|
+
class: vue.normalizeClass(item.icon)
|
|
349
|
+
}, null, 2)
|
|
350
|
+
], 2),
|
|
351
|
+
vue.createElementVNode("text", _hoisted_3$2, vue.toDisplayString(item.label), 1)
|
|
352
|
+
]),
|
|
353
|
+
vue.createElementVNode("view", _hoisted_4$1, [
|
|
354
|
+
item.tag ? (vue.openBlock(), vue.createElementBlock("text", {
|
|
355
|
+
key: 0,
|
|
356
|
+
class: vue.normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
357
|
+
}, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true),
|
|
358
|
+
_cache[0] || (_cache[0] = vue.createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
|
|
359
|
+
])
|
|
366
360
|
]),
|
|
367
361
|
_: 2
|
|
368
362
|
}, 1032, ["url"])) : (vue.openBlock(), vue.createElementBlock("view", {
|
|
@@ -371,18 +365,33 @@
|
|
|
371
365
|
"hover-class": "hlw-menu-item--active",
|
|
372
366
|
onClick: ($event) => handleClick(item)
|
|
373
367
|
}, [
|
|
374
|
-
vue.
|
|
375
|
-
vue.
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
368
|
+
vue.createElementVNode("view", _hoisted_6$1, [
|
|
369
|
+
vue.createElementVNode("view", {
|
|
370
|
+
class: vue.normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
371
|
+
}, [
|
|
372
|
+
vue.createElementVNode("text", {
|
|
373
|
+
class: vue.normalizeClass(item.icon)
|
|
374
|
+
}, null, 2)
|
|
375
|
+
], 2),
|
|
376
|
+
vue.createElementVNode("text", _hoisted_7$1, vue.toDisplayString(item.label), 1)
|
|
377
|
+
]),
|
|
378
|
+
vue.createElementVNode("view", _hoisted_8, [
|
|
379
|
+
item.loading ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_9)) : vue.createCommentVNode("", true),
|
|
380
|
+
item.tag ? (vue.openBlock(), vue.createElementBlock("text", {
|
|
381
|
+
key: 1,
|
|
382
|
+
class: vue.normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
383
|
+
}, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true),
|
|
384
|
+
_cache[1] || (_cache[1] = vue.createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
|
|
385
|
+
])
|
|
386
|
+
], 8, _hoisted_5$1)),
|
|
387
|
+
index2 < visibleItems.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_10)) : vue.createCommentVNode("", true)
|
|
379
388
|
], 64);
|
|
380
389
|
}), 128))
|
|
381
390
|
]);
|
|
382
391
|
};
|
|
383
392
|
}
|
|
384
393
|
});
|
|
385
|
-
const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
394
|
+
const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ff3b3322"]]);
|
|
386
395
|
const _hoisted_1$1 = { class: "hlw-menu-list" };
|
|
387
396
|
const _hoisted_2$1 = ["onTap"];
|
|
388
397
|
const _hoisted_3$1 = { class: "hlw-menu-list__left" };
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, resolveComponent, openBlock, createBlock, ref, computed, createElementBlock, normalizeClass, createElementVNode, toDisplayString, renderSlot, createCommentVNode, useSlots, normalizeStyle, unref, Fragment,
|
|
1
|
+
import { defineComponent, resolveComponent, openBlock, createBlock, ref, computed, createElementBlock, normalizeClass, createElementVNode, toDisplayString, renderSlot, createCommentVNode, useSlots, normalizeStyle, unref, Fragment, renderList, withCtx, createVNode } from "vue";
|
|
2
2
|
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
3
3
|
...{ name: "HlwAd" },
|
|
4
4
|
__name: "index",
|
|
@@ -82,14 +82,14 @@ const _hoisted_2$6 = {
|
|
|
82
82
|
class: "hlw-card-header"
|
|
83
83
|
};
|
|
84
84
|
const _hoisted_3$4 = { class: "flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30" };
|
|
85
|
-
const _hoisted_4$
|
|
86
|
-
const _hoisted_5$
|
|
87
|
-
const _hoisted_6$
|
|
88
|
-
const _hoisted_7$
|
|
85
|
+
const _hoisted_4$3 = { key: 0 };
|
|
86
|
+
const _hoisted_5$2 = { class: "text-sm font-bold text-slate-800 flex items-center gap-2 tracking-wide" };
|
|
87
|
+
const _hoisted_6$2 = { key: 1 };
|
|
88
|
+
const _hoisted_7$2 = {
|
|
89
89
|
key: 0,
|
|
90
90
|
class: "text-[10px] text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100 tracking-wide"
|
|
91
91
|
};
|
|
92
|
-
const _hoisted_8 = { class: "hlw-card-body" };
|
|
92
|
+
const _hoisted_8$1 = { class: "hlw-card-body" };
|
|
93
93
|
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
94
94
|
...{
|
|
95
95
|
options: {
|
|
@@ -110,9 +110,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
110
110
|
_ctx.$slots.header || __props.title || __props.icon || _ctx.$slots["header-left"] || _ctx.$slots["header-right"] ? (openBlock(), createElementBlock("view", _hoisted_2$6, [
|
|
111
111
|
renderSlot(_ctx.$slots, "header", {}, () => [
|
|
112
112
|
createElementVNode("view", _hoisted_3$4, [
|
|
113
|
-
_ctx.$slots["header-left"] || __props.title || __props.icon ? (openBlock(), createElementBlock("view", _hoisted_4$
|
|
113
|
+
_ctx.$slots["header-left"] || __props.title || __props.icon ? (openBlock(), createElementBlock("view", _hoisted_4$3, [
|
|
114
114
|
renderSlot(_ctx.$slots, "header-left", {}, () => [
|
|
115
|
-
createElementVNode("view", _hoisted_5$
|
|
115
|
+
createElementVNode("view", _hoisted_5$2, [
|
|
116
116
|
__props.icon ? (openBlock(), createElementBlock("text", {
|
|
117
117
|
key: 0,
|
|
118
118
|
class: normalizeClass([__props.icon, __props.iconColor])
|
|
@@ -121,15 +121,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
121
121
|
])
|
|
122
122
|
], true)
|
|
123
123
|
])) : createCommentVNode("", true),
|
|
124
|
-
_ctx.$slots["header-right"] || __props.extra ? (openBlock(), createElementBlock("view", _hoisted_6$
|
|
124
|
+
_ctx.$slots["header-right"] || __props.extra ? (openBlock(), createElementBlock("view", _hoisted_6$2, [
|
|
125
125
|
renderSlot(_ctx.$slots, "header-right", {}, () => [
|
|
126
|
-
__props.extra ? (openBlock(), createElementBlock("text", _hoisted_7$
|
|
126
|
+
__props.extra ? (openBlock(), createElementBlock("text", _hoisted_7$2, toDisplayString(__props.extra), 1)) : createCommentVNode("", true)
|
|
127
127
|
], true)
|
|
128
128
|
])) : createCommentVNode("", true)
|
|
129
129
|
])
|
|
130
130
|
], true)
|
|
131
131
|
])) : createCommentVNode("", true),
|
|
132
|
-
createElementVNode("view", _hoisted_8, [
|
|
132
|
+
createElementVNode("view", _hoisted_8$1, [
|
|
133
133
|
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
134
134
|
])
|
|
135
135
|
]);
|
|
@@ -143,7 +143,7 @@ const _hoisted_3$3 = {
|
|
|
143
143
|
key: 1,
|
|
144
144
|
class: "hlw-empty__icon"
|
|
145
145
|
};
|
|
146
|
-
const _hoisted_4$
|
|
146
|
+
const _hoisted_4$2 = { class: "hlw-empty__text" };
|
|
147
147
|
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
148
148
|
__name: "index",
|
|
149
149
|
props: {
|
|
@@ -159,7 +159,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
159
159
|
src: __props.image,
|
|
160
160
|
mode: "aspectFit"
|
|
161
161
|
}, null, 8, _hoisted_2$5)) : (openBlock(), createElementBlock("text", _hoisted_3$3, "📦")),
|
|
162
|
-
createElementVNode("text", _hoisted_4$
|
|
162
|
+
createElementVNode("text", _hoisted_4$2, toDisplayString(__props.text || "暂无数据"), 1),
|
|
163
163
|
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
164
164
|
]);
|
|
165
165
|
};
|
|
@@ -297,41 +297,21 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
297
297
|
});
|
|
298
298
|
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-14242381"]]);
|
|
299
299
|
const _hoisted_1$2 = { class: "hlw-menu" };
|
|
300
|
-
const _hoisted_2$2 =
|
|
301
|
-
const _hoisted_3$2 = {
|
|
300
|
+
const _hoisted_2$2 = { class: "hlw-menu-left" };
|
|
301
|
+
const _hoisted_3$2 = { class: "hlw-menu-label" };
|
|
302
|
+
const _hoisted_4$1 = { class: "hlw-menu-right" };
|
|
303
|
+
const _hoisted_5$1 = ["onClick"];
|
|
304
|
+
const _hoisted_6$1 = { class: "hlw-menu-left" };
|
|
305
|
+
const _hoisted_7$1 = { class: "hlw-menu-label" };
|
|
306
|
+
const _hoisted_8 = { class: "hlw-menu-right" };
|
|
307
|
+
const _hoisted_9 = {
|
|
308
|
+
key: 0,
|
|
309
|
+
class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
|
|
310
|
+
};
|
|
311
|
+
const _hoisted_10 = {
|
|
302
312
|
key: 2,
|
|
303
313
|
class: "hlw-menu-divider"
|
|
304
314
|
};
|
|
305
|
-
const HlwMenuItemContent = defineComponent({
|
|
306
|
-
name: "HlwMenuItemContent",
|
|
307
|
-
props: {
|
|
308
|
-
item: { type: Object, required: true }
|
|
309
|
-
},
|
|
310
|
-
setup(props) {
|
|
311
|
-
return () => {
|
|
312
|
-
const item = props.item;
|
|
313
|
-
return h("view", { class: "hlw-menu-item-inner" }, [
|
|
314
|
-
// 左侧
|
|
315
|
-
h("view", { class: "hlw-menu-left" }, [
|
|
316
|
-
h("view", { class: `hlw-menu-icon hlw-menu-icon--${item.iconTheme || "slate"}` }, [
|
|
317
|
-
h("text", { class: item.icon })
|
|
318
|
-
]),
|
|
319
|
-
h("text", { class: "hlw-menu-label" }, item.label)
|
|
320
|
-
]),
|
|
321
|
-
// 右侧
|
|
322
|
-
h("view", { class: "hlw-menu-right" }, [
|
|
323
|
-
item.loading ? h("text", { class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted" }) : null,
|
|
324
|
-
item.tag ? h(
|
|
325
|
-
"text",
|
|
326
|
-
{ class: `hlw-menu-tag hlw-menu-tag--${item.tagTheme || "rose"} ${item.tagPulse ? "hlw-menu-tag-pulse" : ""}` },
|
|
327
|
-
item.tag
|
|
328
|
-
) : null,
|
|
329
|
-
h("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" })
|
|
330
|
-
])
|
|
331
|
-
]);
|
|
332
|
-
};
|
|
333
|
-
}
|
|
334
|
-
});
|
|
335
315
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
336
316
|
__name: "index",
|
|
337
317
|
props: {
|
|
@@ -357,9 +337,23 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
357
337
|
"hover-class": "hlw-menu-item--active"
|
|
358
338
|
}, {
|
|
359
339
|
default: withCtx(() => [
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
340
|
+
createElementVNode("view", _hoisted_2$2, [
|
|
341
|
+
createElementVNode("view", {
|
|
342
|
+
class: normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
343
|
+
}, [
|
|
344
|
+
createElementVNode("text", {
|
|
345
|
+
class: normalizeClass(item.icon)
|
|
346
|
+
}, null, 2)
|
|
347
|
+
], 2),
|
|
348
|
+
createElementVNode("text", _hoisted_3$2, toDisplayString(item.label), 1)
|
|
349
|
+
]),
|
|
350
|
+
createElementVNode("view", _hoisted_4$1, [
|
|
351
|
+
item.tag ? (openBlock(), createElementBlock("text", {
|
|
352
|
+
key: 0,
|
|
353
|
+
class: normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
354
|
+
}, toDisplayString(item.tag), 3)) : createCommentVNode("", true),
|
|
355
|
+
_cache[0] || (_cache[0] = createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
|
|
356
|
+
])
|
|
363
357
|
]),
|
|
364
358
|
_: 2
|
|
365
359
|
}, 1032, ["url"])) : (openBlock(), createElementBlock("view", {
|
|
@@ -368,18 +362,33 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
368
362
|
"hover-class": "hlw-menu-item--active",
|
|
369
363
|
onClick: ($event) => handleClick(item)
|
|
370
364
|
}, [
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
365
|
+
createElementVNode("view", _hoisted_6$1, [
|
|
366
|
+
createElementVNode("view", {
|
|
367
|
+
class: normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
368
|
+
}, [
|
|
369
|
+
createElementVNode("text", {
|
|
370
|
+
class: normalizeClass(item.icon)
|
|
371
|
+
}, null, 2)
|
|
372
|
+
], 2),
|
|
373
|
+
createElementVNode("text", _hoisted_7$1, toDisplayString(item.label), 1)
|
|
374
|
+
]),
|
|
375
|
+
createElementVNode("view", _hoisted_8, [
|
|
376
|
+
item.loading ? (openBlock(), createElementBlock("text", _hoisted_9)) : createCommentVNode("", true),
|
|
377
|
+
item.tag ? (openBlock(), createElementBlock("text", {
|
|
378
|
+
key: 1,
|
|
379
|
+
class: normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
380
|
+
}, toDisplayString(item.tag), 3)) : createCommentVNode("", true),
|
|
381
|
+
_cache[1] || (_cache[1] = createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
|
|
382
|
+
])
|
|
383
|
+
], 8, _hoisted_5$1)),
|
|
384
|
+
index2 < visibleItems.value.length - 1 ? (openBlock(), createElementBlock("view", _hoisted_10)) : createCommentVNode("", true)
|
|
376
385
|
], 64);
|
|
377
386
|
}), 128))
|
|
378
387
|
]);
|
|
379
388
|
};
|
|
380
389
|
}
|
|
381
390
|
});
|
|
382
|
-
const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
391
|
+
const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ff3b3322"]]);
|
|
383
392
|
const _hoisted_1$1 = { class: "hlw-menu-list" };
|
|
384
393
|
const _hoisted_2$1 = ["onTap"];
|
|
385
394
|
const _hoisted_3$1 = { class: "hlw-menu-list__left" };
|
package/dist/style.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
.hlw-avatar[data-v-7e8f98a5] {
|
|
3
3
|
border-radius: 50%;
|
|
4
4
|
overflow: hidden;
|
|
@@ -144,8 +144,7 @@ to { transform: rotate(360deg);
|
|
|
144
144
|
font-size: 26rpx;
|
|
145
145
|
color: #999;
|
|
146
146
|
}
|
|
147
|
-
|
|
148
|
-
.hlw-menu[data-v-48deaf95] {
|
|
147
|
+
.hlw-menu[data-v-ff3b3322] {
|
|
149
148
|
background: #fff;
|
|
150
149
|
border-radius: var(--radius-lg, 24rpx);
|
|
151
150
|
border: 1rpx solid var(--border-color, #e2e8f0);
|
|
@@ -153,38 +152,31 @@ to { transform: rotate(360deg);
|
|
|
153
152
|
width: 100%;
|
|
154
153
|
padding: 8rpx 0;
|
|
155
154
|
}
|
|
156
|
-
.hlw-menu-item[data-v-
|
|
155
|
+
.hlw-menu-item[data-v-ff3b3322] {
|
|
157
156
|
display: flex;
|
|
158
157
|
align-items: center;
|
|
159
158
|
justify-content: space-between;
|
|
160
159
|
padding: 16rpx 32rpx;
|
|
161
160
|
}
|
|
162
|
-
.hlw-menu-item--active[data-v-
|
|
161
|
+
.hlw-menu-item--active[data-v-ff3b3322] {
|
|
163
162
|
background: #f8fafc;
|
|
164
163
|
}
|
|
165
|
-
.hlw-menu-divider[data-v-
|
|
164
|
+
.hlw-menu-divider[data-v-ff3b3322] {
|
|
166
165
|
margin: 8rpx 0;
|
|
167
166
|
height: 0;
|
|
168
167
|
border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
|
|
169
168
|
}
|
|
170
|
-
|
|
171
|
-
/* 下面的样式供 HlwMenuItemContent 内部渲染用(非 scoped) */.hlw-menu-item-inner {
|
|
172
|
-
display: flex;
|
|
173
|
-
align-items: center;
|
|
174
|
-
justify-content: space-between;
|
|
175
|
-
width: 100%;
|
|
176
|
-
}
|
|
177
|
-
.hlw-menu-left {
|
|
169
|
+
.hlw-menu-left[data-v-ff3b3322] {
|
|
178
170
|
display: flex;
|
|
179
171
|
align-items: center;
|
|
180
172
|
gap: 24rpx;
|
|
181
173
|
}
|
|
182
|
-
.hlw-menu-right {
|
|
174
|
+
.hlw-menu-right[data-v-ff3b3322] {
|
|
183
175
|
display: flex;
|
|
184
176
|
align-items: center;
|
|
185
177
|
gap: 16rpx;
|
|
186
178
|
}
|
|
187
|
-
.hlw-menu-icon {
|
|
179
|
+
.hlw-menu-icon[data-v-ff3b3322] {
|
|
188
180
|
width: 64rpx;
|
|
189
181
|
height: 64rpx;
|
|
190
182
|
border-radius: var(--radius-md, 16rpx);
|
|
@@ -193,76 +185,76 @@ to { transform: rotate(360deg);
|
|
|
193
185
|
justify-content: center;
|
|
194
186
|
flex-shrink: 0;
|
|
195
187
|
}
|
|
196
|
-
.hlw-menu-icon text {
|
|
188
|
+
.hlw-menu-icon text[data-v-ff3b3322] {
|
|
197
189
|
font-size: 20rpx;
|
|
198
190
|
}
|
|
199
|
-
.hlw-menu-icon--orange {
|
|
191
|
+
.hlw-menu-icon--orange[data-v-ff3b3322] {
|
|
200
192
|
background: #fff7ed;
|
|
201
193
|
color: #f97316;
|
|
202
194
|
}
|
|
203
|
-
.hlw-menu-icon--purple {
|
|
195
|
+
.hlw-menu-icon--purple[data-v-ff3b3322] {
|
|
204
196
|
background: #faf5ff;
|
|
205
197
|
color: #a855f7;
|
|
206
198
|
}
|
|
207
|
-
.hlw-menu-icon--wechat {
|
|
199
|
+
.hlw-menu-icon--wechat[data-v-ff3b3322] {
|
|
208
200
|
background: #f0fdf4;
|
|
209
201
|
color: #07C160;
|
|
210
202
|
}
|
|
211
|
-
.hlw-menu-icon--cyan {
|
|
203
|
+
.hlw-menu-icon--cyan[data-v-ff3b3322] {
|
|
212
204
|
background: #ecfeff;
|
|
213
205
|
color: #06b6d4;
|
|
214
206
|
}
|
|
215
|
-
.hlw-menu-icon--emerald {
|
|
207
|
+
.hlw-menu-icon--emerald[data-v-ff3b3322] {
|
|
216
208
|
background: #ecfdf5;
|
|
217
209
|
color: #10b981;
|
|
218
210
|
}
|
|
219
|
-
.hlw-menu-icon--slate {
|
|
211
|
+
.hlw-menu-icon--slate[data-v-ff3b3322] {
|
|
220
212
|
background: #f1f5f9;
|
|
221
213
|
color: #64748b;
|
|
222
214
|
}
|
|
223
|
-
.hlw-menu-icon--rose {
|
|
215
|
+
.hlw-menu-icon--rose[data-v-ff3b3322] {
|
|
224
216
|
background: #fff1f2;
|
|
225
217
|
color: #f43f5e;
|
|
226
218
|
}
|
|
227
|
-
.hlw-menu-icon--blue {
|
|
219
|
+
.hlw-menu-icon--blue[data-v-ff3b3322] {
|
|
228
220
|
background: #eff6ff;
|
|
229
221
|
color: #3b82f6;
|
|
230
222
|
}
|
|
231
|
-
.hlw-menu-icon--red {
|
|
223
|
+
.hlw-menu-icon--red[data-v-ff3b3322] {
|
|
232
224
|
background: #fef2f2;
|
|
233
225
|
color: #ef4444;
|
|
234
226
|
}
|
|
235
|
-
.hlw-menu-label {
|
|
227
|
+
.hlw-menu-label[data-v-ff3b3322] {
|
|
236
228
|
font-size: 28rpx;
|
|
237
229
|
font-weight: 500;
|
|
238
230
|
color: #334155;
|
|
239
231
|
}
|
|
240
|
-
.hlw-menu-tag {
|
|
232
|
+
.hlw-menu-tag[data-v-ff3b3322] {
|
|
241
233
|
font-size: 20rpx;
|
|
242
234
|
color: #fff;
|
|
243
235
|
padding: 2rpx 12rpx;
|
|
244
236
|
border-radius: 9999rpx;
|
|
245
237
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
246
238
|
}
|
|
247
|
-
.hlw-menu-tag--orange {
|
|
239
|
+
.hlw-menu-tag--orange[data-v-ff3b3322] {
|
|
248
240
|
background: #fb923c;
|
|
249
241
|
}
|
|
250
|
-
.hlw-menu-tag--red {
|
|
242
|
+
.hlw-menu-tag--red[data-v-ff3b3322] {
|
|
251
243
|
background: #ef4444;
|
|
252
244
|
}
|
|
253
|
-
.hlw-menu-tag--wechat {
|
|
245
|
+
.hlw-menu-tag--wechat[data-v-ff3b3322] {
|
|
254
246
|
background: #07C160;
|
|
255
247
|
}
|
|
256
|
-
.hlw-menu-tag--rose {
|
|
248
|
+
.hlw-menu-tag--rose[data-v-ff3b3322] {
|
|
257
249
|
background: #f43f5e;
|
|
258
250
|
}
|
|
259
|
-
.hlw-menu-tag--blue {
|
|
251
|
+
.hlw-menu-tag--blue[data-v-ff3b3322] {
|
|
260
252
|
background: #3b82f6;
|
|
261
253
|
}
|
|
262
|
-
.hlw-menu-tag-pulse {
|
|
263
|
-
animation:
|
|
254
|
+
.hlw-menu-tag-pulse[data-v-ff3b3322] {
|
|
255
|
+
animation: tag-pulse-ff3b3322 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
264
256
|
}
|
|
265
|
-
@keyframes
|
|
257
|
+
@keyframes tag-pulse-ff3b3322 {
|
|
266
258
|
0%, 100% {
|
|
267
259
|
opacity: 1;
|
|
268
260
|
}
|
|
@@ -270,18 +262,18 @@ to { transform: rotate(360deg);
|
|
|
270
262
|
opacity: 0.5;
|
|
271
263
|
}
|
|
272
264
|
}
|
|
273
|
-
.hlw-menu-arrow {
|
|
265
|
+
.hlw-menu-arrow[data-v-ff3b3322] {
|
|
274
266
|
color: #d1d5db;
|
|
275
267
|
font-size: 20rpx;
|
|
276
268
|
}
|
|
277
|
-
.hlw-menu-spin {
|
|
278
|
-
animation:
|
|
269
|
+
.hlw-menu-spin[data-v-ff3b3322] {
|
|
270
|
+
animation: icon-spin-ff3b3322 1s linear infinite;
|
|
279
271
|
}
|
|
280
|
-
.hlw-menu-muted {
|
|
272
|
+
.hlw-menu-muted[data-v-ff3b3322] {
|
|
281
273
|
color: #94a3b8;
|
|
282
274
|
font-size: 20rpx;
|
|
283
275
|
}
|
|
284
|
-
@keyframes
|
|
276
|
+
@keyframes icon-spin-ff3b3322 {
|
|
285
277
|
from {
|
|
286
278
|
transform: rotate(0deg);
|
|
287
279
|
}
|
package/package.json
CHANGED
|
@@ -2,15 +2,32 @@
|
|
|
2
2
|
<view class="hlw-menu">
|
|
3
3
|
<template v-for="(item, index) in visibleItems" :key="index">
|
|
4
4
|
<navigator v-if="item.url" :url="item.url" class="hlw-menu-item" hover-class="hlw-menu-item--active">
|
|
5
|
-
<
|
|
6
|
-
<hlw-menu-
|
|
7
|
-
|
|
5
|
+
<view class="hlw-menu-left">
|
|
6
|
+
<view class="hlw-menu-icon" :class="`hlw-menu-icon--${item.iconTheme || 'slate'}`">
|
|
7
|
+
<text :class="item.icon"></text>
|
|
8
|
+
</view>
|
|
9
|
+
<text class="hlw-menu-label">{{ item.label }}</text>
|
|
10
|
+
</view>
|
|
11
|
+
<view class="hlw-menu-right">
|
|
12
|
+
<text v-if="item.tag" class="hlw-menu-tag" :class="[`hlw-menu-tag--${item.tagTheme || 'rose'}`, item.tagPulse ? 'hlw-menu-tag-pulse' : '']">{{ item.tag }}</text>
|
|
13
|
+
<text class="i-fa6-solid-chevron-right hlw-menu-arrow"></text>
|
|
14
|
+
</view>
|
|
8
15
|
</navigator>
|
|
16
|
+
|
|
9
17
|
<view v-else class="hlw-menu-item" hover-class="hlw-menu-item--active" @click="handleClick(item)">
|
|
10
|
-
<
|
|
11
|
-
<hlw-menu-
|
|
12
|
-
|
|
18
|
+
<view class="hlw-menu-left">
|
|
19
|
+
<view class="hlw-menu-icon" :class="`hlw-menu-icon--${item.iconTheme || 'slate'}`">
|
|
20
|
+
<text :class="item.icon"></text>
|
|
21
|
+
</view>
|
|
22
|
+
<text class="hlw-menu-label">{{ item.label }}</text>
|
|
23
|
+
</view>
|
|
24
|
+
<view class="hlw-menu-right">
|
|
25
|
+
<text v-if="item.loading" class="i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"></text>
|
|
26
|
+
<text v-if="item.tag" class="hlw-menu-tag" :class="[`hlw-menu-tag--${item.tagTheme || 'rose'}`, item.tagPulse ? 'hlw-menu-tag-pulse' : '']">{{ item.tag }}</text>
|
|
27
|
+
<text class="i-fa6-solid-chevron-right hlw-menu-arrow"></text>
|
|
28
|
+
</view>
|
|
13
29
|
</view>
|
|
30
|
+
|
|
14
31
|
<view v-if="index < visibleItems.length - 1" class="hlw-menu-divider"></view>
|
|
15
32
|
</template>
|
|
16
33
|
</view>
|
|
@@ -18,27 +35,8 @@
|
|
|
18
35
|
|
|
19
36
|
<script setup lang="ts">
|
|
20
37
|
import { computed } from "vue";
|
|
21
|
-
|
|
22
|
-
export
|
|
23
|
-
/** 图标 class,如 'i-fa6-solid-gear' */
|
|
24
|
-
icon: string;
|
|
25
|
-
/** 图标主题色 */
|
|
26
|
-
iconTheme?: "orange" | "purple" | "cyan" | "emerald" | "slate" | "wechat" | "rose" | "blue" | "red";
|
|
27
|
-
/** 菜单文字 */
|
|
28
|
-
label: string;
|
|
29
|
-
/** 跳转路径,有值则用 navigator 包裹 */
|
|
30
|
-
url?: string;
|
|
31
|
-
/** 右侧标签文字 */
|
|
32
|
-
tag?: string;
|
|
33
|
-
/** 标签主题色 */
|
|
34
|
-
tagTheme?: "orange" | "red" | "wechat" | "rose" | "blue";
|
|
35
|
-
/** 标签是否闪烁 */
|
|
36
|
-
tagPulse?: boolean;
|
|
37
|
-
/** 加载中状态(右侧显示 loading 图标) */
|
|
38
|
-
loading?: boolean;
|
|
39
|
-
/** 是否显示,默认 true */
|
|
40
|
-
visible?: boolean;
|
|
41
|
-
}
|
|
38
|
+
import type { HlwMenuItem } from "./types";
|
|
39
|
+
export type { HlwMenuItem } from "./types";
|
|
42
40
|
|
|
43
41
|
interface Props {
|
|
44
42
|
items: HlwMenuItem[];
|
|
@@ -56,49 +54,6 @@ const handleClick = (item: HlwMenuItem) => {
|
|
|
56
54
|
};
|
|
57
55
|
</script>
|
|
58
56
|
|
|
59
|
-
<!-- 子组件:菜单项内容(内部使用) -->
|
|
60
|
-
<script lang="ts">
|
|
61
|
-
// 注册内部组件
|
|
62
|
-
import { defineComponent, h } from "vue";
|
|
63
|
-
|
|
64
|
-
const HlwMenuItemContent = defineComponent({
|
|
65
|
-
name: "HlwMenuItemContent",
|
|
66
|
-
props: {
|
|
67
|
-
item: { type: Object, required: true },
|
|
68
|
-
},
|
|
69
|
-
setup(props) {
|
|
70
|
-
return () => {
|
|
71
|
-
const item = props.item as import("./index.vue").HlwMenuItem;
|
|
72
|
-
return h("view", { class: "hlw-menu-item-inner" }, [
|
|
73
|
-
// 左侧
|
|
74
|
-
h("view", { class: "hlw-menu-left" }, [
|
|
75
|
-
h("view", { class: `hlw-menu-icon hlw-menu-icon--${item.iconTheme || "slate"}` }, [
|
|
76
|
-
h("text", { class: item.icon }),
|
|
77
|
-
]),
|
|
78
|
-
h("text", { class: "hlw-menu-label" }, item.label),
|
|
79
|
-
]),
|
|
80
|
-
// 右侧
|
|
81
|
-
h("view", { class: "hlw-menu-right" }, [
|
|
82
|
-
item.loading
|
|
83
|
-
? h("text", { class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted" })
|
|
84
|
-
: null,
|
|
85
|
-
item.tag
|
|
86
|
-
? h(
|
|
87
|
-
"text",
|
|
88
|
-
{ class: `hlw-menu-tag hlw-menu-tag--${item.tagTheme || "rose"} ${item.tagPulse ? "hlw-menu-tag-pulse" : ""}` },
|
|
89
|
-
item.tag,
|
|
90
|
-
)
|
|
91
|
-
: null,
|
|
92
|
-
h("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }),
|
|
93
|
-
]),
|
|
94
|
-
]);
|
|
95
|
-
};
|
|
96
|
-
},
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
export { HlwMenuItemContent };
|
|
100
|
-
</script>
|
|
101
|
-
|
|
102
57
|
<style lang="scss" scoped>
|
|
103
58
|
.hlw-menu {
|
|
104
59
|
background: #fff;
|
|
@@ -126,17 +81,6 @@ export { HlwMenuItemContent };
|
|
|
126
81
|
border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
|
|
127
82
|
}
|
|
128
83
|
|
|
129
|
-
/* 下面的样式供 HlwMenuItemContent 内部渲染用(非 scoped) */
|
|
130
|
-
</style>
|
|
131
|
-
|
|
132
|
-
<style lang="scss">
|
|
133
|
-
.hlw-menu-item-inner {
|
|
134
|
-
display: flex;
|
|
135
|
-
align-items: center;
|
|
136
|
-
justify-content: space-between;
|
|
137
|
-
width: 100%;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
84
|
.hlw-menu-left {
|
|
141
85
|
display: flex;
|
|
142
86
|
align-items: center;
|
|
@@ -192,10 +136,10 @@ export { HlwMenuItemContent };
|
|
|
192
136
|
}
|
|
193
137
|
|
|
194
138
|
.hlw-menu-tag-pulse {
|
|
195
|
-
animation:
|
|
139
|
+
animation: tag-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
196
140
|
}
|
|
197
141
|
|
|
198
|
-
@keyframes
|
|
142
|
+
@keyframes tag-pulse {
|
|
199
143
|
0%, 100% { opacity: 1; }
|
|
200
144
|
50% { opacity: 0.5; }
|
|
201
145
|
}
|
|
@@ -206,7 +150,7 @@ export { HlwMenuItemContent };
|
|
|
206
150
|
}
|
|
207
151
|
|
|
208
152
|
.hlw-menu-spin {
|
|
209
|
-
animation:
|
|
153
|
+
animation: icon-spin 1s linear infinite;
|
|
210
154
|
}
|
|
211
155
|
|
|
212
156
|
.hlw-menu-muted {
|
|
@@ -214,7 +158,7 @@ export { HlwMenuItemContent };
|
|
|
214
158
|
font-size: 20rpx;
|
|
215
159
|
}
|
|
216
160
|
|
|
217
|
-
@keyframes
|
|
161
|
+
@keyframes icon-spin {
|
|
218
162
|
from { transform: rotate(0deg); }
|
|
219
163
|
to { transform: rotate(360deg); }
|
|
220
164
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface HlwMenuItem {
|
|
2
|
+
/** 图标 class,如 'i-fa6-solid-gear' */
|
|
3
|
+
icon: string;
|
|
4
|
+
/** 图标主题色 */
|
|
5
|
+
iconTheme?: "orange" | "purple" | "cyan" | "emerald" | "slate" | "wechat" | "rose" | "blue" | "red";
|
|
6
|
+
/** 菜单文字 */
|
|
7
|
+
label: string;
|
|
8
|
+
/** 跳转路径,有值则用 navigator 包裹 */
|
|
9
|
+
url?: string;
|
|
10
|
+
/** 右侧标签文字 */
|
|
11
|
+
tag?: string;
|
|
12
|
+
/** 标签主题色 */
|
|
13
|
+
tagTheme?: "orange" | "red" | "wechat" | "rose" | "blue";
|
|
14
|
+
/** 标签是否闪烁 */
|
|
15
|
+
tagPulse?: boolean;
|
|
16
|
+
/** 加载中状态 */
|
|
17
|
+
loading?: boolean;
|
|
18
|
+
/** 是否显示,默认 true */
|
|
19
|
+
visible?: boolean;
|
|
20
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -9,7 +9,7 @@ export { default as HlwEmpty } from './components/hlw-empty/index.vue';
|
|
|
9
9
|
export { default as HlwHeader } from './components/hlw-header/index.vue';
|
|
10
10
|
export { default as HlwLoading } from './components/hlw-loading/index.vue';
|
|
11
11
|
export { default as HlwMenu } from './components/hlw-menu/index.vue';
|
|
12
|
-
export type { HlwMenuItem } from './components/hlw-menu/
|
|
12
|
+
export type { HlwMenuItem } from './components/hlw-menu/types';
|
|
13
13
|
export { default as HlwMenuList } from './components/hlw-menu-list/index.vue';
|
|
14
14
|
export { default as HlwPage } from './components/hlw-page/index.vue';
|
|
15
15
|
export type { MenuItem } from './components/hlw-menu-list/types';
|