59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
|
<template lang="html">
|
||
|
|
<label :class="`${prefixCls}-wrapper`">
|
||
|
|
<span :class="checkboxClass">
|
||
|
|
<span
|
||
|
|
:class="`${prefixCls}__inner`"
|
||
|
|
@click="toggle"></span>
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'zk-checkbox',
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
indeterminate: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
prefixCls: 'zk-checkbox',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
checkboxClass() {
|
||
|
|
return [
|
||
|
|
`${this.prefixCls}`,
|
||
|
|
{
|
||
|
|
[`${this.prefixCls}--disabled`]: this.disabled,
|
||
|
|
[`${this.prefixCls}--checked`]: this.value,
|
||
|
|
[`${this.prefixCls}--indeterminate`]: this.indeterminate,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
toggle() {
|
||
|
|
if (this.disabled) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
const value = !this.value;
|
||
|
|
this.$emit('input', value);
|
||
|
|
return this.$emit('on-change', value);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped src="./Checkbox.less"></style>
|