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

Switch:feat support number value

Browse Source
This commit is contained in:
liyl 2017-04-23 14:43:50 +08:00 committed by 杨奕
parent 19c5afb2df
commit 3655d0be33
3 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/docs/en-US/switch.md
View File

@ -46,7 +46,7 @@ Switch is used for switching between two opposing states.
### Expand value
:::demo Set `on-value` and `off-value` attribute. It's receive `Boolean` or `String` type.
:::demo Set `on-value` and `off-value` attribute. It's receive `Boolean`, `String` or `Number` type.
```html
<el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
@ -110,8 +110,8 @@ on-close-icon | class name of the icon displayed when in `on` state, overrides `
off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
on-text | text displayed when in `on` state | string | — | ON
off-text | text displayed when in `off` state | string | — | OFF
on-value | switch value when in `on` state | boolean \| string | — | true
off-value | switch value when in `off` state | boolean \| string | — | false
on-value | switch value when in `on` state | boolean \| string \| number | — | true
off-value | switch value when in `off` state | boolean \| string \| number | — | false
on-color | background color when in `on` state | string | — | #20A0FF
off-color | background color when in `off` state | string | — | #C0CCDA
name| input name of Switch | string | — | —

6
examples/docs/zh-CN/switch.md
View File

@ -54,7 +54,7 @@
### 扩展 value
:::demo 设置`on-value` 和 `off-value`属性，接受`Boolean` 或 `String` 类型的值，`v-model`可以设置`on-value`或`off-value`的状态值。
:::demo 设置`on-value` 和 `off-value`属性，接受`Boolean`, `String` 或 `Number` 类型的值。
```html
<el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
@ -119,8 +119,8 @@
| off-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text` | string | — | — |
| on-text | switch 打开时的文字 | string | — | ON |
| off-text | switch 关闭时的文字 | string | — | OFF |
| on-value | switch 打开时的值 | boolean \| string | — | true |
| off-value | switch 关闭时的值 | boolean \| string | — | false |
| on-value | switch 打开时的值 | boolean \| string \| number | — | true |
| off-value | switch 关闭时的值 | boolean \| string \| number | — | false |
| on-color | switch 打开时的背景色 | string | — | #20A0FF |
| off-color | switch 关闭时的背景色 | string | — | #C0CCDA |
| name | switch 对应的 name 属性 | string | — | — |

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

@ -16,7 +16,7 @@
<transition name="label-fade">
<div
class="el-switch__label el-switch__label--left"
v-show="value === onValue"
v-show="checked"
:style="{ 'width': coreWidth + 'px' }">
<i :class="[onIconClass]" v-if="onIconClass"></i>
<span v-if="!onIconClass && onText">{{ onText }}</span>
@ -25,7 +25,7 @@
<transition name="label-fade">
<div
class="el-switch__label el-switch__label--right"
v-show="value === offValue"
v-show="!checked"
:style="{ 'width': coreWidth + 'px' }">
<i :class="[offIconClass]" v-if="offIconClass"></i>
<span v-if="!offIconClass && offText">{{ offText }}</span>
@ -39,7 +39,7 @@
name: 'ElSwitch',
props: {
value: {
type: [Boolean, String],
type: [Boolean, String, Number],
default: true
},
disabled: {
@ -75,11 +75,11 @@
default: ''
},
onValue: {
type: [Boolean, String],
type: [Boolean, String, Number],
default: true
},
offValue: {
type: [Boolean, String],
type: [Boolean, String, Number],
default: false
},
name: {
@ -98,6 +98,9 @@
}
},
computed: {
checked() {
return this.value === this.onValue;
},
hasText() {
/* istanbul ignore next */
return this.onText || this.offText;
@ -111,7 +114,7 @@
}
},
transform() {
return this.value === this.onValue ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
return this.checked ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
}
},
watch: {
@ -126,7 +129,7 @@
this.$emit('change', event.currentTarget.checked);
},
setBackgroundColor() {
let newColor = this.value === this.onValue ? this.onColor : this.offColor;
let newColor = this.checked ? this.onColor : this.offColor;
this.$refs.core.style.borderColor = newColor;
this.$refs.core.style.backgroundColor = newColor;
}