Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 7x 7x 7x | <template>
<div :class="$style.root">
<slot></slot>
</div>
</template>
<script>
import MEmitter from '../m-emitter.vue';
export default {
name: 'm-child',
parentName: 'm-parent',
groupName: 'm-group',
mixins: [MEmitter],
data() {
return { parentVM: undefined, groupVM: undefined, isCreated: false };
},
created() {
this.isCreated = true;
!this.parentVM
&& this.$contact(this.$options.parentName, (parentVM) => {
this.parentVM = parentVM;
if(this.$options.parentName === 'u-carousel') {
parentVM.itemVMs.push(this);
// 动态子节点在前，静态子节点灾后
parentVM.itemVMs.sort((a, b) => {
if(a.$attrs.dataSource) {
if(b.$attrs.dataSource)
return a.$attrs.index - b.$attrs.index;
else
return -1;
} else {
if(b.$attrs.dataSource)
return 1;
else {
const indexA = parentVM.$slots.default ? parentVM.$slots.default.indexOf(a.$vnode) : -1;
const indexB = parentVM.$slots.default ? parentVM.$slots.default.indexOf(b.$vnode) : -1;
return indexA - indexB;
}
}
});
return;
}
if (!parentVM.$slots.default || !parentVM.$slots.default.length) {
parentVM.itemVMs.push(this);
return;
}
const defaultSlots = parentVM.$slots.default;
const currentSlotIndex = defaultSlots.indexOf(this.$vnode);
if (currentSlotIndex === -1) {
parentVM.itemVMs.push(this);
return;
}
// 根据 slot.default 位置，进行插入
const index = parentVM.itemVMs.findIndex((itemVM) => {
const slotIndex = defaultSlots.indexOf(itemVM.$vnode);
return slotIndex > currentSlotIndex;
});
if (index !== -1) {
parentVM.itemVMs.splice(index, 0, this);
} else {
parentVM.itemVMs.push(this);
}
});
!this.groupVM
&& this.$contact(this.$options.groupName, (groupVM) => {
this.groupVM = groupVM;
groupVM.itemVMs.push(this);
});
},
destroyed() {
this.isCreated = false;
this.$contact(this.$options.parentName, (parentVM) => {
parentVM.itemVMs.splice(parentVM.itemVMs.indexOf(this), 1);
this.parentVM = undefined;
});
this.$contact(this.$options.groupName, (groupVM) => {
groupVM.itemVMs.splice(groupVM.itemVMs.indexOf(this), 1);
this.groupVM = undefined;
});
},
};
</script>
<style module>
.root {
display: inline-block;
padding: 4px 12px;
}
</style>
|