插件名称 | VueCircleMenu |
---|---|
发布时间 | 2020年5月4日 |
插件作者 | OYsun |
一个vue组件,可在应用程序上创建动画的圆形或线性弹出菜单。
npm install vue-circle-menu
1.导入VueCircleMenu。
import CircleMenu from 'vue-circle-menu';
2.注册组件。
Vue.component('CircleMenu', CircleMenu)
// 或
export default {
components: {
CircleMenu
}
}
3.将圆形菜单组件添加到应用程序模板。在此示例中,我们将Font Awesome用于图标,将Animate.css用于CSS3动画。
<circle-menu type="middle" :number="4" animate="animated jello" mask='white' circle>
<button type="button" slot="item_btn"></button>
<a slot="item_1" class="fa fa-twitter fa-lg"></a>
<a slot="item_2" class="fa fa-weixin fa-lg"></a>
<a slot="item_3" class="fa fa-weibo fa-lg"></a>
<a slot="item_4" class="fa fa-github fa-lg"></a>
</circle-menu>
4.所有可用的props。
// 必填项,指明菜单的类型,有6种:top,bottom,left,right,middle,middle-around
type: {
type: String,
required: true
},
// 必填项,v1.1.0版本新增的api。指定子菜单的个数,数值要大于2小于5,其实就只有2,3,4这三种情况
number: {
type: Number,
required: true,
validator: function (value) {
return value > 1 && value < 5
}
},
// 子菜单动画,可以引入外部css动画库,比如Animate.css
animate: String,
// "white" or "black"
mask: String,
// 菜单按钮是否为圆角,默认为方形按钮
circle: Boolean,
// display toggle button
btn: Boolean,
// background color
colors: Array