110 lines
2.1 KiB
Vue
110 lines
2.1 KiB
Vue
<template>
|
|
<view v-for="(item, index) in list" :style="itemStyle"
|
|
@click="handleCheckBoxClick(item, index)"
|
|
>
|
|
<slot :item="item" :index="index" :checked="checkedVal.indexOf(item.val)>-1" :handleCheckFun="()=> { handleCheckBoxClick(item, index) }"
|
|
></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const typeEnum = {
|
|
single: 'single',
|
|
multiple: 'multiple'
|
|
}
|
|
|
|
export default {
|
|
computed: {
|
|
checkedVal() {
|
|
let val = this.value
|
|
let res = []
|
|
if (typeof val == "object") {
|
|
res = val
|
|
}
|
|
if (typeof val == 'string' && val !== '') {
|
|
res = val.split(",")
|
|
}
|
|
if (typeof val == 'number') {
|
|
res = [val]
|
|
}
|
|
return res
|
|
},
|
|
},
|
|
props: {
|
|
list: {
|
|
default () {
|
|
return []
|
|
}
|
|
},
|
|
value: {
|
|
default () {
|
|
return []
|
|
}
|
|
},
|
|
minChecked: {
|
|
default () {
|
|
return 0
|
|
}
|
|
},
|
|
type: {
|
|
default () {
|
|
return typeEnum.multiple // typeEnum | ''; 为空代表不做切换选中功能
|
|
}
|
|
},
|
|
itemStyle: {
|
|
default () {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
destroyed() {},
|
|
|
|
methods: {
|
|
handleCheckBoxClick(curItem, index) {
|
|
let checkedVal = [].concat(this.checkedVal)
|
|
if (this.type) {
|
|
const curVal = curItem.val
|
|
const hasChked = checkedVal.indexOf(curVal) > -1
|
|
if (hasChked) {
|
|
// 取消选中前，校验最小选中个数
|
|
if(checkedVal.length > this.minChecked) {
|
|
checkedVal = checkedVal.filter(val => val != curVal)
|
|
}
|
|
} else {
|
|
if (this.type == typeEnum.multiple) {
|
|
checkedVal.push(curVal)
|
|
} else {
|
|
checkedVal = [curVal]
|
|
}
|
|
}
|
|
this.changeTabCheck(checkedVal)
|
|
}
|
|
this.$emit('onItemClick', { curItem, index, checked: checkedVal.indexOf(curItem.val)>-1 })
|
|
},
|
|
changeTabCheck(checkedVal) {
|
|
let oldVal = checkedVal
|
|
let val = oldVal
|
|
if (this.type == typeEnum.single) {
|
|
val = checkedVal[0]
|
|
}
|
|
this.$emit('onChange', val)
|
|
this.$emit('update:value', val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style> |