diff --git a/packages/dropdown-item/index.js b/packages/dropdown-item/index.js index 97a09ac47..859c7f64b 100644 --- a/packages/dropdown-item/index.js +++ b/packages/dropdown-item/index.js @@ -2,34 +2,25 @@ import { use, isDef } from '../utils'; import Cell from '../cell'; import Icon from '../icon'; import Popup from '../popup'; +import { ChildrenMixin } from '../mixins/relation'; const [sfc, bem] = use('dropdown-item'); export default sfc({ + mixins: [ChildrenMixin('vanDropdownMenu')], + props: { value: null, title: String, options: Array }, - inject: ['vanDropdownMenu'], - data() { return { show: false }; }, - created() { - const { items } = this.vanDropdownMenu; - const index = this.vanDropdownMenu.slots().indexOf(this.$vnode); - items.splice(index === -1 ? items.length : index, 0, this); - }, - - beforeDestroy() { - this.vanDropdownMenu.items = this.vanDropdownMenu.items.filter(item => item !== this); - }, - computed: { displayTitle() { if (this.title) { @@ -48,7 +39,7 @@ export default sfc({ }, render(h) { - const { top, zIndex, activeColor } = this.vanDropdownMenu; + const { top, zIndex, activeColor } = this.parent; const Options = this.options.map(option => { const active = option.value === this.value; diff --git a/packages/dropdown-menu/index.js b/packages/dropdown-menu/index.js index 4f2761f34..23592ca1d 100644 --- a/packages/dropdown-menu/index.js +++ b/packages/dropdown-menu/index.js @@ -1,9 +1,12 @@ import { use } from '../utils'; import { BLUE } from '../utils/color'; +import { ParentMixin } from '../mixins/relation'; const [sfc, bem] = use('dropdown-menu'); export default sfc({ + mixins: [ParentMixin('vanDropdownMenu')], + props: { zIndex: { type: Number, @@ -15,16 +18,9 @@ export default sfc({ } }, - provide() { - return { - vanDropdownMenu: this - }; - }, - data() { return { - top: 0, - items: [] + top: 0 }; }, @@ -34,7 +30,7 @@ export default sfc({ const rect = menu.getBoundingClientRect(); this.top = rect.y + rect.height; - this.items.forEach((item, index) => { + this.children.forEach((item, index) => { if (index === active) { item.toggle(); } else { @@ -45,7 +41,7 @@ export default sfc({ }, render(h) { - const Titles = this.items.map((item, index) => ( + const Titles = this.children.map((item, index) => (
{ diff --git a/packages/mixins/relation.js b/packages/mixins/relation.js new file mode 100644 index 000000000..0ff18d25e --- /dev/null +++ b/packages/mixins/relation.js @@ -0,0 +1,37 @@ +export function ChildrenMixin(parent) { + return { + inject: [parent], + + computed: { + parent() { + return this[parent]; + } + }, + + created() { + const { children } = this.parent; + const index = this.parent.slots().indexOf(this.$vnode); + children.splice(index === -1 ? children.length : index, 0, this); + }, + + beforeDestroy() { + this.parent.children = this.parent.children.filter(item => item !== this); + } + }; +} + +export function ParentMixin(parent) { + return { + provide() { + return { + [parent]: this + }; + }, + + data() { + return { + children: [] + }; + } + }; +}