ホーム エクスプローラ ヘルプ
サインイン
githab
/
nutui
3
0
Fork 0
ファイル
ツリー: 8ff89d833b
ブランチ タグ
nutui
/
3.1.6
/
doc.96cd8a4e.js

doc.96cd8a4e.js 12 KB
履歴 Raw

1 
  1. import{e as s,o as a,G as t}from"./vendor.9cc7b6f2.js";const n={class:"markdown-body"},l=[t('<h1>FixedNav 悬浮导航</h1><h3>介绍</h3><p>悬浮收齐体验交互，用于快捷导航</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-comment">// vue</span>\n<span class="hljs-keyword">import</span> { FixedNav } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n<span class="hljs-comment">// taro</span>\n<span class="hljs-keyword">import</span> { FixedNav } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(FixedNav);\n\n</code></pre><h3>基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-fixednav</span> <span class="hljs-attr">:position</span>=<span class="hljs-string">&quot;{top:&#39;70px&#39; }&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;visible&quot;</span> <span class="hljs-attr">:nav-list</span>=<span class="hljs-string">&quot;navList&quot;</span> /&gt;</span>\n</code></pre><pre><code class="language-javascript"> <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> visible = ref(<span class="hljs-literal">false</span>);\n    <span class="hljs-keyword">const</span> navList = reactive([\n      {\n        <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;首页&#39;</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png&#39;</span>\n      },\n      {\n        <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;分类&#39;</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png&#39;</span>\n      },\n      {\n        <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;购物车&#39;</span>,\n        <span class="hljs-attr">num</span>: <span class="hljs-number">2</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png&#39;</span>\n      },\n      {\n        <span class="hljs-attr">id</span>: <span class="hljs-number">4</span>,\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;我的&#39;</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png&#39;</span>\n      }\n    ]);\n    <span class="hljs-keyword">return</span> {\n      visible,\n      navList\n    };\n }\n</code></pre><h3>左侧效果</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-fixednav</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;left&quot;</span> <span class="hljs-attr">:position</span>=<span class="hljs-string">&quot;{top:&#39;140px&#39; }&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;visible&quot;</span> <span class="hljs-attr">:nav-list</span>=<span class="hljs-string">&quot;navList&quot;</span> /&gt;</span>\n</code></pre><h3>取消背景遮罩</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-fixednav</span> <span class="hljs-attr">:overlay</span>=<span class="hljs-string">&quot;false&quot;</span>  <span class="hljs-attr">:position</span>=<span class="hljs-string">&quot;{top:&#39;210px&#39; }&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;visible&quot;</span> <span class="hljs-attr">:nav-list</span>=<span class="hljs-string">&quot;navList&quot;</span> /&gt;</span>\n</code></pre><h3>自定义使用</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-fixednav</span> <span class="hljs-attr">:position</span>=<span class="hljs-string">&quot;{top:&#39;280px&#39; }&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;left&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;myActive&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:list</span>&gt;</span>\n        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;nut-fixednav__list&quot;</span>&gt;</span>\n            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;nut-fixednav__list-item&quot;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>\n            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;nut-fixednav__list-item&quot;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>\n            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;nut-fixednav__list-item&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>\n            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;nut-fixednav__list-item&quot;</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>\n            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;nut-fixednav__list-item&quot;</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>\n        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:btn</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;retweet&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#fff&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;text&quot;</span>&gt;</span>{{ myActive ? &#39;自定义开&#39; : &#39;自定义关&#39; }}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-fixednav</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"> <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> myActive = ref(<span class="hljs-literal">false</span>);\n    <span class="hljs-keyword">const</span> navList = reactive([\n      {\n        <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;首页&#39;</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png&#39;</span>\n      },\n      {\n        <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;分类&#39;</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png&#39;</span>\n      },\n      {\n        <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;购物车&#39;</span>,\n        <span class="hljs-attr">num</span>: <span class="hljs-number">2</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png&#39;</span>\n      },\n      {\n        <span class="hljs-attr">id</span>: <span class="hljs-number">4</span>,\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;我的&#39;</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png&#39;</span>\n      }\n    ]);\n    <span class="hljs-keyword">return</span> {\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>',21)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};
    2.