vue按钮选择器组件

这是一款按钮形状的选择器，可以实现单选或者多选，使用方便，可以应用在多种场景

示例截图↓

单选
多选.png

Install

# 使用yarn安装
yarn add jiuwei-selectview

# 使用npm安装 
npm install jiuwei-selectview --save 

Attributes

参数	说明	类型	默认值
selectList	显示的数据	array	—
isSelectIndex	是否默认选择第一项	boolean	true
selectArr	默认选择哪些项,选择项的key值数组	array	—
cancelItem	是否点击取消选中	boolean	false
isMultiple	是否多选	boolean	false
squareShape	是否为方形按钮	boolean	false
activeColor	选中的背景色/边框色	string	rgba(255, 155, 44, 0.199)
textColor	选中的字体颜色	string	#ff9b2c
isHollow	是否为空心	boolean	false
labelSize	标题字体大小	string	12px
textSize	选项字体大小	string	12px
hasTitle	是否有标题	boolean	true
hasBorder	是否有分割线	boolean	true
itemPadding	选项的内边距	string	3px 10px

Steps Events

事件名	说明	回调函数
selectChange	点击选项时触发	item

Usage

main.js

 import selectview from 'jiuwei-selectview'
 Vue.use(selectview)

Example：

  <selectview  @selectChange="selectItem"   :selectList="selectList"></selectview>

export default {
 name: 'HelloWorld',
 data () {
   return {
        selectList: [
        {
          label: '性别',
          childs: [
            {
              key:1,
              value:'男'
            },
            {
              key:2,
              value:'女'
            }
          ]
        },
        {
          label: '缴费方式',
          childs: [
            {
              key:115,
              value:'月交'
            },
            {
              key:116,
              value:'年交'
            }
          ]
        },
        {
          label: '基本保额',
          childs: [
            {
              key:10,
              value:'10万'
            },
            {
              key:15,
              value:'15万'
            },
            {
              key:20,
              value:'20万'
            },
             {
              key:25,
              value:'25万'
            },
             {
              key:30,
              value:'30万'
            },
             {
              key:35,
              value:'35万'
            }
          ]
        }
      ]
   }
 },
 methods:{
   selectItem(row){
     console.log("打印选择项----",row)
   }
 }
}

组件的npm地址：https://www.npmjs.com/package/jiuwei-selectview