mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[improvement] Checkbox: add checked-color prop (#885)
This commit is contained in:
neverland
GitHub
parent
ca81351945
commit
228a27ef8d
@ -4,6 +4,7 @@ Page({
|
||||
data: {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
checkbox3: true,
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b'],
|
||||
result2: [],
|
||||
|
||||
@ -1,20 +1,57 @@
|
||||
<demo-block title="基本用法">
|
||||
<van-checkbox value="{{ checkbox1 }}" data-key="checkbox1" bind:change="onChange" custom-class="demo-checkbox">复选框</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用状态">
|
||||
<van-checkbox value="{{ false }}" disabled custom-class="demo-checkbox">复选框</van-checkbox>
|
||||
<van-checkbox value="{{ true }}" disabled custom-class="demo-checkbox">复选框</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义图标">
|
||||
<van-checkbox value="{{ checkbox2 }}" data-key="checkbox2" bind:change="onChange" use-icon-slot custom-class="demo-checkbox">
|
||||
自定义图标
|
||||
<image mode="widthFix" slot="icon" src="{{ checkbox2 ? icon.active : icon.normal }}" class="icon" />
|
||||
<van-checkbox
|
||||
value="{{ checkbox1 }}"
|
||||
data-key="checkbox1"
|
||||
custom-class="demo-checkbox"
|
||||
bind:change="onChange"
|
||||
>
|
||||
复选框
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="Checkbox 组">
|
||||
<demo-block title="禁用状态">
|
||||
<van-checkbox
|
||||
disabled
|
||||
value="{{ false }}"
|
||||
custom-class="demo-checkbox"
|
||||
>
|
||||
复选框
|
||||
</van-checkbox>
|
||||
<van-checkbox
|
||||
disabled
|
||||
value="{{ true }}"
|
||||
custom-class="demo-checkbox"
|
||||
>
|
||||
复选框
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色">
|
||||
<van-checkbox
|
||||
value="{{ checkbox2 }}"
|
||||
data-key="checkbox2"
|
||||
checked-color="#4b0"
|
||||
custom-class="demo-checkbox"
|
||||
bind:change="onChange"
|
||||
>
|
||||
复选框
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义图标">
|
||||
<van-checkbox
|
||||
use-icon-slot
|
||||
value="{{ checkbox3 }}"
|
||||
data-key="checkbox3"
|
||||
custom-class="demo-checkbox"
|
||||
bind:change="onChange"
|
||||
>
|
||||
自定义图标
|
||||
<image mode="widthFix" slot="icon" src="{{ checkbox3 ? icon.active : icon.normal }}" class="icon" />
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="复选框组">
|
||||
<van-checkbox-group value="{{ result }}" data-key="result" bind:change="onChange">
|
||||
<van-checkbox
|
||||
wx:for="{{ list }}"
|
||||
@ -40,7 +77,7 @@
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="与 Cell 组件一起使用">
|
||||
<demo-block title="搭配单元格组件使用">
|
||||
<van-checkbox-group value="{{ result3 }}" data-key="result3" bind:change="onChange">
|
||||
<van-cell-group >
|
||||
<van-cell
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过`value`绑定 checkbox 的勾选状态
|
||||
|
||||
```html
|
||||
@ -21,10 +22,29 @@
|
||||
#### 禁用状态
|
||||
|
||||
```html
|
||||
<van-checkbox value="{{ checked }}" bind:change="onChange" disabled>复选框</van-checkbox>
|
||||
<van-checkbox
|
||||
disabled
|
||||
value="{{ checked }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
复选框
|
||||
</van-checkbox>
|
||||
```
|
||||
|
||||
#### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-checkbox
|
||||
value="{{ checked }}"
|
||||
checked-color="#4b0"
|
||||
bind:change="onChange"
|
||||
>
|
||||
复选框
|
||||
</van-checkbox>
|
||||
```
|
||||
|
||||
#### 自定义图标
|
||||
|
||||
通过 icon 插槽自定义图标
|
||||
|
||||
```html
|
||||
@ -55,7 +75,7 @@ Page({
|
||||
});
|
||||
```
|
||||
|
||||
#### Checkbox 组
|
||||
#### 复选框组
|
||||
|
||||
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`value`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
|
||||
|
||||
@ -100,7 +120,7 @@ Page({
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
#### 与 Cell 组件一起使用
|
||||
#### 搭配单元格组件使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
|
||||
|
||||
@ -155,6 +175,7 @@ Page({
|
||||
| label-position | 文本位置，可选值为 `left` | `String` | `right` |
|
||||
| shape | 形状，可选值为 `round` `square` | `String` | `round` |
|
||||
| use-icon-slot | 是否使用 icon slot | `Boolean` | `false` |
|
||||
| checked-color | 选中状态颜色 | `String` | `#1989fa` |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
|
||||
@ -13,22 +13,35 @@ VantComponent({
|
||||
props: {
|
||||
value: null,
|
||||
disabled: Boolean,
|
||||
labelDisabled: Boolean,
|
||||
useIconSlot: Boolean,
|
||||
checkedColor: String,
|
||||
labelPosition: String,
|
||||
labelDisabled: Boolean,
|
||||
shape: {
|
||||
type: String,
|
||||
value: 'round'
|
||||
},
|
||||
useIconSlot: Boolean
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
iconClass(): string {
|
||||
const { disabled, value, shape } = this.data;
|
||||
return this.classNames('van-checkbox__icon', `van-checkbox__icon--${shape}`, {
|
||||
'van-checkbox__icon--disabled': disabled,
|
||||
'van-checkbox__icon--checked': value
|
||||
});
|
||||
return this.classNames(
|
||||
'van-checkbox__icon',
|
||||
`van-checkbox__icon--${shape}`,
|
||||
{
|
||||
'van-checkbox__icon--disabled': disabled,
|
||||
'van-checkbox__icon--checked': value
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
iconStyle(): string {
|
||||
const { value, disabled, checkedColor } = this.data;
|
||||
if (checkedColor && value && !disabled) {
|
||||
return `border-color: ${checkedColor}; background-color: ${checkedColor}`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
@ -36,27 +49,7 @@ VantComponent({
|
||||
emitChange(value) {
|
||||
const parent = this.getRelationNodes('../checkbox-group/index')[0];
|
||||
if (parent) {
|
||||
const parentValue = parent.data.value.slice();
|
||||
const { name } = this.data;
|
||||
if (value) {
|
||||
if (parent.data.max && parentValue.length >= parent.data.max) {
|
||||
return;
|
||||
}
|
||||
/* istanbul ignore else */
|
||||
if (parentValue.indexOf(name) === -1) {
|
||||
parentValue.push(name);
|
||||
parent.$emit('input', parentValue);
|
||||
parent.$emit('change', parentValue);
|
||||
}
|
||||
} else {
|
||||
const index = parentValue.indexOf(name);
|
||||
/* istanbul ignore else */
|
||||
if (index !== -1) {
|
||||
parentValue.splice(index, 1);
|
||||
parent.$emit('input', parentValue);
|
||||
parent.$emit('change', parentValue);
|
||||
}
|
||||
}
|
||||
this.setParentValue(parent, value);
|
||||
} else {
|
||||
this.$emit('input', value);
|
||||
this.$emit('change', value);
|
||||
@ -73,6 +66,31 @@ VantComponent({
|
||||
if (!this.data.disabled && !this.data.labelDisabled) {
|
||||
this.emitChange(!this.data.value);
|
||||
}
|
||||
},
|
||||
|
||||
setParentValue(parent, value) {
|
||||
const parentValue = parent.data.value.slice();
|
||||
const { name } = this.data;
|
||||
|
||||
if (value) {
|
||||
if (parent.data.max && parentValue.length >= parent.data.max) {
|
||||
return;
|
||||
}
|
||||
/* istanbul ignore else */
|
||||
if (parentValue.indexOf(name) === -1) {
|
||||
parentValue.push(name);
|
||||
parent.$emit('input', parentValue);
|
||||
parent.$emit('change', parentValue);
|
||||
}
|
||||
} else {
|
||||
const index = parentValue.indexOf(name);
|
||||
/* istanbul ignore else */
|
||||
if (index !== -1) {
|
||||
parentValue.splice(index, 1);
|
||||
parent.$emit('input', parentValue);
|
||||
parent.$emit('change', parentValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
wx:else
|
||||
name="success"
|
||||
class="{{ iconClass }}"
|
||||
style="{{ iconStyle }}"
|
||||
custom-class="icon-class"
|
||||
custom-style="line-height: 20px;"
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user