mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] SwitchCell: add active-value & inactive-value prop (#2591)
This commit is contained in:
parent
a16786b5ad
commit
e81902b4cf
@ -30,6 +30,7 @@ export default {
|
||||
|
||||
|
||||
#### Disabled
|
||||
|
||||
use `disabled` property to disable the component
|
||||
|
||||
```html
|
||||
@ -40,6 +41,7 @@ use `disabled` property to disable the component
|
||||
|
||||
|
||||
#### Loading
|
||||
|
||||
use `loading` property to keep component in loading state
|
||||
|
||||
```html
|
||||
@ -52,13 +54,15 @@ use `loading` property to keep component in loading state
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model | on-off state of the switch | `Boolean` | - |
|
||||
| v-model | on-off state of the switch | `any` | `false` |
|
||||
| title | the leftside title | `String` | `''` |
|
||||
| loading | whether switch is loading | `Boolean` | `false` |
|
||||
| disabled | whether to disable switch | `Boolean` | `false` |
|
||||
| size | Size of switch | `String` | `24px` |
|
||||
| active-color | Background of switch color when active | `String` | `#1989fa` |
|
||||
| inactive-color | Background of switch color when inactive | `String` | `#fff` |
|
||||
| active-value | Value when active | `any` | `true` |
|
||||
| inactive-value | Value when inactive | `any` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
|
@ -24,13 +24,21 @@ export default create({
|
||||
},
|
||||
|
||||
props: {
|
||||
value: null,
|
||||
title: String,
|
||||
value: Boolean,
|
||||
border: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
activeValue: {
|
||||
type: null,
|
||||
default: true
|
||||
},
|
||||
inactiveValue: {
|
||||
type: null,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '24px'
|
||||
|
@ -13,7 +13,6 @@ Vue.use(SwitchCell);
|
||||
|
||||
#### 基础用法
|
||||
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" title="标题" />
|
||||
@ -31,6 +30,7 @@ export default {
|
||||
```
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
通过`disabled`属性可以将组件设置为禁用状态
|
||||
|
||||
```html
|
||||
@ -40,6 +40,7 @@ export default {
|
||||
```
|
||||
|
||||
#### 加载状态
|
||||
|
||||
通过`loading`属性可以将组件设置为加载状态
|
||||
|
||||
```html
|
||||
@ -52,13 +53,15 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| v-model | 开关状态 | `Boolean` | - | - |
|
||||
| v-model | 开关状态 | `null` | `false` | - |
|
||||
| title | 左侧标题 | `String` | `''` | - |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
| size | 开关尺寸 | `String` | `24px` | 1.1.11 |
|
||||
| active-color | 开关时的背景色 | `String` | `#1989fa` | 1.5.0 |
|
||||
| inactive-color | 开关时的背景色 | `String` | `#fff` | 1.5.0 |
|
||||
| active-value | 打开时的值 | `any` | `true` | 1.5.6 |
|
||||
| inactive-value | 关闭时的值 | `any` | `false` | 1.5.6 |
|
||||
|
||||
### Event
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user