[improvement] Checkbox: use relation mixin

This commit is contained in:
陈嘉涵 2019-05-07 10:20:14 +08:00
parent c1da495cb7
commit 444245d7e8
8 changed files with 24 additions and 36 deletions

View File

@ -1,8 +1,11 @@
import { use } from '../utils'; import { use } from '../utils';
import { ParentMixin } from '../mixins/relation';
const [sfc, bem] = use('checkbox-group'); const [sfc, bem] = use('checkbox-group');
export default sfc({ export default sfc({
mixins: [ParentMixin('vanCheckbox')],
props: { props: {
max: Number, max: Number,
value: Array, value: Array,

View File

@ -4,7 +4,7 @@ import { CheckboxMixin } from '../mixins/checkbox';
const [sfc, bem] = use('checkbox'); const [sfc, bem] = use('checkbox');
export default sfc({ export default sfc({
mixins: [CheckboxMixin('van-checkbox-group', bem)], mixins: [CheckboxMixin('vanCheckbox', bem)],
computed: { computed: {
checked: { checked: {

View File

@ -28,13 +28,13 @@ exports[`render coupon list 1`] = `
<div class="van-tabs van-tabs--line van-coupon-list__tab"> <div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap van-hairline--top-bottom"> <div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line"> <div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line" style="width: 120px; transform: translateX(-60px);"></div> <div class="van-tabs__line"></div>
<div class="van-tab van-tab--active"><span class="van-ellipsis">可使用优惠券 (6)</span></div> <div class="van-tab van-tab--active"><span class="van-ellipsis">可使用优惠券 (6)</span></div>
<div class="van-tab"><span class="van-ellipsis">不可使用优惠券 (2)</span></div> <div class="van-tab"><span class="van-ellipsis">不可使用优惠券 (2)</span></div>
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tab__pane" style=""> <div class="van-tab__pane">
<div class="van-coupon-list__list" style="height: 628px;"> <div class="van-coupon-list__list" style="height: 628px;">
<div class="van-coupon"> <div class="van-coupon">
<div class="van-coupon__content"> <div class="van-coupon__content">

View File

@ -2,10 +2,10 @@
* Common part of Checkbox & Radio * Common part of Checkbox & Radio
*/ */
import Icon from '../icon'; import Icon from '../icon';
import { FindParentMixin } from './find-parent'; import { ChildrenMixin } from './relation';
export const CheckboxMixin = (parent, bem) => ({ export const CheckboxMixin = (parent, bem) => ({
mixins: [FindParentMixin], mixins: [ChildrenMixin(parent)],
props: { props: {
name: null, name: null,
@ -20,10 +20,6 @@ export const CheckboxMixin = (parent, bem) => ({
} }
}, },
created() {
this.findParent(parent);
},
computed: { computed: {
isDisabled() { isDisabled() {
return (this.parent && this.parent.disabled) || this.disabled; return (this.parent && this.parent.disabled) || this.disabled;

View File

@ -1,24 +0,0 @@
/**
* find parent component by name
*/
export const FindParentMixin = {
data() {
return {
parent: null
};
},
methods: {
findParent(name) {
let parent = this.$parent;
while (parent) {
if (parent.$options.name === name) {
this.parent = parent;
break;
}
parent = parent.$parent;
}
}
}
};

View File

@ -1,6 +1,10 @@
export function ChildrenMixin(parent) { export function ChildrenMixin(parent) {
return { return {
inject: [parent], inject: {
[parent]: {
default: null
}
},
computed: { computed: {
parent() { parent() {
@ -18,11 +22,17 @@ export function ChildrenMixin(parent) {
}, },
beforeDestroy() { beforeDestroy() {
this.parent.children = this.parent.children.filter(item => item !== this); if (this.parent) {
this.parent.children = this.parent.children.filter(item => item !== this);
}
}, },
methods: { methods: {
bindRelation() { bindRelation() {
if (!this.parent) {
return;
}
const { children } = this.parent; const { children } = this.parent;
if (children.indexOf(this) === -1) { if (children.indexOf(this) === -1) {

View File

@ -1,8 +1,11 @@
import { use } from '../utils'; import { use } from '../utils';
import { ParentMixin } from '../mixins/relation';
const [sfc, bem] = use('radio-group'); const [sfc, bem] = use('radio-group');
export default sfc({ export default sfc({
mixins: [ParentMixin('vanRadio')],
props: { props: {
value: null, value: null,
disabled: Boolean disabled: Boolean

View File

@ -4,7 +4,7 @@ import { CheckboxMixin } from '../mixins/checkbox';
const [sfc, bem] = use('radio'); const [sfc, bem] = use('radio');
export default sfc({ export default sfc({
mixins: [CheckboxMixin('van-radio-group', bem)], mixins: [CheckboxMixin('vanRadio', bem)],
computed: { computed: {
currentValue: { currentValue: {