插件名称 | vue-quick-menu |
---|---|
发布时间 | 2020年5月6日 |
插件作者 | AshleyLv |
vue-quick-menu是用于Vue.js的易于使用且跨平台的径向hamburger导航组件。
# NPM
$ npm install vue-quick-menu --save
1.安装并导入组件。
import Vue from 'vue'
import quickMenu from 'vue-quick-menu'
2.注册组件。
export default {
components: {
quickMenu
},
}
3.将径向导航组件添加到模板。
<quick-menu :menu-count=getCount :icon-class=icons :menu-url-list=list :background-color=backgroundColor :color=color :position=position :is-open-new-tab=getIsOpenNewTab @process=print></quick-menu>
export default {
name: 'demo',
data () {
return {
count:4,
icons:["fa fa-github","fa fa-comment","fa fa-code","fa fa-envelope"],
list:[{'isLink':false},{'isLink':true,url:"/doo"},{'isLink':true,url:"/foo"},{'isLink':false}],
backgroundColor:'#17c4c5',
color:'#ffffff',
position:'top-left',
isOpenNewTab:false
}
},
components:{
'quickMenu':quickMenu
}}
名称 | 需要 | 默认 | 类型 | 描述 |
---|---|---|---|---|
menuCount | true | 4 | Number | 菜单项目数 |
menuUrlList | true | – | Array | 每个菜单项的链接数组 |
iconClass | true | – | Array | 每个菜单项的图标类的数组 |
position | false | top-left | top-left,top-right,bottom-left,bottom-right | 快速菜单的位置 |
backgroundColor | false | #009dc7 | String | 快速菜单的背景色 |
color | false | #ffffff | String | 快速菜单图标的颜色 |
isOpenNewTab | false | false | Boolean | 单击后菜单是否将打开一个新选项卡 |