import{e as a,o as t,G as n}from"./vendor.js";const l={class:"markdown-body"},p=n(`

FixedNav \u60AC\u6D6E\u5BFC\u822A

\u4ECB\u7ECD

\u60AC\u6D6E\u6536\u9F50\u4F53\u9A8C\u4EA4\u4E92\uFF0C\u7528\u4E8E\u5FEB\u6377\u5BFC\u822A

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { FixedNav } from '@nutui/nutui';
// taro
import { FixedNav } from '@nutui/nutui-taro';

const app = createApp();
app.use(FixedNav);

\u57FA\u7840\u7528\u6CD5

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

 setup() {
    const visible = ref(false);
    const navList = reactive([
      {
        id: 1,
        text: '\u9996\u9875',
        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
      },
      {
        id: 2,
        text: '\u5206\u7C7B',
        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
      },
      {
        id: 3,
        text: '\u8D2D\u7269\u8F66',
        num: 2,
        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
      },
      {
        id: 4,
        text: '\u6211\u7684',
        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
      }
    ]);
    return {
      visible,
      navList
    };
 }

\u5DE6\u4FA7\u6548\u679C

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

\u53D6\u6D88\u80CC\u666F\u906E\u7F69

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

\u81EA\u5B9A\u4E49\u4F7F\u7528

<nut-fixednav :position="{top:'280px' }" type="left" v-model:visible="myActive">
    <template v-slot:list>
        <ul class="nut-fixednav__list">
            <li class="nut-fixednav__list-item">1</li>
            <li class="nut-fixednav__list-item">2</li>
            <li class="nut-fixednav__list-item">3</li>
            <li class="nut-fixednav__list-item">4</li>
            <li class="nut-fixednav__list-item">5</li>
        </ul>
    </template>
<template v-slot:btn>
    <nut-icon name="retweet" color="#fff">
    </nut-icon>
    <span class="text">{{ myActive ? '\u81EA\u5B9A\u4E49\u5F00' : '\u81EA\u5B9A\u4E49\u5173' }}</span>
</template>
</nut-fixednav>

 setup() {
    const myActive = ref(false);
    const navList = reactive([
      {
        id: 1,
        text: '\u9996\u9875',
        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
      },
      {
        id: 2,
        text: '\u5206\u7C7B',
        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
      },
      {
        id: 3,
        text: '\u8D2D\u7269\u8F66',
        num: 2,
        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
      },
      {
        id: 4,
        text: '\u6211\u7684',
        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
      }
    ]);
    return {
      myActive,
      navList
    };
 }

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
visible	\u662F\u5426\u6253\u5F00	Boolean	false
nav-list	\u60AC\u6D6E\u5217\u8868\u5185\u5BB9\u6570\u636E	Array	[]
active-text	\u6536\u8D77\u5217\u8868\u6309\u94AE\u6587\u6848	String	\u6536\u8D77\u5BFC\u822A
un-active-text	\u5C55\u5F00\u5217\u8868\u6309\u94AE\u6587\u6848	String	\u5FEB\u901F\u5BFC\u822A
type	\u5BFC\u822A\u65B9\u5411,\u53EF\u9009\u503C left right	String	right
overlay	\u5C55\u5F00\u65F6\u662F\u5426\u663E\u793A\u906E\u7F69	Boolean	true
position	fixed \u5782\u76F4\u4F4D\u7F6E	Object	{top: \u2018auto\u2019,bottom: \u2018auto\u2019}

Event

\u5B57\u6BB5	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
selected	\u9009\u62E9\u4E4B\u540E\u89E6\u53D1	{item:item,$event:Event}

Slot

\u540D\u79F0	\u8BF4\u660E
btn	\u81EA\u5B9A\u4E49\u6309\u94AE
list	\u81EA\u5B9A\u4E49\u5C55\u5F00\u5217\u8868\u5185\u5BB9

`,21),e=[p],o={setup(c,{expose:s}){return s({frontmatter:{}}),(i,r)=>(t(),a("div",l,e))}};export{o as default};