https://statics.tvcbook.com/website/frontend/js/components/ysMenu.js?=v1.2.640

1const ysMenu = {
2  template: `
3  <a-menu>
4    <div v-if="nickName" class="max-w-285 mb-5 text-xs font-semibold break-words">{{ nickName }} 的账号</div>
5    <template v-for="(item, index) in sidebarList" :key="index">
6      <template v-if="item.children">
7        <a-sub-menu :key="item.key">
8          <template #icon v-if="showIcon"><iconpark-icon :name="item.icon" size="18px"></iconpark-icon></template>
9          <template #title>{{ item.title }}</template>
10          <template v-for="(data, index) in item.children" :key="index">
11            <div :class="hasIcon ? 'border-l-1 border-info02 ml-7.5' : ''" v-if="data.disabled||data.isPhone">
12              <a-menu-item :key="data.key" :disabled='data.disabled' @click='clickMenu(data.isPhone)'>
13                <span class="relative">
14                  {{ data.title }}
15                  <div class='block text-xs text-regular h-4 rounded-3 bg-info01 font-semibold absolute top-0 -right-14.5' v-if='data.disabled||!data.isPhone'>
16                    <span class="block" style="transform: scale(0.8);">即将推出</span>
17                  </div>
18                </span>
19              </a-menu-item>
20            </div>
21            <div :class="hasIcon ? 'border-l-1 border-info02 ml-7.5' : ''" v-else>
22              <router-link :to="data.routerLink">
23                <a-menu-item :key="data.key" :disabled='data.disabled'>
24                  {{ data.title }}
25                </a-menu-item>
26              </router-link>
27            </div>
28          </template>
29        </a-sub-menu>
30      </template>
31      <template v-else>
32        <router-link :to="item.routerLink" class="mb-2.5 block">
33          <a-menu-item :key="item.key" :disabled='item.disabled'>
34            <template #icon v-if="showIcon"><iconpark-icon :name="item.icon" size="18px"></iconpark-icon></template>
35            {{ item.title }}
36          </a-menu-item>
37        </router-link>
38      </template>
39    </template>
40  </a-menu>
41  `,
42  props: {
43    sidebarList: {
44      type: Object,
45      default: []
46    },
47    nickName: {
48      type: String,
49      default: ''
50    },
51    showIcon: {
52      type: Boolean,
53      default: false
54    },
55    hasIcon: {
56      type: Boolean,
57      default: false
58    }
59  },
60  setup(props, { emit }) {
61    const { ref } = Vue;
62    const { Notification, Message } = ArcoVue
63
64    const handleOpen = () => {
65      emit('openMenu');
66    }
67
68    const clickMenu = (isPhone) => {
69       if(isPhone){
70        Message.warning('请到电脑端进行操作')
71       }
72    }
73
74    return {
75      handleOpen,
76      clickMenu
77    }
78  }
79}