mirror of https://github.com/ElemeFE/element
Switch: feature add-expand-value
liyl
杨奕
parent
fec489ec7b
commit
19c5afb2df
|
|
@ -4,7 +4,8 @@
|
|||
return {
|
||||
value1: true,
|
||||
value2: true,
|
||||
value3: true
|
||||
value3: '100',
|
||||
value4: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -43,19 +44,47 @@ 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.
|
||||
|
||||
```html
|
||||
<el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
on-color="#13ce66"
|
||||
off-color="#ff4949"
|
||||
on-value="100"
|
||||
off-value="0">
|
||||
</el-switch>
|
||||
</el-tooltip>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
:::demo Adding the `disabled` attribute disables Switch.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
v-model="value4"
|
||||
on-text=""
|
||||
off-text=""
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
v-model="value4"
|
||||
disabled>
|
||||
</el-switch>
|
||||
|
||||
|
|
@ -63,7 +92,7 @@ Switch is used for switching between two opposing states.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true
|
||||
value4: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -81,6 +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-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 | — | —
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
return {
|
||||
value1: true,
|
||||
value2: true,
|
||||
value3: true
|
||||
value3: '100',
|
||||
value4: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -37,7 +38,7 @@
|
|||
on-color="#13ce66"
|
||||
off-color="#ff4949">
|
||||
</el-switch>
|
||||
|
||||
</el-switch>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -51,27 +52,55 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
### 扩展 value
|
||||
|
||||
:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。
|
||||
:::demo 设置`on-value` 和 `off-value`属性，接受`Boolean` 或 `String` 类型的值，`v-model`可以设置`on-value`或`off-value`的状态值。
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
on-text=""
|
||||
off-text=""
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
on-color="#13ce66"
|
||||
off-color="#ff4949"
|
||||
on-value="100"
|
||||
off-value="0">
|
||||
</el-switch>
|
||||
</el-tooltip>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true
|
||||
value3: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。
|
||||
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value4"
|
||||
on-text=""
|
||||
off-text=""
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value4"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -79,6 +108,7 @@
|
|||
```
|
||||
:::
|
||||
|
||||
|
||||
### Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
@ -89,6 +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-color | switch 打开时的背景色 | string | — | #20A0FF |
|
||||
| off-color | switch 关闭时的背景色 | string | — | #C0CCDA |
|
||||
| name | switch 对应的 name 属性 | string | — | — |
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
@change="handleChange"
|
||||
v-model="_value"
|
||||
:name="name"
|
||||
:true-value="onValue"
|
||||
:false-value="offValue"
|
||||
:disabled="disabled">
|
||||
<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
|
||||
<span class="el-switch__button" :style="{ transform }"></span>
|
||||
|
|
@ -14,7 +16,7 @@
|
|||
<transition name="label-fade">
|
||||
<div
|
||||
class="el-switch__label el-switch__label--left"
|
||||
v-show="value"
|
||||
v-show="value === onValue"
|
||||
:style="{ 'width': coreWidth + 'px' }">
|
||||
<i :class="[onIconClass]" v-if="onIconClass"></i>
|
||||
<span v-if="!onIconClass && onText">{{ onText }}</span>
|
||||
|
|
@ -23,7 +25,7 @@
|
|||
<transition name="label-fade">
|
||||
<div
|
||||
class="el-switch__label el-switch__label--right"
|
||||
v-show="!value"
|
||||
v-show="value === offValue"
|
||||
:style="{ 'width': coreWidth + 'px' }">
|
||||
<i :class="[offIconClass]" v-if="offIconClass"></i>
|
||||
<span v-if="!offIconClass && offText">{{ offText }}</span>
|
||||
|
|
@ -37,7 +39,7 @@
|
|||
name: 'ElSwitch',
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
|
|
@ -72,6 +74,14 @@
|
|||
type: String,
|
||||
default: ''
|
||||
},
|
||||
onValue: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
offValue: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
|
|
@ -82,6 +92,11 @@
|
|||
coreWidth: this.width
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (!~[this.onValue, this.offValue].indexOf(this.value)) {
|
||||
this.$emit('input', this.onValue);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasText() {
|
||||
/* istanbul ignore next */
|
||||
|
|
@ -96,7 +111,7 @@
|
|||
}
|
||||
},
|
||||
transform() {
|
||||
return this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
|
||||
return this.value === this.onValue ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -111,7 +126,7 @@
|
|||
this.$emit('change', event.currentTarget.checked);
|
||||
},
|
||||
setBackgroundColor() {
|
||||
let newColor = this.value ? this.onColor : this.offColor;
|
||||
let newColor = this.value === this.onValue ? this.onColor : this.offColor;
|
||||
this.$refs.core.style.borderColor = newColor;
|
||||
this.$refs.core.style.backgroundColor = newColor;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -120,4 +120,32 @@ describe('Switch', () => {
|
|||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('expand switch value', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<div>
|
||||
<el-switch v-model="value" :on-value="onValue" :off-value="offValue"></el-switch>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
value: '100',
|
||||
onValue: '100',
|
||||
offValue: '0'
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
|
||||
const core = vm.$el.querySelector('.el-switch__core');
|
||||
core.click();
|
||||
setTimeout(() => {
|
||||
expect(vm.value).to.equal('0');
|
||||
core.click();
|
||||
setTimeout(() => {
|
||||
expect(vm.value).to.equal('100');
|
||||
done();
|
||||
}, 10);
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue