mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Checkbox: add checked-color prop (#2057)
This commit is contained in:
neverland
GitHub
parent
b5cdfc3ac5
commit
f272f661b3
@ -9,8 +9,14 @@
|
||||
<van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-checkbox v-model="checkbox2" checked-color="#4b0">
|
||||
{{ $t('customColor') }}
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customIcon')">
|
||||
<van-checkbox v-model="checkbox2">
|
||||
<van-checkbox v-model="checkbox3">
|
||||
{{ $t('customIcon') }}
|
||||
<img
|
||||
slot="icon"
|
||||
@ -68,13 +74,15 @@ export default {
|
||||
'zh-CN': {
|
||||
checkbox: '复选框',
|
||||
customIcon: '自定义图标',
|
||||
title3: 'Checkbox 组',
|
||||
customColor: '自定义颜色',
|
||||
title3: '复选框组',
|
||||
title4: '设置最大可选数',
|
||||
title5: '与 Cell 组件一起使用'
|
||||
title5: '搭配单元格组件使用'
|
||||
},
|
||||
'en-US': {
|
||||
checkbox: 'Checkbox',
|
||||
customIcon: 'Custom Icon',
|
||||
customColor: 'Custom Color',
|
||||
title3: 'Checkbox Group',
|
||||
title4: 'Maximum amount of checked options',
|
||||
title5: 'Inside a Cell'
|
||||
@ -85,6 +93,7 @@ export default {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
checkbox3: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
|
||||
@ -31,7 +31,14 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
#### Custom Color
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" checked-color="#4b0">Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
#### Custom Icon
|
||||
|
||||
Use icon slot to custom icon
|
||||
|
||||
```html
|
||||
@ -58,6 +65,7 @@ export default {
|
||||
```
|
||||
|
||||
#### Checkbox Group
|
||||
|
||||
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
|
||||
|
||||
```html
|
||||
@ -131,11 +139,12 @@ export default {
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| name | Checkbox name | `any` | - |
|
||||
| shape | Can be set to `round` `square` | `String` | `round` |
|
||||
| v-model | Check status | `Boolean` | `false` |
|
||||
| disabled | Diable checkbox | `Boolean` | `false` |
|
||||
| label-disabled | Whether to disable label click | `Boolean` | `false` |
|
||||
| label-position | Can be set to `left` | `String` | `right` |
|
||||
| shape | Can be set to `round` `square` | `String` | `round` |
|
||||
| checked-color | Checked color | `String` | `#1989fa` | - |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div :class="b()">
|
||||
<div :class="[b('icon', [shape, { disabled: isDisabled, checked }])]" @click="toggle">
|
||||
<slot name="icon" :checked="checked">
|
||||
<icon name="success" />
|
||||
<icon name="success" :style="iconStyle" />
|
||||
</slot>
|
||||
</div>
|
||||
<span v-if="$slots.default" :class="b('label', labelPosition)" @click="toggle('label')">
|
||||
@ -24,6 +24,7 @@ export default create({
|
||||
name: null,
|
||||
value: null,
|
||||
disabled: Boolean,
|
||||
checkedColor: String,
|
||||
labelPosition: String,
|
||||
labelDisabled: {
|
||||
type: Boolean,
|
||||
@ -44,26 +45,8 @@ export default create({
|
||||
},
|
||||
|
||||
set(val) {
|
||||
const { parent } = this;
|
||||
if (parent) {
|
||||
const parentValue = this.parent.value.slice();
|
||||
if (val) {
|
||||
if (parent.max && parentValue.length >= parent.max) {
|
||||
return;
|
||||
}
|
||||
/* istanbul ignore else */
|
||||
if (parentValue.indexOf(this.name) === -1) {
|
||||
parentValue.push(this.name);
|
||||
parent.$emit('input', parentValue);
|
||||
}
|
||||
} else {
|
||||
const index = parentValue.indexOf(this.name);
|
||||
/* istanbul ignore else */
|
||||
if (index !== -1) {
|
||||
parentValue.splice(index, 1);
|
||||
parent.$emit('input', parentValue);
|
||||
}
|
||||
}
|
||||
if (this.parent) {
|
||||
this.setParentValue(val);
|
||||
} else {
|
||||
this.$emit('input', val);
|
||||
}
|
||||
@ -72,6 +55,16 @@ export default create({
|
||||
|
||||
isDisabled() {
|
||||
return (this.parent && this.parent.disabled) || this.disabled;
|
||||
},
|
||||
|
||||
iconStyle() {
|
||||
const { checkedColor } = this;
|
||||
if (checkedColor && this.checked && !this.isDisabled) {
|
||||
return {
|
||||
borderColor: checkedColor,
|
||||
backgroundColor: checkedColor
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -90,6 +83,31 @@ export default create({
|
||||
if (!this.isDisabled && !(target === 'label' && this.labelDisabled)) {
|
||||
this.checked = !this.checked;
|
||||
}
|
||||
},
|
||||
|
||||
setParentValue(val) {
|
||||
const { parent } = this;
|
||||
const value = parent.value.slice();
|
||||
|
||||
if (val) {
|
||||
if (parent.max && value.length >= parent.max) {
|
||||
return;
|
||||
}
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (value.indexOf(this.name) === -1) {
|
||||
value.push(this.name);
|
||||
parent.$emit('input', value);
|
||||
}
|
||||
} else {
|
||||
const index = value.indexOf(this.name);
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (index !== -1) {
|
||||
value.splice(index, 1);
|
||||
parent.$emit('input', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -24,6 +24,16 @@ exports[`renders demo correctly 1`] = `
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">复选框</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;border-color:#4b0;background-color:#4b0;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">
|
||||
自定义颜色
|
||||
</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
|
||||
|
||||
@ -32,7 +32,14 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
#### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" checked-color="#4b0">复选框</van-checkbox>
|
||||
```
|
||||
|
||||
#### 自定义图标
|
||||
|
||||
通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断是否为选中状态
|
||||
|
||||
```html
|
||||
@ -58,9 +65,9 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
#### Checkbox 组
|
||||
#### 复选框组
|
||||
|
||||
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
|
||||
与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
@ -99,7 +106,7 @@ export default {
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
#### 与 Cell 组件一起使用
|
||||
#### 搭配单元格组件使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
|
||||
|
||||
@ -139,6 +146,7 @@ export default {
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
| label-disabled | 是否禁用单选框文本点击 | `Boolean` | `false` | - |
|
||||
| label-position | 文本位置，可选值为 `left` | `String` | `right` | 1.1.11 |
|
||||
| checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.3 |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user