jiuwei-selectview

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

This is a selection component, can achieve single or multiple choice, easy to use, can be applied in a variety of scenarios

Example diagram

示例截图↓

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)
   }
 }
}

如有问题，请到简书给我留言，我会尽力完善~(≧▽≦)/~ https://www.jianshu.com/p/bec042f8ae34