102 lines
1.9 KiB
Vue
102 lines
1.9 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 []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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) {
|
||
|
|
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>
|