index.vue
3.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<script lang="ts" setup>
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import { Page } from '@vben/common-ui';
import { useAccessStore } from '@vben/stores';
import { MenuBadge } from '@vben-core/menu-ui';
import { Button, Card, Radio, RadioGroup } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
const colors = [
{ label: '预设：默认', value: 'default' },
{ label: '预设：关键', value: 'destructive' },
{ label: '预设：主要', value: 'primary' },
{ label: '预设：成功', value: 'success' },
{ label: '自定义', value: 'bg-gray-200 text-black' },
];
const route = useRoute();
const accessStore = useAccessStore();
const menu = accessStore.getMenuByPath(route.path);
const badgeProps = reactive({
badge: menu?.badge as string,
badgeType: menu?.badge ? 'normal' : (menu?.badgeType as 'dot' | 'normal'),
badgeVariants: menu?.badgeVariants as string,
});
const [Form] = useVbenForm({
handleValuesChange(values) {
badgeProps.badge = values.badge;
badgeProps.badgeType = values.badgeType;
badgeProps.badgeVariants = values.badgeVariants;
},
schema: [
{
component: 'RadioGroup',
componentProps: {
buttonStyle: 'solid',
options: [
{ label: '点徽标', value: 'dot' },
{ label: '文字徽标', value: 'normal' },
],
optionType: 'button',
},
defaultValue: badgeProps.badgeType,
fieldName: 'badgeType',
label: '类型',
},
{
component: 'Input',
componentProps: {
maxLength: 4,
placeholder: '请输入徽标内容',
style: { width: '200px' },
},
defaultValue: badgeProps.badge,
fieldName: 'badge',
label: '徽标内容',
},
{
component: 'RadioGroup',
defaultValue: badgeProps.badgeVariants,
fieldName: 'badgeVariants',
label: '颜色',
},
{
component: 'Input',
fieldName: 'action',
},
],
showDefaultActions: false,
});
function updateMenuBadge() {
if (menu) {
menu.badge = badgeProps.badge;
menu.badgeType = badgeProps.badgeType;
menu.badgeVariants = badgeProps.badgeVariants;
}
}
</script>
<template>
<Page
description="菜单项上可以显示徽标，这些徽标可以主动更新"
title="菜单徽标"
>
<Card title="徽标更新">
<Form>
<template #badgeVariants="slotProps">
<RadioGroup v-bind="slotProps">
<Radio
v-for="color in colors"
:key="color.value"
:value="color.value"
>
<div
:title="color.label"
class="flex h-[14px] w-[50px] items-center justify-start"
>
<MenuBadge
v-bind="{ ...badgeProps, badgeVariants: color.value }"
/>
</div>
</Radio>
</RadioGroup>
</template>
<template #action>
<Button type="primary" @click="updateMenuBadge">更新徽标</Button>
</template>
</Form>
</Card>
</Page>
</template>