|
| 1 | +<template> |
| 2 | + <label |
| 3 | + class="el-checkbox-button" |
| 4 | + :class="[ |
| 5 | + size ? 'el-checkbox-button--' + size : '', |
| 6 | + { 'is-disabled': disabled }, |
| 7 | + { 'is-checked': isChecked }, |
| 8 | + { 'is-focus': focus }, |
| 9 | + ]" |
| 10 | + > |
| 11 | + <input |
| 12 | + v-if="trueLabel || falseLabel" |
| 13 | + class="el-checkbox-button__original" |
| 14 | + type="checkbox" |
| 15 | + :name="name" |
| 16 | + :disabled="disabled" |
| 17 | + :true-value="trueLabel" |
| 18 | + :false-value="falseLabel" |
| 19 | + v-model="model" |
| 20 | + @change="handleChange" |
| 21 | + @focus="focus = true" |
| 22 | + @blur="focus = false"> |
| 23 | + <input |
| 24 | + v-else |
| 25 | + class="el-checkbox-button__original" |
| 26 | + type="checkbox" |
| 27 | + :name="name" |
| 28 | + :disabled="disabled" |
| 29 | + :value="label" |
| 30 | + v-model="model" |
| 31 | + @change="handleChange" |
| 32 | + @focus="focus = true" |
| 33 | + @blur="focus = false"> |
| 34 | + |
| 35 | + <span class="el-checkbox-button__inner" |
| 36 | + v-if="$slots.default || label" |
| 37 | + :style="isChecked ? activeStyle : null"> |
| 38 | + <slot>{{label}}</slot> |
| 39 | + </span> |
| 40 | + |
| 41 | + </label> |
| 42 | +</template> |
| 43 | +<script> |
| 44 | + import Emitter from 'element-ui/src/mixins/emitter'; |
| 45 | +
|
| 46 | + export default { |
| 47 | + name: 'ElCheckboxButton', |
| 48 | +
|
| 49 | + mixins: [Emitter], |
| 50 | +
|
| 51 | + data() { |
| 52 | + return { |
| 53 | + selfModel: false, |
| 54 | + focus: false |
| 55 | + }; |
| 56 | + }, |
| 57 | +
|
| 58 | + props: { |
| 59 | + value: {}, |
| 60 | + label: {}, |
| 61 | + disabled: Boolean, |
| 62 | + checked: Boolean, |
| 63 | + name: String, |
| 64 | + trueLabel: [String, Number], |
| 65 | + falseLabel: [String, Number] |
| 66 | + }, |
| 67 | + computed: { |
| 68 | + model: { |
| 69 | + get() { |
| 70 | + return this._checkboxGroup |
| 71 | + ? this.store : this.value !== undefined |
| 72 | + ? this.value : this.selfModel; |
| 73 | + }, |
| 74 | +
|
| 75 | + set(val) { |
| 76 | + if (this._checkboxGroup) { |
| 77 | + let isLimitExceeded = false; |
| 78 | + (this._checkboxGroup.min !== undefined && |
| 79 | + val.length < this._checkboxGroup.min && |
| 80 | + (isLimitExceeded = true)); |
| 81 | +
|
| 82 | + (this._checkboxGroup.max !== undefined && |
| 83 | + val.length > this._checkboxGroup.max && |
| 84 | + (isLimitExceeded = true)); |
| 85 | +
|
| 86 | + isLimitExceeded === false && |
| 87 | + this.dispatch('ElCheckboxGroup', 'input', [val]); |
| 88 | + } else if (this.value !== undefined) { |
| 89 | + this.$emit('input', val); |
| 90 | + } else { |
| 91 | + this.selfModel = val; |
| 92 | + } |
| 93 | + } |
| 94 | + }, |
| 95 | +
|
| 96 | + isChecked() { |
| 97 | + if ({}.toString.call(this.model) === '[object Boolean]') { |
| 98 | + return this.model; |
| 99 | + } else if (Array.isArray(this.model)) { |
| 100 | + return this.model.indexOf(this.label) > -1; |
| 101 | + } else if (this.model !== null && this.model !== undefined) { |
| 102 | + return this.model === this.trueLabel; |
| 103 | + } |
| 104 | + }, |
| 105 | +
|
| 106 | + _checkboxGroup() { |
| 107 | + let parent = this.$parent; |
| 108 | + while (parent) { |
| 109 | + if (parent.$options.componentName !== 'ElCheckboxGroup') { |
| 110 | + parent = parent.$parent; |
| 111 | + } else { |
| 112 | + return parent; |
| 113 | + } |
| 114 | + } |
| 115 | + return false; |
| 116 | + }, |
| 117 | +
|
| 118 | + store() { |
| 119 | + return this._checkboxGroup ? this._checkboxGroup.value : this.value; |
| 120 | + }, |
| 121 | +
|
| 122 | + activeStyle() { |
| 123 | + return { |
| 124 | + backgroundColor: this._checkboxGroup.fill || '', |
| 125 | + borderColor: this._checkboxGroup.fill || '', |
| 126 | + color: this._checkboxGroup.textColor || '', |
| 127 | + 'box-shadow': '-1px 0 0 0 ' + this._checkboxGroup.fill |
| 128 | +
|
| 129 | + }; |
| 130 | + }, |
| 131 | +
|
| 132 | + size() { |
| 133 | + return this._checkboxGroup.size; |
| 134 | + } |
| 135 | + }, |
| 136 | + methods: { |
| 137 | + addToStore() { |
| 138 | + if ( |
| 139 | + Array.isArray(this.model) && |
| 140 | + this.model.indexOf(this.label) === -1 |
| 141 | + ) { |
| 142 | + this.model.push(this.label); |
| 143 | + } else { |
| 144 | + this.model = this.trueLabel || true; |
| 145 | + } |
| 146 | + }, |
| 147 | + handleChange(ev) { |
| 148 | + this.$emit('change', ev); |
| 149 | + if (this._checkboxGroup) { |
| 150 | + this.$nextTick(_ => { |
| 151 | + this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]); |
| 152 | + }); |
| 153 | + } |
| 154 | + } |
| 155 | + }, |
| 156 | +
|
| 157 | + created() { |
| 158 | + this.checked && this.addToStore(); |
| 159 | + } |
| 160 | + }; |
| 161 | +</script> |
0 commit comments