ant-design-vue/components/checkbox/Group.vue
tangjinzhou 1b8ecf5656 fix
2018-01-16 15:41:00 +08:00

117 lines
2.6 KiB
Vue

<script>
import Checkbox from './Checkbox.vue'
import hasProp from '../_util/props-util'
export default {
name: 'CheckboxGroup',
props: {
prefixCls: {
default: 'ant-checkbox-group',
type: String,
},
defaultValue: {
default: () => [],
type: Array,
},
value: {
default: undefined,
type: Array,
},
options: {
default: () => [],
type: Array,
},
disabled: Boolean,
},
model: {
prop: 'value',
},
provide () {
return {
checkboxGroupContext: this,
}
},
data () {
const { value, defaultValue } = this
return {
sValue: value || defaultValue,
}
},
methods: {
handleChange (event) {
const target = event.target
const { value: targetValue, checked } = target
const { sValue } = this
let newVal = []
if (checked) {
newVal = [...sValue, targetValue]
} else {
newVal = [...sValue]
const index = newVal.indexOf(targetValue)
index >= 0 && newVal.splice(index, 1)
}
newVal = [...new Set(newVal)]
if (!hasProp(this, 'value')) {
this.sValue = newVal
}
this.$emit('input', newVal)
this.$emit('change', newVal)
},
getOptions () {
const { options } = this.$props
return options.map(option => {
if (typeof option === 'string') {
return {
label: option,
value: option,
}
}
return option
})
},
toggleOption (option) {
const optionIndex = this.sValue.indexOf(option.value)
const value = [...this.sValue]
if (optionIndex === -1) {
value.push(option.value)
} else {
value.splice(optionIndex, 1)
}
if (!hasProp(this, 'value')) {
this.sValue = value
}
this.$emit('input', value)
this.$emit('change', value)
},
},
render () {
const { $props: props, $data: state, $slots } = this
const { prefixCls, options } = props
let children = $slots.default
if (options && options.length > 0) {
children = this.getOptions().map(option => (
<Checkbox
key={option.value}
disabled={'disabled' in option ? option.disabled : props.disabled}
value={option.value}
checked={state.sValue.indexOf(option.value) !== -1}
onChange={() => this.toggleOption(option)}
class={`${prefixCls}-item`}
>
{option.label}
</Checkbox>
))
}
return (
<div class={prefixCls}>
{children}
</div>
)
},
watch: {
value (val) {
this.sValue = val
},
},
}
</script>