引入组件
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) 点击的对象及其下标