fix(switch): cannot change width dynamically (#1435)

Cannot change the width dynamically, the subset does not change the width operation

Co-authored-by: djkloop <675467298@qq.com>
This commit is contained in:
djkloop 2021-02-08 16:19:36 +08:00 committed by GitHub
parent 7170bdeacc
commit c37f47faca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -26,7 +26,7 @@
<i v-if="inactiveIconClass" :class="[inactiveIconClass]"></i> <i v-if="inactiveIconClass" :class="[inactiveIconClass]"></i>
<span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span> <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
</span> </span>
<span ref="core" class="el-switch__core" :style="{ 'width': coreWidth + 'px' }"> <span ref="core" class="el-switch__core" :style="{ 'width': (width || 40) + 'px' }">
<div class="el-switch__action"> <div class="el-switch__action">
<i v-if="loading" class="el-icon-loading"></i> <i v-if="loading" class="el-icon-loading"></i>
</div> </div>
@ -138,7 +138,6 @@ export default defineComponent({
const elForm = inject(elFormKey, {} as ElFormContext) const elForm = inject(elFormKey, {} as ElFormContext)
const elFormItem = inject(elFormItemKey, {} as ElFormItemContext) const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
const coreWidth = ref(props.width)
const isModelValue = ref(props.modelValue !== false) const isModelValue = ref(props.modelValue !== false)
const input = ref(null) const input = ref(null)
const core = ref(null) const core = ref(null)
@ -204,8 +203,6 @@ export default defineComponent({
} }
onMounted(() => { onMounted(() => {
coreWidth.value = coreWidth.value || 40
if (props.activeValue || props.inactiveValue) { if (props.activeValue || props.inactiveValue) {
setBackgroundColor() setBackgroundColor()
} }
@ -216,7 +213,6 @@ export default defineComponent({
return { return {
input, input,
core, core,
coreWidth,
switchDisabled, switchDisabled,
checked, checked,
handleChange, handleChange,