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

fix(Popover): allow to dynamically set offset prop (#10840)

Browse Source
This commit is contained in:
neverland 2022-07-23 18:26:15 +08:00 committed by GitHub
parent c628a66770
commit 794fd029a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/vant/src/popover/Popover.tsx
View File

@ -93,9 +93,7 @@ export default defineComponent({
const wrapperRef = ref<HTMLElement>(); const wrapperRef = ref<HTMLElement>();
const popoverRef = ref<ComponentInstance>(); const popoverRef = ref<ComponentInstance>();
const createPopperInstance = () => { const getPopoverOptions = () => ({
if (wrapperRef.value && popoverRef.value) {
return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, {
placement: props.placement, placement: props.placement,
modifiers: [ modifiers: [
{ {
@ -112,6 +110,14 @@ export default defineComponent({
}), }),
], ],
}); });
const createPopperInstance = () => {
if (wrapperRef.value && popoverRef.value) {
return createPopper(
wrapperRef.value,
popoverRef.value.popupRef.value,
getPopoverOptions()
);
} }
return null; return null;
}; };
@ -125,9 +131,7 @@ export default defineComponent({
if (!popper) { if (!popper) {
popper = createPopperInstance(); popper = createPopperInstance();
} else { } else {
popper.setOptions({ popper.setOptions(getPopoverOptions());
placement: props.placement,
});
} }
}); });
}; };
@ -207,7 +211,7 @@ export default defineComponent({
} }
}); });
watch(() => [props.show, props.placement], updateLocation); watch(() => [props.show, props.offset, props.placement], updateLocation);
useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' }); useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' });

13
packages/vant/src/popover/demo/index.vue
View File

@ -85,6 +85,17 @@ const show = ref({
const showPicker = ref(false); const showPicker = ref(false);
const currentPlacement = ref<PopoverPlacement>('top'); const currentPlacement = ref<PopoverPlacement>('top');
const onClickChoosePlacement = () => {
showPicker.value = true;
setTimeout(() => {
show.value = {
...show.value,
placement: true,
};
}, 300);
};
const onPickerChange = (value: PopoverPlacement) => { const onPickerChange = (value: PopoverPlacement) => {
setTimeout(() => { setTimeout(() => {
show.value.placement = true; show.value.placement = true;
@ -129,7 +140,7 @@ const onSelect = (action: { text: string }) => Toast(action.text);
readonly readonly
name="picker" name="picker"
:label="t('choosePlacement')" :label="t('choosePlacement')"
@click="showPicker = true" @click="onClickChoosePlacement"
/> />
<van-popup <van-popup