DelkTsai / toggle-menu

支持4个方位的按钮弹出菜单

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

引入组件

import toggleMenu from './toggleMenu'

在 components声明

components: {
     toggleMenu
},

template中使用

menuItems: [
       {name: 'menu1', src: require('../assets/emoji.png')},
       {name: 'menu2', src: require('../assets/cart.png')},
       {name: 'menu3', src: require('../assets/folder.png')},
       {name: 'menu4', src: require('../assets/home.png')},
       {name: 'menu5', src: require('../assets/my.png')},
]
<toggle-menu :menuItems="menuItems"
             @clickMenu="clickMenu"
             ></toggle-menu>

属性一栏

属性名 用处 默认值 是否必须
position 四个方位(LT、LB、RT、RB) LT
menuBg 菜单背景 white
menuSrc 菜单图片 一个菜单图片
itemBg 按钮背景 white
width 按钮宽度 50px
baseDistance 位移距离,若item很多,可适当提高 150px
menuItems 菜单数组

方法

clickMenu 参数(item,index) 点击的对象及其下标

About

支持4个方位的按钮弹出菜单


Languages

Language:JavaScript 73.6%Language:Vue 25.3%Language:HTML 1.1%