Menu 导航菜单 #

<template>
  <div class="menu-ui-page">
    <Menu :data="the.sidebar" @onEvent="onMenuEvent" />
  </div>
</template>

<script>
export default {
  setup() {
    // 使用外挂方式引入，具体查看demo
    const $plus = window.$plus;
    const reactive = $plus.vue.reactive;

    const the = reactive({
      sidebar: [
        {
          icon: 'icon-rili',
          path: '/workplace',
          title: '工作台',
          dot: true,
          // 子菜单
          children: [
            {
              icon: 'icon-menu',
              path: '/TestTree',
              title: '树列表',
            },
            {
              icon: 'icon-menu',
              path: '/TestTree',
              title: '树列表',
              dot: '99',
            },
            { icon: 'icon-menu', path: '/TestTree', title: '树列表' },
          ],
        },
        {
          icon: 'icon-rili',
          path: '/home',
          title: '首页',
        },
      ],
    });

    /**
     *  菜单点击
     */
    const onMenuEvent = (resp) => {
      console.log('btnMenu', resp);
      switch (resp.cmd) {
        case 'click':
          break;
      }
    };

    return { the, onMenuEvent };
  },
};
</script>
<style lang="less">
.menu-ui-page {
  ul,
  li {
    list-style: none outside none;
  }
  background-color: #1a202c;
  width: 8rem;
  .title {
    font-size: 0.6rem;
  }
}
</style>