mirror of https://github.com/ElemeFE/element
Switch: use CSS to process button position (#10879)
* switch transformx value not flexiable * add -1px for buttonpull/10897/merge
parent
03e03b9b33
commit
8b379a57df
|
@ -26,7 +26,6 @@
|
||||||
<span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
|
<span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
|
<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
|
||||||
<span class="el-switch__button" :style="{ transform }"></span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
:class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
|
:class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
|
||||||
|
@ -107,9 +106,6 @@
|
||||||
checked() {
|
checked() {
|
||||||
return this.value === this.activeValue;
|
return this.value === this.activeValue;
|
||||||
},
|
},
|
||||||
transform() {
|
|
||||||
return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : '';
|
|
||||||
},
|
|
||||||
switchDisabled() {
|
switchDisabled() {
|
||||||
return this.disabled || (this.elForm || {}).disabled;
|
return this.disabled || (this.elForm || {}).disabled;
|
||||||
}
|
}
|
||||||
|
|
|
@ -69,12 +69,13 @@
|
||||||
transition: border-color .3s, background-color .3s;
|
transition: border-color .3s, background-color .3s;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
& .el-switch__button {
|
&:after {
|
||||||
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1px;
|
top: 1px;
|
||||||
left: 1px;
|
left: 1px;
|
||||||
border-radius: $--border-radius-circle;
|
border-radius: $--border-radius-circle;
|
||||||
transition: transform .3s;
|
transition: all .3s;
|
||||||
width: $--switch-button-size;
|
width: $--switch-button-size;
|
||||||
height: $--switch-button-size;
|
height: $--switch-button-size;
|
||||||
background-color: $--color-white;
|
background-color: $--color-white;
|
||||||
|
@ -85,6 +86,10 @@
|
||||||
.el-switch__core {
|
.el-switch__core {
|
||||||
border-color: $--switch-on-color;
|
border-color: $--switch-on-color;
|
||||||
background-color: $--switch-on-color;
|
background-color: $--switch-on-color;
|
||||||
|
&::after {
|
||||||
|
left: 100%;
|
||||||
|
margin-left: -$--switch-button-size - 1px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue