diff --git a/src/dropdown-item/index.js b/src/dropdown-item/index.js index 0dc4812d3..a230be9db 100644 --- a/src/dropdown-item/index.js +++ b/src/dropdown-item/index.js @@ -5,8 +5,8 @@ import { createNamespace } from '../utils'; import { DROPDOWN_KEY } from '../dropdown-menu'; // Composition -import { useParent } from '../composition/use-parent'; import { useExpose } from '../composition/use-expose'; +import { useParent } from '../composition/use-relation'; // Components import Cell from '../cell'; @@ -41,41 +41,7 @@ export default createComponent({ showWrapper: false, }); - const renderTitle = () => { - if (slots.title) { - return slots.title(); - } - - if (props.title) { - return props.title; - } - - const match = props.options.filter( - (option) => option.value === props.modelValue - ); - - return match.length ? match[0].text : ''; - }; - - const toggle = (show = !state.showPopup, options = {}) => { - if (show === state.showPopup) { - return; - } - - state.showPopup = show; - state.transition = !options.immediate; - - if (show) { - state.showWrapper = true; - } - }; - - const { parent } = useParent(DROPDOWN_KEY, { - props, - state, - toggle, - renderTitle, - }); + const { parent } = useParent(DROPDOWN_KEY); const createEmitter = (eventName) => () => emit(eventName); const onOpen = createEmitter('open'); @@ -94,6 +60,35 @@ export default createComponent({ } }; + const toggle = (show = !state.showPopup, options = {}) => { + if (show === state.showPopup) { + return; + } + + state.showPopup = show; + state.transition = !options.immediate; + + if (show) { + state.showWrapper = true; + } + }; + + const renderTitle = () => { + if (slots.title) { + return slots.title(); + } + + if (props.title) { + return props.title; + } + + const match = props.options.filter( + (option) => option.value === props.modelValue + ); + + return match.length ? match[0].text : ''; + }; + const renderOption = (option) => { const { activeColor } = parent.props; const active = option.value === props.modelValue; @@ -169,7 +164,7 @@ export default createComponent({ ); }; - useExpose({ toggle }); + useExpose({ state, toggle, renderTitle }); return () => { if (props.teleport) { diff --git a/src/dropdown-menu/index.js b/src/dropdown-menu/index.js index 6c4af2cbb..e9b47b842 100644 --- a/src/dropdown-menu/index.js +++ b/src/dropdown-menu/index.js @@ -1,4 +1,4 @@ -import { ref, provide, reactive, computed } from 'vue'; +import { ref, computed } from 'vue'; // Utils import { createNamespace, isDef } from '../utils'; @@ -6,6 +6,7 @@ import { createNamespace, isDef } from '../utils'; // Composition import { useClickAway, useScrollParent, useEventListener } from '@vant/use'; import { useRect } from '../composition/use-rect'; +import { useChildren } from '../composition/use-relation'; const [createComponent, bem] = createNamespace('dropdown-menu'); @@ -34,11 +35,11 @@ export default createComponent({ }, setup(props, { slots }) { + const root = ref(); const offset = ref(0); const barRef = ref(); - const root = ref(); - const children = reactive([]); + const { children, linkChildren } = useChildren(DROPDOWN_KEY); const scrollParent = useScrollParent(root); const opened = computed(() => @@ -89,7 +90,7 @@ export default createComponent({ const renderTitle = (item, index) => { const { showPopup } = item.state; - const { disabled, titleClass } = item.props; + const { disabled, titleClass } = item; return (