import{e as t,g as e,t as n,G as l,o as i}from"./vendor.6333306b.js";const a={class:"markdown-body"},s=l('

FixedNav 悬浮导航

介绍

悬浮收齐体验交互，用于快捷导航

安装

import { createApp } from 'vue';\n// vue\nimport { FixedNav,OverLay } from '@nutui/nutui';\n// taro\nimport { FixedNav,OverLay } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(FixedNav).use(OverLay);\n\n

基础用法

<nut-fixednav :position="{top:'70px' }" v-model:visible="visible" :nav-list="navList" />\n

 setup() {\n    const visible = ref(false);\n    const navList = reactive([\n      {\n        id: 1,\n        text: '首页',\n        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'\n      },\n      {\n        id: 2,\n        text: '分类',\n        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'\n      },\n      {\n        id: 3,\n        text: '购物车',\n        num: 2,\n        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'\n      },\n      {\n        id: 4,\n        text: '我的',\n        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'\n      }\n    ]);\n    return {\n      visible,\n      navList\n    };\n }\n

左侧效果

<nut-fixednav type="left" :position="{top:'140px' }" v-model:visible="visible" :nav-list="navList" />\n

取消背景遮罩

<nut-fixednav :overlay="false"  :position="{top:'210px' }" v-model:visible="visible" :nav-list="navList" />\n

自定义使用

',13),d={class:"language-html"},o=l('

 setup() {\n    const myActive = ref(false);\n    const navList = reactive([\n      {\n        id: 1,\n        text: '首页',\n        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'\n      },\n      {\n        id: 2,\n        text: '分类',\n        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'\n      },\n      {\n        id: 3,\n        text: '购物车',\n        num: 2,\n        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'\n      },\n      {\n        id: 4,\n        text: '我的',\n        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'\n      }\n    ]);\n    return {\n      myActive,\n      navList\n    };\n }\n

Prop

字段	说明	类型	默认值
visible	是否打开	Boolean	false
nav-list	悬浮列表内容数据	Array	[]
active-text	收起列表按钮文案	String	收起导航
un-active-text	展开列表按钮文案	String	快速导航
type	导航方向,可选值 left right	String	right
overlay	展开时是否显示遮罩	Boolean	true
position	fixed 垂直位置	Object	{top: ‘auto’,bottom: ‘auto’}

Event

字段	说明	回调参数
selected	选择之后触发	{item:item,$event:Event}

Slot

名称	说明
btn	自定义按钮
list	自定义展开列表内容

',7),f={setup:l=>(l,f)=>(i(),t("div",a,[s,e("pre",null,[e("code",d,'\n \n\n\n",1)]),o]))};export{f as default};