SideNavBar 侧边栏导航

侧边栏导航

基础用法

  1. <nut-popup
  2. position="right"
  3. v-model="show1"
  4. :style="{ width, height }"
  5. >
  6. <nut-sidenavbar :show="show1">
  7. <nut-subsidenavbar title="智能城市AI" ikey="6">
  8. <nut-subsidenavbar title="人体识别1" ikey="9">
  9. <nut-sidenavbaritem ikey="10" title="人体检测1"></nut-sidenavbaritem>
  10. <nut-sidenavbaritem ikey="11" title="细粒度人像分割1"></nut-sidenavbaritem>
  11. </nut-subsidenavbar>
  12. <nut-subsidenavbar title="人体识别2" ikey="12">
  13. <nut-sidenavbaritem ikey="13" title="人体检测2"></nut-sidenavbaritem>
  14. <nut-sidenavbaritem ikey="14" title="细粒度人像分割2"></nut-sidenavbaritem>
  15. </nut-subsidenavbar>
  16. </nut-subsidenavbar>
  17. </nut-sidenavbar>
  18. </nut-popup>

嵌套(建议最多三层)

  1. <nut-popup
  2. position="right"
  3. v-model="show3"
  4. :style="{ width, height }"
  5. >
  6. <nut-sidenavbar :show="show3">
  7. <nut-sidenavbaritem ikey="1" title="人脸识别" @click="handleClick('人脸识别')"></nut-sidenavbaritem>
  8. <nut-sidenavbaritem ikey="2" title="云存自然语言处理"></nut-sidenavbaritem>
  9. <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
  10. <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
  11. <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
  12. </nut-subsidenavbar>
  13. <nut-subsidenavbar title="智能城市AI" ikey="6">
  14. <nut-sidenavbaritem ikey="7" title="企业风险预警模型"></nut-sidenavbaritem>
  15. <nut-sidenavbaritem ikey="8" title="水质量检测"></nut-sidenavbaritem>
  16. <nut-subsidenavbar title="人体识别" ikey="9">
  17. <nut-sidenavbaritem ikey="10" title="人体检测"></nut-sidenavbaritem>
  18. <nut-sidenavbaritem ikey="11" title="细粒度人像分割"></nut-sidenavbaritem>
  19. </nut-subsidenavbar>
  20. </nut-subsidenavbar>
  21. <nut-subsidenavbar title="自然语言处理" ikey="12">
  22. <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
  23. <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
  24. </nut-subsidenavbar>
  25. </nut-sidenavbar>
  26. </nut-popup>
  1. import { Popup } from '@nutui/nutui'
  2. export default {
  3. data() {
  4. return {
  5. show1: false,
  6. show3: false,
  7. width: '80%',
  8. height: '100%'
  9. };
  10. },
  11. components: {
  12. 'nut-popup': Popup
  13. },
  14. methods: {
  15. showNav() {
  16. this.show1 = true
  17. this.show3 = false
  18. },
  19. showNav3() {
  20. this.show1 = false
  21. this.show3 = true
  22. },
  23. handleClick(str) {
  24. alert(str)
  25. }
  26. }
  27. };

SideNavBar

字段说明类型默认值
offset导航缩进宽度Number/String15

SubSideNavBar

字段说明类型默认值
title导航标题String‘’
ikey导航唯一标识String/Number‘’
open导航是否默认展开Booleantrue

SubSideNavBar Event

字段说明回调参数
titleClick导航点击

SideNavBarItem

字段说明类型默认值
title导航标题String‘’
ikey导航唯一标识String/Number‘’

SideNavBarItem Event

字段说明回调参数
click导航点击

SideNavBar 侧边栏导航 - 图1