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、效果