1.0.1 • Published 3 years ago
jiuwei-selectview v1.0.1
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