diff --git a/examples/docs/select.md b/examples/docs/select.md
index 4b1fdccea..c19cf4b6c 100644
--- a/examples/docs/select.md
+++ b/examples/docs/select.md
@@ -115,7 +115,7 @@
this.loading = true;
setTimeout(() => {
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);
}
}
diff --git a/examples/docs/switch.md b/examples/docs/switch.md
index bc84d7bae..c3ab594e6 100644
--- a/examples/docs/switch.md
+++ b/examples/docs/switch.md
@@ -7,14 +7,26 @@
}
+
+
## 基本用法
-
+
```html
-
+
```
## 禁用状态
@@ -36,13 +48,13 @@
## 自定义颜色
-
-
+
+
```html
-
-
+
+
```
## API
@@ -58,4 +70,4 @@
| on-color | switch 打开时的背景色 | string | | |
| off-color | switch 关闭时的背景色 | string | | |
| name | 对应 input 的 name 属性 | string | | |
-
+| change | value 发生变化时的回调函数 | function | | |
diff --git a/packages/date-picker/src/css/time-picker.css b/packages/date-picker/src/css/time-picker.css
index c0860c0d5..a34d8c8d6 100644
--- a/packages/date-picker/src/css/time-picker.css
+++ b/packages/date-picker/src/css/time-picker.css
@@ -25,6 +25,7 @@
position: absolute;
font-size: 14px;
margin-top: -8px;
+ line-height: 16px;
z-index: 1;
}
@@ -43,6 +44,7 @@
border-top: 1px solid var(--datepicker-inner-border-color);
padding: 4px;
height: 36px;
+ line-height: 25px;
text-align: right;
box-sizing: border-box;
}
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 0139b3479..1d25e8d42 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -424,6 +424,9 @@
toggleMenu() {
if (!this.disabled) {
this.visible = !this.visible;
+ if (this.remote && this.visible) {
+ this.selectedLabel = '';
+ }
}
},
@@ -475,6 +478,7 @@
event.stopPropagation();
this.selected = {};
this.selectedLabel = '';
+ this.$emit('input', '');
this.visible = false;
},
diff --git a/packages/switch/src/component.vue b/packages/switch/src/component.vue
index 5d3777da9..601468ad8 100644
--- a/packages/switch/src/component.vue
+++ b/packages/switch/src/component.vue
@@ -2,27 +2,29 @@
-
-
+
+
-
-
- {{ onText }}
-
-
-
- {{ offText }}
-
+
+
+
+ {{ onText }}
+
+
+
+
+
+ {{ offText }}
+
+
@@ -71,6 +73,11 @@
default: ''
}
},
+ data() {
+ return {
+ coreWidth: 0
+ };
+ },
computed: {
hasText() {
return this.onText || this.offText;
@@ -82,30 +89,31 @@
this.handleCoreColor();
}
this.handleButtonTransform();
+ this.$emit('change');
}
},
methods: {
handleMiscClick() {
if (!this.disabled) {
- this.value = !this.value;
+ this.$emit('input', !this.value);
}
},
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() {
if (this.value) {
- this.$els.core.style.borderColor = this.onColor;
- this.$els.core.style.backgroundColor = this.onColor;
+ this.$refs.core.style.borderColor = this.onColor;
+ this.$refs.core.style.backgroundColor = this.onColor;
} else {
- this.$els.core.style.borderColor = this.offColor;
- this.$els.core.style.backgroundColor = this.offColor;
+ this.$refs.core.style.borderColor = this.offColor;
+ this.$refs.core.style.backgroundColor = this.offColor;
}
}
},
- ready() {
+ mounted() {
if (this.width === 0) {
- this.width = this.hasText ? 58 : 46;
+ this.coreWidth = this.hasText ? 58 : 46;
}
this.handleButtonTransform();
if ((this.onColor || this.offColor) && !this.disabled) {
diff --git a/packages/theme-default/src/select.css b/packages/theme-default/src/select.css
index fc51a0d5e..6f3eec4a7 100644
--- a/packages/theme-default/src/select.css
+++ b/packages/theme-default/src/select.css
@@ -115,6 +115,9 @@
right: 10px;
font-family: 'element-icons';
content: "\e920";
+ font-size: 13px;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
}
}
diff --git a/packages/theme-default/src/switch.css b/packages/theme-default/src/switch.css
index f340376e8..b8fceca5c 100644
--- a/packages/theme-default/src/switch.css
+++ b/packages/theme-default/src/switch.css
@@ -16,6 +16,7 @@
}
@e label {
+ transition: .2s;
position: absolute;
z-index: 10;
size: 46px 22px;
@@ -111,12 +112,8 @@
}
}
- & .label-fade-transition {
- transition: .2s;
- }
-
& .label-fade-enter,
- & .label-fade-leave {
+ & .label-fade-leave-active {
opacity: 0;
}
}