v_circlemenu

vue圆形菜单

Usage no npm install needed!

<script type="module">
  import vCirclemenu from 'https://cdn.skypack.dev/v_circlemenu';
</script>

README

v-circlemenu

vue圆形菜单

git地址：https://github.com/jiangchunhua/v-circlemenu

avatar

使用方法

npm install v_circlemenu --save-dev

在mainjs里

import circleMenuPlugin from 'v_circlemenu';

Vue.use(circleMenuPlugin)

具体使用

this.$circleMenu.show({
    angle: [270, 360],
    direction: {
        left: '10px',
        bottom: '10px',
    },
    showShadow: true,
    menuTitle: "+",
    mainMenuStyle: {
        background: '#ccf',
        color: "#fff"
    },
    menu: [
        {
            name: "子一",
            bg: "#c179f5"
        },
        {
            name: "子二",
            bg: "#63b5f1"
        }
    ],
    callback(ev){
        console.log(ev);
    }
});

配置选项说明

angle

子菜单打开的角度，数组，接受两个值，起始角度和终止角度。配合direction使用，[0, 90]为第四象限以此类推。以打开角90°为例，左上角[0, 90], 右上角为[90, 180], 左下角为[270, 360],右下角为[180, 270];

direction

位置，配合angle使用，与css里的定位一样，传入left,right,top,bottom,来决定菜单在页面中的位置。

showShadow

是否显示遮罩层

menuTitle

主菜单显示的文案

mainMenuStyle

主菜单的css样式，可以自己定义background，color等等

menu

配置子菜单 数组，name为子菜单显示的文案，bg为子菜单的背景颜色

callback

点击子菜单执行的回调函数，通过ev可以拿到子菜单里的参数，根据不同的参数可以做不同的操作

重要说明
如果发现什么bug请自行解决。

没什么事情就不要联系我了，如果有什么事情就更不要联系我了。