form-checkbox.vue
1.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
<label :class="[custom?'custom-control':null,custom?'custom-checkbox':null,inline?'form-check-inline':null]">
<input
:class="[custom?'custom-control-input':null]"
type="checkbox"
:id="id"
:name="name"
:value="_value"
:disabled="disabled"
@change="change($event.target.checked)"
:checked="localChecked"
>
<span class="custom-control-indicator" v-if="custom"></span>
<span :class="[custom?'custom-control-description':null]"><slot></slot></span>
</label>
</template>
<script>
export default {
data() {
return {
localChecked: this.checked
};
},
mounted() {
this.change(this.localChecked);
},
computed: {
inputState() {
return this.state ? `has-${this.state}` : '';
}
},
props: {
id: {
type: String,
default: null
},
name: {
type: String,
default: null
},
_value: {
default: true
},
disabled: {
type: Boolean,
default: false
},
checked: {
type: Boolean,
default: false
},
inline: {
type: Boolean,
default: true
},
custom: {
type: Boolean,
default: true
}
},
methods: {
change(checked) {
this.localChecked = checked;
this.$emit('change', checked);
this.$emit('input', checked ? this._value : undefined);
}
}
};
</script>