blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Switch: add active-value & inactive-value prop (#2590)

Browse Source
This commit is contained in:
neverland 2019-01-22 22:17:04 +08:00 committed by GitHub
parent 905a5891c9
commit a16786b5ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/switch/en-US.md
View File

@ -96,12 +96,14 @@ export default {
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|
| v-model | Check status of Switch | `Boolean` | `false` | | v-model | Check status of Switch | `any` | `false` |
| loading | Whether to show loading icon | `Boolean` | `false` | | loading | Whether to show loading icon | `Boolean` | `false` |
| disabled | Whether to disable switch | `Boolean` | `false` | | disabled | Whether to disable switch | `Boolean` | `false` |
| size | Size of switch | `String` | `30px` | | size | Size of switch | `String` | `30px` |
| active-color | Background color when active | `String` | `#1989fa` | | active-color | Background color when active | `String` | `#1989fa` |
| inactive-color | Background color when inactive | `String` | `#fff` | | inactive-color | Background color when inactive | `String` | `#fff` |
| active-value | Value when active | `any` | `true` |
| inactive-value | Value when inactive | `any` | `false` |
### Event ### Event

18
packages/switch/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
:class="b({ :class="b({
on: value, on: value === activeValue,
disabled disabled
})" })"
:style="style" :style="style"
@ -23,11 +23,19 @@ export default create({
name: 'switch', name: 'switch',
props: { props: {
value: Boolean, value: null,
loading: Boolean, loading: Boolean,
disabled: Boolean, disabled: Boolean,
activeColor: String, activeColor: String,
inactiveColor: String, inactiveColor: String,
activeValue: {
type: null,
default: true
},
inactiveValue: {
type: null,
default: false
},
size: { size: {
type: String, type: String,
default: '30px' default: '30px'
@ -46,8 +54,10 @@ export default create({
methods: { methods: {
onClick() { onClick() {
if (!this.disabled && !this.loading) { if (!this.disabled && !this.loading) {
this.$emit('input', !this.value); const checked = this.value === this.activeValue;
this.$emit('change', !this.value); const value = checked ? this.inactiveValue : this.activeValue;
this.$emit('input', value);
this.$emit('change', value);
} }
} }
} }

4
packages/switch/zh-CN.md
View File

@ -96,12 +96,14 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
| v-model | 开关选中状态 | `Boolean` | `false` | - | | v-model | 开关选中状态 | `any` | `false` | - |
| loading | 是否为加载状态 | `Boolean` | `false` | - | | loading | 是否为加载状态 | `Boolean` | `false` | - |
| disabled | 是否为禁用状态 | `Boolean` | `false` | - | | disabled | 是否为禁用状态 | `Boolean` | `false` | - |
| size | 开关尺寸 | `String` | `30px` | 1.0.0 | | size | 开关尺寸 | `String` | `30px` | 1.0.0 |
| active-color | 打开时的背景色 | `String` | `#1989fa` | 1.4.2 | | active-color | 打开时的背景色 | `String` | `#1989fa` | 1.4.2 |
| inactive-color | 关闭时的背景色 | `String` | `#fff` | 1.4.2 | | inactive-color | 关闭时的背景色 | `String` | `#fff` | 1.4.2 |
| active-value | 打开时的值 | `any` | `true` | 1.5.6 |
| inactive-value | 关闭时的值 | `any` | `false` | 1.5.6 |
### Event ### Event