标签：VUE title Menu fa circular menu Circular click icon

Circular-Menu在VUE中的使用步骤

• 1、参考地址：
• 2、安装：
• 3、导入
• 4、声明变量
• 5、初始化
• 6、显示
• 7、隐藏
• 8、效果

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。