其他分享
首页 > 其他分享> > Circular-Menu在VUE中的使用步骤

Circular-Menu在VUE中的使用步骤

作者:互联网

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

在这里插入图片描述

标签:VUE,title,Menu,fa,circular,menu,Circular,click,icon
来源: https://blog.csdn.net/qq_24227717/article/details/120653270