FixedNav 悬浮导航

可拖拽的悬浮导航

基本用法

按需引用组件

  1. import {FixedNav, Drag, Popup } from '@nutui/nutui';
  2. FixedNav.install(Vue);
  3. Drag.install(Vue);
  4. Popup.install(Vue);
  1. <!-- 基本用法 -->
  2. <nut-drag direction="y" :style="{right:'0px',top:'50px'}">
  3.     <nut-fixednav active-text="右侧收起" un-active-text="右侧展开" :nav-list="navList" @selected="selected">
  4.     </nut-fixednav>
  5. </nut-drag>
  6. <nut-drag direction="y" :style="{left:'0px',top:'100px'}">
  7.     <nut-fixednav active-text="左侧收起" un-active-text="左侧展开" type="left" :nav-list="navList" @selected="selected">
  8.     </nut-fixednav>
  9. </nut-drag>
  10. <nut-drag direction="y" :style="{right:'0px',top:'150px'}">
  11.     <nut-fixednav :nav-list="navList" @selected="selected">
  12.     </nut-fixednav>
  13. </nut-drag>
  14. <nut-drag direction="y" :style="{left:'0px',top:'200px'}">
  15.     <nut-fixednav :nav-list="navList" type="left" @selected="selected">
  16.     </nut-fixednav>
  17. </nut-drag>
  18. <nut-drag direction="y" :style="{right:'0px',top:'250px'}">
  19.     <nut-fixednav :nav-list="navList" @selected="selected">
  20.     </nut-fixednav>
  21. </nut-drag>
  22. <nut-drag direction="y" :style="{left:'0px',top:'300px'}">
  23.     <nut-fixednav :nav-list="navList" type="left" @selected="selected">
  24.     </nut-fixednav>
  25. </nut-drag>
  26. <!-- 自定义用法 -->
  27. <nut-drag direction="y" :style="{left:'0px',top:'300px'}">
  28.     <nut-fixednav :active.sync="myActive" type="left" @selected="selected">
  29.     <ul slot="list" class="fixed-list">
  30.         <li>1</li>
  31.         <li>2</li>
  32.         <li>3</li>
  33.         <li>4</li>
  34.         <li>5</li>
  35.     </ul>
  36.     <template slot="btn" @click="myActive=!myActive">
  37.         <img style="width:20px;height:20px"
  38.         src="https://img10.360buyimg.com/imagetools/jfs/t1/143466/8/1743/6993/5ef9fb50E10f30d87/993e4e681fc50cac.png" />
  39.         <span>{{myActive?'自定义开':'自定义关'}}</span>
  40.     </template>
  41.     </nut-fixednav>
  42. </nut-drag>
  44. <!-- 无拖拽效果 -->
  45. <nut-fixednav active-text="收起" un-active-text="无法拖拽" :style="{position:'fixed',bottom:'10px',right:'0px'}"
  46.     :nav-list="navList" @selected="selected">
  47. </nut-fixednav>
  1. export default {
  2.   data() {
  3.     return {
  4.       myActive: false,
  5.       navList: [
  6.         {
  7.           id: 1,
  8.           text: '首页',
  9.           icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
  10.         },
  11.         {
  12.           id: 2,
  13.           text: '分类',
  14.           icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
  15.         },
  16.         {
  17.           id: 3,
  18.           text: '购物车',
  19.           num: 2,
  20.           icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
  21.         },
  22.         {
  23.           id: 4,
  24.           text: '我的',
  25.           icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
  26.         }
  27.       ]
  28.     };
  29.   },
  30.   methods: {
  31.     selected($event) {
  32.       console.log($event);
  33.     }
  34.   }
  35. };

Prop

字段说明类型默认值
active.sync是否打开Booleanfalse
navList悬浮列表内容数据Array[]
active-text收起列表按钮文案String‘收起导航’
un-active-text展开列表按钮文案String‘快速导航’
type导航方向,可选值 left rightString‘right’

Slot

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

Event

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

FixedNav 悬浮导航 - 图1