SideNavBar 侧边栏导航请使用手机扫码体验

侧边栏导航

基础用法

  1. html
    <nut-popup
  2.     position="right"
  3.     v-model="show1"
  4.     :style="{ width, height }"
  5. >
  6.     <nut-sidenavbar :show="show1">
  7.         <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
  8.             <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
  9.             <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
  10.         </nut-subsidenavbar>
  11.         <nut-subsidenavbar title="自然语言处理" ikey="12">
  12.             <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
  13.             <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
  14.         </nut-subsidenavbar>
  15.     </nut-sidenavbar>
  16. </nut-popup>

嵌套（建议最多三层）

  1. html
    <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. javascript
    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