mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Checkbox: use relation mixin
This commit is contained in:
parent
c1da495cb7
commit
444245d7e8
@ -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,
|
||||||
|
@ -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: {
|
||||||
|
@ -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">
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
@ -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) {
|
||||||
|
@ -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
|
||||||
|
@ -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: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user