Skip to content

Latest commit

 

History

History
179 lines (137 loc) · 6.6 KB

README-ZH.MD

File metadata and controls

179 lines (137 loc) · 6.6 KB

VueCircleMenu

demo

为了更好的演示请使用手机扫描下面的二维码查看demo,或点击这里:http://web-oysun.cn/VueCircleMenu/

API

Props

参数 类型 说明
type String 必填项,指明菜单的类型,有6种:top,bottom,left,right,middle,middle-around
number(v1.1.0) Number 必填项,v1.1.0版本新增的api。指定子菜单的个数,数值要大于2小于5,其实就只有2,3,4这三种情况
circle boolean 菜单按钮是否为圆角,默认为方形按钮
mask String 遮罩层,有两种:"white"和"black"
animate String 子菜单动画,可以引入外部css动画库,比如Animate.css
btn boolean 开关按钮,填这属性,则有默认开关按钮,不填则没有默认,需要在slot中自行定义开关按钮
colors Array 按钮和菜单的背景颜色

Slot

SlotName 说明
item_btn 自定义开关按钮
item_1 第一个菜单的内容
item_2 第二个菜单的内容
item_3 第三个菜单的内容
item_4 第四个菜单的内容

详细说明

Props

type

type参数是必填项,指明菜单的类型,一共有一下六种:top,bottom,left,right,middle,middle-around

number

number是v1.1.0版本的api之前版本没有此项参数,固定四个子菜单。注意:

  • number的数值为3,既有3个子菜单的时候,typemiddlemiddle-around类型无效
  • number 参数填入的是数值,但是在vue属性中,填写"4"数值其实以字符串的形式,所以如果想传递一个实际的 JavaScript 数字,需要使用 v-bind ,从而让它的值被当作 JavaScript 表达式计算。详情看vue文档

circle

circle是让菜单按钮为圆角,默认是方形按钮:

mask

mask是开关按钮在切换的时候产生的遮罩,分为两种:"white"和"black".(注意:不填或填错类型都视为不需要遮罩)

animate

animate是给菜单添加动画,只要添加动画css类即可,可以引入第三方css动画库,比如animate.css

colors

colors是指定按钮和菜单的背景颜色,不使用该属性,则会使用默认的颜色配置,该组件默认颜色配置为:

如果要配置颜色,colors传入数组,另外,很重要的一点,数组的值必须是颜色代码,而不是css类.例如:

  <circle-menu type='bottom' :number='4' colors="[ '#563761', 'rgb(255, 255, 102)', '#FFE26F', '#F3825F', '#F19584']">
    <button type="button" slot="item_btn"></button>
    <a slot="item_1" class="fa fa-twitter fa-lg" herf="#" ></a>
    <a slot="item_2" class="fa fa-weixin fa-lg" herf="#" ></a>
    <a slot="item_3" class="fa fa-weibo fa-lg" herf="#" ></a>
    <a slot="item_4" class="fa fa-github fa-lg" herf="#" ></a>
  </circle-menu>

注意颜色代码必须一一对应,第一个颜色代码指代按钮,第二个颜色为第一个菜单,依次类推,共五个颜色代码,填多,填少或者填入的不是颜色代码都是无效的

Slot

item_btn

该命名slot是指自定义开关按钮,当你需要自定义开关按钮,请不要填写btn属性,使用该slot,这样就可以禁用默认的开关按钮,使用自定义的按钮。(自定义开关按钮有个好处,就是可以给开关按钮绑定事件,做进一步的操作)

item_1,item_2,item_3,item_4

该类slot分别指代四个菜单按钮

思想:

这五个slot,其实就说明该组件其实就一个包裹内容的控件, 里面的内容都在slot设置

  • 通过slot,可以填写任何内容,并且自定义样式
  <circle-menu type="top">
    <button type="button" slot="item_btn"></button>
    <router-link :to="..." slot="item_1">
    <span slot="item_2"></a>
    <div slot="item_3"></a>
    <img  slot="item_4" src="img" />
  </circle-menu>
  • 通过slot,给菜单绑定事件
  <circle-menu type="middle-around" :number='4'>
    <button type="button" slot="item_btn" @click="dosomething" ></button>
    <a slot="item_1" herf="#" @click=""></a>
    <v-touch tag="a" v-on:tap="onTap" slot="item_2"></v-touch>
    <v-touch tag="a" v-on:tap="onTap" slot="item_3"></v-touch>
    <a slot="item_4" herf="#" v-on:handler="handler"></a>
  </circle-menu>

简单的例子

<!--"middle"类型, 四个子菜单,动画引入animate.css库,白色遮罩,圆形自定义开关按钮,默认菜单颜色配置-->
  <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>
<!--"top"类型,三个子菜单,默认动画,灰色遮罩,方形默认开关按钮,自定义菜单颜色配置-->
  <circle-menu type="top" :number='3' mask='black' btn colors="[ 'rgb(255, 255, 102)', '#A7425C', '#FFE26F', 'F3825F', '#F19584']">
    <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>
  </circle-menu>

安装和使用

npm install vue-circle-menu
  • 若作为全局组件使用
//在项目入口文件
import Vue from 'vue'
import CircleMenu from 'vue-circle-menu'
Vue.component('CircleMenu', CircleMenu)
  • 若作为局部组件
//在某个组件中
import CircleMenu from 'vue-circle-menu'
export default {
  components: {
    CircleMenu
  }
}

bug和建议

如果在使用中遇到问题或者建议,欢迎提issues

LICENSE

MIT