github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

update switch

pull/2/head
Leopoldthecoder 2016-08-04 19:56:54 +08:00
parent 47293a131d
commit f80f2d55e3
7 changed files with 67 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/select.md
View File

@ -115,7 +115,7 @@
this.loading = true; this.loading = true;
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
this.options5 = this.states.filter(item => item.toLowerCase().indexOf(query) > -1).map(item => { return { value: item, label: item }; }); this.options5 = this.states.filter(item => item.toLowerCase().indexOf(query.toLowerCase()) > -1).map(item => { return { value: item, label: item }; });
}, 200); }, 200);
} }
} }

26
examples/docs/switch.md
View File

@ -7,14 +7,26 @@
} }
</style> </style>
<script>
export default {
data() {
return {
value1: true,
value2: true,
value3: true
}
}
};
</script>
## 基本用法 ## 基本用法
<div class="demo-box demo-switch"> <div class="demo-box demo-switch">
<el-switch></el-switch> <el-switch v-model="value1"></el-switch>
</div> </div>
```html ```html
<el-switch></el-switch> <el-switch v-model="value1"></el-switch>
``` ```
## 禁用状态 ## 禁用状态
@ -36,13 +48,13 @@
## 自定义颜色 ## 自定义颜色
<div class="demo-box demo-switch"> <div class="demo-box demo-switch">
<el-switch on-color="#13ce66" off-color="#ff4949"></el-switch> <el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text=""></el-switch> <el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
</div> </div>
```html ```html
<el-switch on-color="#13ce66" off-color="#ff4949"></el-switch> <el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text=""></el-switch> <el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
``` ```
## API ## API
@ -58,4 +70,4 @@
| on-color | switch 打开时的背景色 | string | | | | on-color | switch 打开时的背景色 | string | | |
| off-color | switch 关闭时的背景色 | string | | | | off-color | switch 关闭时的背景色 | string | | |
| name | 对应 input 的 name 属性 | string | | | | name | 对应 input 的 name 属性 | string | | |
| change | value 发生变化时的回调函数 | function | | |

2
packages/date-picker/src/css/time-picker.css
View File

@ -25,6 +25,7 @@
position: absolute; position: absolute;
font-size: 14px; font-size: 14px;
margin-top: -8px; margin-top: -8px;
line-height: 16px;
z-index: 1; z-index: 1;
} }
@ -43,6 +44,7 @@
border-top: 1px solid var(--datepicker-inner-border-color); border-top: 1px solid var(--datepicker-inner-border-color);
padding: 4px; padding: 4px;
height: 36px; height: 36px;
line-height: 25px;
text-align: right; text-align: right;
box-sizing: border-box; box-sizing: border-box;
} }

4
packages/select/src/select.vue
View File

@ -424,6 +424,9 @@
toggleMenu() { toggleMenu() {
if (!this.disabled) { if (!this.disabled) {
this.visible = !this.visible; this.visible = !this.visible;
if (this.remote && this.visible) {
this.selectedLabel = '';
}
} }
}, },
@ -475,6 +478,7 @@
event.stopPropagation(); event.stopPropagation();
this.selected = {}; this.selected = {};
this.selectedLabel = ''; this.selectedLabel = '';
this.$emit('input', '');
this.visible = false; this.visible = false;
}, },

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

@ -2,27 +2,29 @@
<div class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'el-switch--color': onColor || offColor }"> <div class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'el-switch--color': onColor || offColor }">
<div class="el-switch__mask" v-show="disabled"></div> <div class="el-switch__mask" v-show="disabled"></div>
<input class="el-switch__input" type="checkbox" v-model="value" :name="name" :disabled="disabled" style="display: none;"> <input class="el-switch__input" type="checkbox" v-model="value" :name="name" :disabled="disabled" style="display: none;">
<span class="el-switch__core" v-el:core @click="handleMiscClick" :style="{ 'width': width + 'px' }"> <span class="el-switch__core" ref="core" @click="handleMiscClick" :style="{ 'width': coreWidth + 'px' }">
<span class="el-switch__button" v-el:button></span> <span class="el-switch__button" ref="button"></span>
</span> </span>
<div <transition name="label-fade">
class="el-switch__label el-switch__label--left" <div
v-show="value" class="el-switch__label el-switch__label--left"
@click="handleMiscClick" v-show="value"
:style="{ 'width': width + 'px' }" @click="handleMiscClick"
transition="label-fade"> :style="{ 'width': coreWidth + 'px' }">
<i :class="[onIconClass]" v-if="onIconClass"></i> <i :class="[onIconClass]" v-if="onIconClass"></i>
<span v-if="onText">{{ onText }}</span> <span v-if="onText">{{ onText }}</span>
</div> </div>
<div </transition>
class="el-switch__label el-switch__label--right" <transition name="label-fade">
v-show="!value" <div
@click="handleMiscClick" class="el-switch__label el-switch__label--right"
:style="{ 'width': width + 'px' }" v-show="!value"
transition="label-fade"> @click="handleMiscClick"
<i :class="[offIconClass]" v-if="offIconClass"></i> :style="{ 'width': coreWidth + 'px' }">
<span v-if="offText">{{ offText }}</span> <i :class="[offIconClass]" v-if="offIconClass"></i>
</div> <span v-if="offText">{{ offText }}</span>
</div>
</transition>
</div> </div>
</template> </template>
@ -71,6 +73,11 @@
default: '' default: ''
} }
}, },
data() {
return {
coreWidth: 0
};
},
computed: { computed: {
hasText() { hasText() {
return this.onText || this.offText; return this.onText || this.offText;
@ -82,30 +89,31 @@
this.handleCoreColor(); this.handleCoreColor();
} }
this.handleButtonTransform(); this.handleButtonTransform();
this.$emit('change');
} }
}, },
methods: { methods: {
handleMiscClick() { handleMiscClick() {
if (!this.disabled) { if (!this.disabled) {
this.value = !this.value; this.$emit('input', !this.value);
} }
}, },
handleButtonTransform() { handleButtonTransform() {
this.$els.button.style.transform = this.value ? `translate3d(${ this.width - 20 }px, 2px, 0)` : 'translate3d(2px, 2px, 0)'; this.$refs.button.style.transform = this.value ? `translate3d(${ this.coreWidth - 20 }px, 2px, 0)` : 'translate3d(2px, 2px, 0)';
}, },
handleCoreColor() { handleCoreColor() {
if (this.value) { if (this.value) {
this.$els.core.style.borderColor = this.onColor; this.$refs.core.style.borderColor = this.onColor;
this.$els.core.style.backgroundColor = this.onColor; this.$refs.core.style.backgroundColor = this.onColor;
} else { } else {
this.$els.core.style.borderColor = this.offColor; this.$refs.core.style.borderColor = this.offColor;
this.$els.core.style.backgroundColor = this.offColor; this.$refs.core.style.backgroundColor = this.offColor;
} }
} }
}, },
ready() { mounted() {
if (this.width === 0) { if (this.width === 0) {
this.width = this.hasText ? 58 : 46; this.coreWidth = this.hasText ? 58 : 46;
} }
this.handleButtonTransform(); this.handleButtonTransform();
if ((this.onColor || this.offColor) && !this.disabled) { if ((this.onColor || this.offColor) && !this.disabled) {

3
packages/theme-default/src/select.css
View File

@ -115,6 +115,9 @@
right: 10px; right: 10px;
font-family: 'element-icons'; font-family: 'element-icons';
content: "\e920"; content: "\e920";
font-size: 13px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
} }
} }

7
packages/theme-default/src/switch.css
View File

@ -16,6 +16,7 @@
} }
@e label { @e label {
transition: .2s;
position: absolute; position: absolute;
z-index: 10; z-index: 10;
size: 46px 22px; size: 46px 22px;
@ -111,12 +112,8 @@
} }
} }
& .label-fade-transition {
transition: .2s;
}
& .label-fade-enter, & .label-fade-enter,
& .label-fade-leave { & .label-fade-leave-active {
opacity: 0; opacity: 0;
} }
} }