TUI

<template>
  <TsMenu v-model="activeBasePath" :menus="iMenus" @change="handleMenuChange" :ssg="false" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { MenuItem } from 'tui/components/base/TsMenuBase.vue';

const activeBasePath = ref('/path1');
const iMenus = [
  { path: '/path1', name: '菜单1', children: [] },
  { path: '/path2', name: '菜单2', children: [] },
  { path: '/path3', name: '菜单3', children: [] },
];
const handleMenuChange = (item: MenuItem) => {
  console.log('选中菜单路径：', item.path);
};
</script>

<template>
  <div style="width: 300px">
    <TsMenu :value="activeUncontrolledPath" :menus="iMenus" @change="handleUncontrolledPath" :ssg="false" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { MenuItem } from 'tui/components/base/TsMenuBase.vue';

const activeUncontrolledPath = ref('/path1');

const iMenus = [
  { path: '/path1', name: '菜单1', children: [] },
  { path: '/path2', name: '菜单2', children: [] },
  { path: '/path3', name: '菜单3', children: [] },
];

const handleUncontrolledPath = (item: MenuItem) => {
  activeUncontrolledPath.value = item.path;
};
</script>

<template>
  <div style="width: 300px">
    <TsMenu v-model="activePath" :menus="iconMenus" @change="handleMenuChange" :ssg="false">
      <template #prefix="{ data }">
        <BussinessViconsIcon :icon="data.icon" />
      </template>
    </TsMenu>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { MenuItem } from 'tui/components/base/TsMenuBase.vue';
import BussinessViconsIcon from '@/components/BussinessViconsIcon.vue';

const activePath = ref('/path1');
const iconMenus = [
  { path: '/path1', name: '菜单1', icon: 'HomeRound', children: [] },
  { path: '/path2', name: '菜单2', icon: 'AdminPanelSettingsFilled', children: [] },
  { path: '/path3', name: '菜单3', icon: 'DynamicFormSharp', children: [] },
];
const handleMenuChange = (item: MenuItem) => {
  console.log('选中菜单路径：', item.path);
};
</script>

<template>
  <div style="width: 300px">
    <TsMenu v-model="activePath" :menus="nestedMenus" :ssg="false" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const activePath = ref('/nested/path1');
const nestedMenus = [
  {
    path: '/nested',
    name: '多级菜单',

    children: [
      { path: '/nested/path1', name: '子菜单 1', children: [] },
      {
        path: '/nested/group',
        name: '子菜单组',

        children: [
          { path: '/nested/group/item1', name: '分组项 1', children: [] },
          { path: '/nested/group/item2', name: '分组项 2', children: [] },
        ],
      },
    ],
  },
];
</script>

<template>
  <div style="width: 300px">
    <TsMenuGroup v-model="groupPath" :ssg="false">
      <TsMenu :menus="iMenus" />
      <TsMenu :menus="tMenus" />
    </TsMenuGroup>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const groupPath = ref('/path2');
const iMenus = [
  { path: '/path1', name: '菜单1', children: [] },
  { path: '/path2', name: '菜单2', children: [] },
  { path: '/path3', name: '菜单3', children: [] },
];
const tMenus = [
  { path: '/path5', name: '菜单5', children: [] },
  { path: '/path6', name: '菜单6', children: [] },
  { path: '/path7', name: '菜单7', children: [] },
];
</script>

<template>
  <div class="component-card-demo-wrap" style="margin-bottom: 24px">
    <TsButton @click="activePath3 = '/home'">changeTo: '/home'</TsButton>
    <TsButton @click="activePath3 = '/setting/menu'">changeTo: '/setting/menu'</TsButton>
    <TsButton @click="handleExpandPath()">expand: 'v-model value'</TsButton>
    <TsButton @click="handleExpandPath('/editor/index')">expand: '/editor/index'</TsButton>
  </div>
  <div style="width: 300px">
    <TsMenu ref="expandMenuRef" v-model="activePath3" :menus="adaptationMenus" :ssg="false">
      <template #prefix="{ data }">
        <BussinessViconsIcon icon="HomeRound" v-if="data.meta.icon" />
        <div style="margin-left: 28px" v-else></div>
      </template>
    </TsMenu>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import type { TsMenuInstance } from 'tui/components/menu';
import BussinessViconsIcon from '@/components/BussinessViconsIcon.vue';


const menuRouteData = [
  { path: '/home', name: 'home', meta: { title: '首页', icon: 'House' }, children: [] },
  {
    path: '/setting',
    component: null,
    meta: { title: '权限管理', icon: 'Setting' },
    children: [
      { path: '/setting/user', name: 'user', meta: { title: '用户管理' } },
      { path: '/setting/menu', name: 'menu', meta: { title: '菜单管理' } },
    ],
  },
  {
    path: '/editor',
    component: null,
    meta: { title: '编辑器', icon: 'ChatDotRound' },
    children: [{ path: '/editor/index', meta: { title: '编辑器' } }],
  },
  {
    path: '/img',
    component: null,
    meta: { title: '图片裁剪', icon: 'PictureFilled' },
    children: [{ path: '/img/index', meta: { title: '图片裁剪' } }],
  },
  {
    path: '/code',
    component: null,
    meta: { title: '代码管理', icon: 'NoSmoking' },
    children: [{ path: '/code/index', meta: { title: '代码管理' } }],
  },
];

const activePath3 = ref('/setting/menu');
const expandMenuRef = ref<TsMenuInstance>();

const adaptationMenus = computed(() => {
  return menuRouteData.map((item: any) => {
    item.name = item.meta.title;
    item.children.map((child: any) => {
      child.name = child.meta.title;
      return child;
    });
    return item;
  });
});

const handleExpandPath = (path?: string) => {
  expandMenuRef.value?.expandByPath(path);
};
</script>