1 | <template>
|
2 | <div
|
3 | class="el-switch"
|
4 | :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
|
5 | role="switch"
|
6 | :aria-checked="checked"
|
7 | :aria-disabled="switchDisabled"
|
8 | @click.prevent="switchValue"
|
9 | >
|
10 | <input
|
11 | class="el-switch__input"
|
12 | type="checkbox"
|
13 | @change="handleChange"
|
14 | ref="input"
|
15 | :id="id"
|
16 | :name="name"
|
17 | :true-value="activeValue"
|
18 | :false-value="inactiveValue"
|
19 | :disabled="switchDisabled"
|
20 | @keydown.enter="switchValue"
|
21 | >
|
22 | <span
|
23 | :class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
|
24 | v-if="inactiveIconClass || inactiveText">
|
25 | <i :class="[inactiveIconClass]" v-if="inactiveIconClass"></i>
|
26 | <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
|
27 | </span>
|
28 | <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
|
29 | </span>
|
30 | <span
|
31 | :class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
|
32 | v-if="activeIconClass || activeText">
|
33 | <i :class="[activeIconClass]" v-if="activeIconClass"></i>
|
34 | <span v-if="!activeIconClass && activeText" :aria-hidden="!checked">{{ activeText }}</span>
|
35 | </span>
|
36 | </div>
|
37 | </template>
|
38 | <script>
|
39 | import emitter from 'element-ui/src/mixins/emitter';
|
40 | import Focus from 'element-ui/src/mixins/focus';
|
41 | import Migrating from 'element-ui/src/mixins/migrating';
|
42 |
|
43 | export default {
|
44 | name: 'ElSwitch',
|
45 | mixins: [Focus('input'), Migrating, emitter],
|
46 | inject: {
|
47 | elForm: {
|
48 | default: ''
|
49 | }
|
50 | },
|
51 | props: {
|
52 | value: {
|
53 | type: [Boolean, String, Number],
|
54 | default: false
|
55 | },
|
56 | disabled: {
|
57 | type: Boolean,
|
58 | default: false
|
59 | },
|
60 | width: {
|
61 | type: Number,
|
62 | default: 40
|
63 | },
|
64 | activeIconClass: {
|
65 | type: String,
|
66 | default: ''
|
67 | },
|
68 | inactiveIconClass: {
|
69 | type: String,
|
70 | default: ''
|
71 | },
|
72 | activeText: String,
|
73 | inactiveText: String,
|
74 | activeColor: {
|
75 | type: String,
|
76 | default: ''
|
77 | },
|
78 | inactiveColor: {
|
79 | type: String,
|
80 | default: ''
|
81 | },
|
82 | activeValue: {
|
83 | type: [Boolean, String, Number],
|
84 | default: true
|
85 | },
|
86 | inactiveValue: {
|
87 | type: [Boolean, String, Number],
|
88 | default: false
|
89 | },
|
90 | name: {
|
91 | type: String,
|
92 | default: ''
|
93 | },
|
94 | validateEvent: {
|
95 | type: Boolean,
|
96 | default: true
|
97 | },
|
98 | id: String
|
99 | },
|
100 | data() {
|
101 | return {
|
102 | coreWidth: this.width
|
103 | };
|
104 | },
|
105 | created() {
|
106 | if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
|
107 | this.$emit('input', this.inactiveValue);
|
108 | }
|
109 | },
|
110 | computed: {
|
111 | checked() {
|
112 | return this.value === this.activeValue;
|
113 | },
|
114 | switchDisabled() {
|
115 | return this.disabled || (this.elForm || {}).disabled;
|
116 | }
|
117 | },
|
118 | watch: {
|
119 | checked() {
|
120 | this.$refs.input.checked = this.checked;
|
121 | if (this.activeColor || this.inactiveColor) {
|
122 | this.setBackgroundColor();
|
123 | }
|
124 | if (this.validateEvent) {
|
125 | this.dispatch('ElFormItem', 'el.form.change', [this.value]);
|
126 | }
|
127 | }
|
128 | },
|
129 | methods: {
|
130 | handleChange(event) {
|
131 | const val = this.checked ? this.inactiveValue : this.activeValue;
|
132 | this.$emit('input', val);
|
133 | this.$emit('change', val);
|
134 | this.$nextTick(() => {
|
135 |
|
136 |
|
137 | this.$refs.input.checked = this.checked;
|
138 | });
|
139 | },
|
140 | setBackgroundColor() {
|
141 | let newColor = this.checked ? this.activeColor : this.inactiveColor;
|
142 | this.$refs.core.style.borderColor = newColor;
|
143 | this.$refs.core.style.backgroundColor = newColor;
|
144 | },
|
145 | switchValue() {
|
146 | !this.switchDisabled && this.handleChange();
|
147 | },
|
148 | getMigratingConfig() {
|
149 | return {
|
150 | props: {
|
151 | 'on-color': 'on-color is renamed to active-color.',
|
152 | 'off-color': 'off-color is renamed to inactive-color.',
|
153 | 'on-text': 'on-text is renamed to active-text.',
|
154 | 'off-text': 'off-text is renamed to inactive-text.',
|
155 | 'on-value': 'on-value is renamed to active-value.',
|
156 | 'off-value': 'off-value is renamed to inactive-value.',
|
157 | 'on-icon-class': 'on-icon-class is renamed to active-icon-class.',
|
158 | 'off-icon-class': 'off-icon-class is renamed to inactive-icon-class.'
|
159 | }
|
160 | };
|
161 | }
|
162 | },
|
163 | mounted() {
|
164 |
|
165 | this.coreWidth = this.width || 40;
|
166 | if (this.activeColor || this.inactiveColor) {
|
167 | this.setBackgroundColor();
|
168 | }
|
169 | this.$refs.input.checked = this.checked;
|
170 | }
|
171 | };
|
172 | </script>
|