| 1 |
- 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('<h1>FixedNav 悬浮导航</h1><h3>介绍</h3><p>悬浮收齐体验交互，用于快捷导航</p><h3>安装</h3><pre><code class="language-javascript">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</code></pre><h3>基础用法</h3><pre><code class="language-html"><nut-fixednav :position="{top:'70px' }" v-model:visible="visible" :nav-list="navList" />\n</code></pre><pre><code class="language-javascript"> 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</code></pre><h3>左侧效果</h3><pre><code class="language-html"><nut-fixednav type="left" :position="{top:'140px' }" v-model:visible="visible" :nav-list="navList" />\n</code></pre><h3>取消背景遮罩</h3><pre><code class="language-html"><nut-fixednav :overlay="false" :position="{top:'210px' }" v-model:visible="visible" :nav-list="navList" />\n</code></pre><h3>自定义使用</h3>',13),d={class:"language-html"},o=l('<pre><code class="language-javascript"> 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</code></pre><h3>Prop</h3><table><thead><tr><th style="text-align:left;">字段</th><th style="text-align:left;">说明</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th></tr></thead><tbody><tr><td style="text-align:left;">visible</td><td style="text-align:left;">是否打开</td><td style="text-align:left;">Boolean</td><td style="text-align:left;">false</td></tr><tr><td style="text-align:left;">nav-list</td><td style="text-align:left;">悬浮列表内容数据</td><td style="text-align:left;">Array</td><td style="text-align:left;">[]</td></tr><tr><td style="text-align:left;">active-text</td><td style="text-align:left;">收起列表按钮文案</td><td style="text-align:left;">String</td><td style="text-align:left;">收起导航</td></tr><tr><td style="text-align:left;">un-active-text</td><td style="text-align:left;">展开列表按钮文案</td><td style="text-align:left;">String</td><td style="text-align:left;">快速导航</td></tr><tr><td style="text-align:left;">type</td><td style="text-align:left;">导航方向,可选值 left right</td><td style="text-align:left;">String</td><td style="text-align:left;">right</td></tr><tr><td style="text-align:left;">overlay</td><td style="text-align:left;">展开时是否显示遮罩</td><td style="text-align:left;">Boolean</td><td style="text-align:left;">true</td></tr><tr><td style="text-align:left;">position</td><td style="text-align:left;">fixed 垂直位置</td><td style="text-align:left;">Object</td><td style="text-align:left;">{top: ‘auto’,bottom: ‘auto’}</td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>字段</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>selected</td><td>选择之后触发</td><td>{item:item,$event:Event}</td></tr></tbody></table><h3>Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>btn</td><td>自定义按钮</td></tr><tr><td>list</td><td>自定义展开列表内容</td></tr></tbody></table>',7),f={setup:l=>(l,f)=>(i(),t("div",a,[s,e("pre",null,[e("code",d,'<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">'+n(l.myActive?"自定义开":"自定义关")+"</span>\n</template>\n</nut-fixednav>\n",1)]),o]))};export{f as default};
|
