ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 10:44:59 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

[improvement] Checkbox: add checked-color prop (#2057)

Browse Source
This commit is contained in:
neverland
2018-11-08 22:58:55 +08:00
committed by GitHub
parent b5cdfc3ac5
commit f272f661b3
5 changed files with 82 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/checkbox/index.vue
View File

@@ -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);
}
}
}
}
});