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

FixedNav 悬浮导航

介绍

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

安装

import { createApp } from 'vue';\n// vue\nimport { FixedNav } from '@nutui/nutui';\n// taro\nimport { FixedNav } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(FixedNav);\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

自定义使用

<nut-fixednav :position="{top:'280px' }" type="left" v-model:visible="myActive">\n    <template v-slot:list>\n        <ul class="nut-fixednav__list">\n            <li class="nut-fixednav__list-item">1</li>\n            <li class="nut-fixednav__list-item">2</li>\n            <li class="nut-fixednav__list-item">3</li>\n            <li class="nut-fixednav__list-item">4</li>\n            <li class="nut-fixednav__list-item">5</li>\n        </ul>\n    </template>\n<template v-slot:btn>\n    <nut-icon name="retweet" color="#fff">\n    </nut-icon>\n    <span class="text">{{ myActive ? '自定义开' : '自定义关' }}</span>\n</template>\n</nut-fixednav>\n
 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是否打开Booleanfalse
nav-list悬浮列表内容数据Array[]
active-text收起列表按钮文案String收起导航
un-active-text展开列表按钮文案String快速导航
type导航方向,可选值 left rightStringright
overlay展开时是否显示遮罩Booleantrue
positionfixed 垂直位置Object{top: ‘auto’,bottom: ‘auto’}

Event

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

Slot

名称说明
btn自定义按钮
list自定义展开列表内容
',21)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};