Circular-Menu在VUE中的使用步骤
1、参考地址:
https://github.com/alzatin/circular-menu
2、安装:
npm install circular-menu
3、导入
import 'circular-menu/dist/css/circular-menu.css'
import CMenu from 'circular-menu/dist/js/circular-menu'
4、声明变量
menu:null
5、初始化
<div id="menu1" class="menu1" >
</div>
this.menu = CMenu("#menu1")
.config({
menus: [{
title: "GitHub",
icon: "fa fa-github",
href: {
url: "http://github.com",
blank: true
}
}, {
title: "GitLab",
icon: ["fa fa-gitlab", '#4078c0'],
}, {
title: "subMenu",
icon: "my-icon icon1",
menus: [{
title: 'subMenu1',
icon: 'fa fa-firefox'
}, {
title: 'subMenu2',
icon: 'fa fa-file'
}]
}, {
title: "subMenu",
icon: "my-icon icon2"
}, {
title: "click",
icon: "my-icon icon3"
}, {
title: "hash-href",
href: "#someHash"
}, {
title: "clickMe!",
click: function() {
alert('click event callback');
}
}, {
disabled: true,
title: "disabled"
}]
});
.menu1 {
left: 50%;
top: 50%;
}
6、显示
this.menu.show(); // this.menu.show([200,200]); 定位
7、隐藏
this.menu.hide();
8、效果