test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 03:07:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Switch: use CSS to process button position (#10879)

Browse Source 
* switch transformx value not flexiable

* add -1px for button
This commit is contained in:
Jason Zoo 2018-04-25 17:34:00 +08:00 committed by 杨奕
parent 03e03b9b33
commit 8b379a57df
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/switch/src/component.vue
View File

@ -26,7 +26,6 @@
<span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
</span>
<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
<span class="el-switch__button" :style="{ transform }"></span>
</span>
<span
:class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
@ -107,9 +106,6 @@
checked() {
return this.value === this.activeValue;
},
transform() {
return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : '';
},
switchDisabled() {
return this.disabled || (this.elForm || {}).disabled;
}

9
packages/theme-chalk/src/switch.scss
View File

@ -69,12 +69,13 @@
transition: border-color .3s, background-color .3s;
vertical-align: middle;
& .el-switch__button {
&:after {
content: "";
position: absolute;
top: 1px;
left: 1px;
border-radius: $--border-radius-circle;
transition: transform .3s;
transition: all .3s;
width: $--switch-button-size;
height: $--switch-button-size;
background-color: $--color-white;
@ -85,6 +86,10 @@
.el-switch__core {
border-color: $--switch-on-color;
background-color: $--switch-on-color;
&::after {
left: 100%;
margin-left: -$--switch-button-size - 1px;
}
}
}