Sidenav

侧边导航栏

基础用法

通过配置 menu-list 对象来定义侧边栏的展示

vue
<template>
  <div style="height: 50vh; display: flex">
    <ap-side-nav
      :menu-list="menu"
      :active-key="activeKey"
      key-field="path"
      @select="select"
    />
    <div>
      <div style="font-size: 24px; margin-left: 150px">Content</div>
      <div>current path: {{ activeKey }}</div>
      <div>current menu: {{ title }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SideNavNode } from 'apathia-ui'

const menu = ref<SideNavNode[]>([
  {
    text: 'Navigator One',
    children: [
      {
        path: '/navigator_1/item_1',
        auth: 'WORKBENCH_TODO',
        text: 'item one',
      },
      {
        path: '/navigator_1/item_2',
        auth: 'WORKBENCH_TODO',
        text: 'item two',
      },
      {
        path: '/navigator_1/item_3',
        auth: 'WORKBENCH_TODO',
        text: 'item three',
      },
    ],
  },
  {
    text: 'Navigator Two',
    children: [
      {
        path: '/navigator_2/item_1',
        auth: 'WORKBENCH_TODO',
        text: 'item one',
      },
      {
        path: '/navigator_2/item_2',
        auth: 'WORKBENCH_TODO',
        text: 'item two',
      },
      {
        path: '/navigator_2/item_3',
        auth: 'WORKBENCH_TODO',
        text: 'item three',
      },
    ],
  },
  {
    text: 'Navigator Tree',
    path: '/navigator_3',
  },
  {
    text: 'Navigator Four',
    path: '/navigator_4',
  },
  {
    text: 'Navigator Five',
    path: '/navigator_5',
  },
])

const activeKey = ref<string>('')
const title = ref<string>('')

const select = (node: SideNavNode) => {
  title.value = node.text!
  activeKey.value = node.path
}
</script>

隐藏侧边栏

通过 mini 来控制侧边栏的显示与隐藏

TIP

显示与隐藏需要手动进行操作

vue
<template>
  <ap-button primary @click="hiddenVal = !hiddenVal"
    >{{ hiddenVal ? 'Show' : 'Hidden' }} ap-side-nav</ap-button
  >
  <div style="height: 50vh; display: flex">
    <ap-side-nav :mini="hiddenVal" :menu-list="menu" key-field="path" />
    <div style="font-size: 24px; margin-left: 150px">Content</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SideNavNode } from 'apathia-ui'

const menu = ref<SideNavNode[]>([
  {
    text: 'Navigator One',
    children: [
      {
        path: '/navigator_1/item_1',
        auth: 'WORKBENCH_TODO',
        text: 'item one',
      },
      {
        path: '/navigator_1/item_2',
        auth: 'WORKBENCH_TODO',
        text: 'item two',
      },
      {
        path: '/navigator_1/item_3',
        auth: 'WORKBENCH_TODO',
        text: 'item three',
      },
    ],
  },
  {
    text: 'Navigator Two',
    children: [
      {
        path: '/navigator_2/item_1',
        auth: 'WORKBENCH_TODO',
        text: 'item one',
      },
      {
        path: '/navigator_2/item_2',
        auth: 'WORKBENCH_TODO',
        text: 'item two',
      },
      {
        path: '/navigator_2/item_3',
        auth: 'WORKBENCH_TODO',
        text: 'item three',
      },
    ],
  },
  {
    text: 'Navigator Tree',
    path: '/navigator_3',
  },
  {
    text: 'Navigator Four',
    path: '/navigator_4',
  },
  {
    text: 'Navigator Five',
    path: '/navigator_5',
  },
])

const hiddenVal = ref<boolean>(false)
</script>

搜索侧边栏

通过设置 search 为 true 开启搜索侧边栏的功能

TIP

搜索是根据输入的 menu-list 中的 text 属性

vue
<template>
  <div style="height: 50vh; display: flex">
    <ap-side-nav
      :menu-list="menu"
      :active-key="activeKey"
      key-field="path"
      search
      @select="select"
    />
    <div>
      <div style="font-size: 24px; margin-left: 150px">Content</div>
      <div>current path: {{ activeKey }}</div>
      <div>current menu: {{ title }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SideNavNode } from 'apathia-ui'

const menu = ref<SideNavNode[]>([
  {
    text: 'Navigator One',
    children: [
      {
        path: '/navigator_1/item_1',
        auth: 'WORKBENCH_TODO',
        text: 'item one',
      },
      {
        path: '/navigator_1/item_2',
        auth: 'WORKBENCH_TODO',
        text: 'item two',
      },
      {
        path: '/navigator_1/item_3',
        auth: 'WORKBENCH_TODO',
        text: 'item three',
      },
    ],
  },
  {
    text: 'Navigator Two',
    children: [
      {
        path: '/navigator_2/item_1',
        auth: 'WORKBENCH_TODO',
        text: 'item one',
      },
      {
        path: '/navigator_2/item_2',
        auth: 'WORKBENCH_TODO',
        text: 'item two',
      },
      {
        path: '/navigator_2/item_3',
        auth: 'WORKBENCH_TODO',
        text: 'item three',
      },
    ],
  },
  {
    text: 'Navigator Tree',
    path: '/navigator_3',
  },
  {
    text: 'Navigator Four',
    path: '/navigator_4',
  },
  {
    text: 'Navigator Five',
    path: '/navigator_5',
  },
])

const activeKey = ref<string>('')
const title = ref<string>('')

const select = (node: SideNavNode) => {
  title.value = node.text!
  activeKey.value = node.path
}
</script>

自定义显示

使用插槽可以自定义侧边栏的显示内容和样式

vue
<template>
  <div class="menu-container">
    <ap-side-nav
      :menu-list="menu"
      :active-key="activeKey"
      key-field="path"
      @select="select"
    >
      <template #menuTop>
        <ap-button primary>This is menu Top</ap-button>
      </template>
      <template #default="{ expand, onClick, node }">
        <div class="menu-rowClass" @click="onClick">
          <span v-show="!hiddenVal">{{ node.text }}</span>
          <span v-show="node.children && !hiddenVal" class="menu-text">
            ({{ expand }})
          </span>
        </div>
      </template>

      <template #menuBottom>
        <div style="color: green">
          <ap-button pink>This is menu buttom</ap-button>
        </div>
      </template>
    </ap-side-nav>
    <div>
      <div class="menu-content">Content</div>
      <div>current path: {{ activeKey }}</div>
      <div>current menu: {{ title }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SideNavNode } from 'apathia-ui'

const menu = ref<SideNavNode[]>([
  {
    text: 'Navigator One',
    children: [
      {
        path: '/navigator_1/item_1',
        auth: 'WORKBENCH_TODO',
        text: 'item one',
      },
      {
        path: '/navigator_1/item_2',
        auth: 'WORKBENCH_TODO',
        text: 'item two',
      },
      {
        path: '/navigator_1/item_3',
        auth: 'WORKBENCH_TODO',
        text: 'item three',
      },
    ],
  },
  {
    text: 'Navigator Two',
    children: [
      {
        path: '/navigator_2/item_1',
        auth: 'WORKBENCH_TODO',
        text: 'item one',
      },
      {
        path: '/navigator_2/item_2',
        auth: 'WORKBENCH_TODO',
        text: 'item two',
      },
      {
        path: '/navigator_2/item_3',
        auth: 'WORKBENCH_TODO',
        text: 'item three',
      },
    ],
  },
  {
    text: 'Navigator Tree',
    path: '/navigator_3',
  },
  {
    text: 'Navigator Four',
    path: '/navigator_4',
  },
  {
    text: 'Navigator Five',
    path: '/navigator_5',
  },
])

const activeKey = ref<string>('')
const title = ref<string>('')
const hiddenVal = ref<boolean>(false)

const select = (node: SideNavNode) => {
  title.value = node.text!
  activeKey.value = node.path
}
</script>

<style scoped>
.menu-container {
  height: 50vh;
  display: flex;
}
.menu-rowClass {
  line-height: 18px;
  font-size: 18px;
  margin: 15px 0;
  color: skyblue;
}
.menu-text {
  color: rgb(235, 135, 220);
}
.menu-content {
  font-size: 24px;
  margin-left: 150px;
}
</style>

Props

prop	说明	类型	默认值
menuList	侧边栏配置对象	Array	[]
activeKey	选择菜单时的选中值	String	''
mini	是否隐藏侧边栏	Boolean	false
search	是否启用查询（前端输入查询功能）	Boolean	false
keyField	选中菜单对象中的字段	String	''

Events

事件名称	说明	回调参数
select	选中菜单时触发	Node

Slots

插槽名称	说明	参数
default	默认插槽，可以自定义显示的内容和样式	mini, activeParent, expand, activeItem, onClick, node
menuTop	侧边栏顶部	-
menuBottom	侧边栏底部	-

参数	说明	类型	默认值
mini	是否隐藏侧边栏	Boolean	false
activeParent	是否选中父级	Boolean	false
expand	是否展开	Boolean	false
activeItem	是否激活当前菜单	Boolean	false
onClick	切换展开状态	Function	-
node	当前选中结点信息	Node	-

Sidenav ​

基础用法 ​

隐藏侧边栏 ​

搜索侧边栏 ​

自定义显示 ​

Props ​

Events ​

Slots ​

Sidenav

基础用法

隐藏侧边栏

搜索侧边栏

自定义显示

Props

Events

Slots