blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore(DropdownMenu): use relation

Browse Source
This commit is contained in:
chenjiahan 2020-09-25 14:16:19 +08:00
parent bcd8f4515b
commit 3d15f7e356
2 changed files with 38 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/dropdown-item/index.js
View File

@ -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) {

13
src/dropdown-menu/index.js
View File

@ -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 (
<div
@ -118,10 +119,8 @@ export default createComponent({
);
};
provide(DROPDOWN_KEY, { props, offset, children });
linkChildren({ props, offset });
useClickAway(root, onClickAway);
useEventListener('scroll', onScroll, { target: scrollParent });
return () => (