fix: picker support v-show

pull/6577/head
tangjinzhou 2023-05-17 22:53:02 +08:00
parent 429172b345
commit 5aad611d4c
4 changed files with 142 additions and 139 deletions

View File

@ -589,20 +589,6 @@ function Picker<DateType>() {
const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
return (
<PickerTrigger
visible={mergedOpen.value}
popupStyle={popupStyle}
prefixCls={prefixCls}
dropdownClassName={dropdownClassName}
dropdownAlign={dropdownAlign}
getPopupContainer={getPopupContainer}
transitionName={transitionName}
popupPlacement={popupPlacement}
direction={direction}
v-slots={{
popupElement: () => panel,
}}
>
<div
ref={containerRef}
class={classNames(prefixCls, attrs.class, {
@ -628,8 +614,32 @@ function Picker<DateType>() {
{suffixNode}
{clearNode}
</div>
</div>
<PickerTrigger
visible={mergedOpen.value}
popupStyle={popupStyle}
prefixCls={prefixCls}
dropdownClassName={dropdownClassName}
dropdownAlign={dropdownAlign}
getPopupContainer={getPopupContainer}
transitionName={transitionName}
popupPlacement={popupPlacement}
direction={direction}
v-slots={{
popupElement: () => panel,
}}
>
<div
style={{
pointerEvents: 'none',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
}}
></div>
</PickerTrigger>
</div>
);
};
},

View File

@ -1205,20 +1205,6 @@ function RangerPicker<DateType>() {
// ============================ Return =============================
return (
<PickerTrigger
visible={mergedOpen.value}
popupStyle={popupStyle}
prefixCls={prefixCls}
dropdownClassName={dropdownClassName}
dropdownAlign={dropdownAlign}
getPopupContainer={getPopupContainer}
transitionName={transitionName}
range
direction={direction}
v-slots={{
popupElement: () => rangePanel,
}}
>
<div
ref={containerRef}
class={classNames(prefixCls, `${prefixCls}-range`, attrs.class, {
@ -1296,8 +1282,32 @@ function RangerPicker<DateType>() {
/>
{suffixNode}
{clearNode}
</div>
<PickerTrigger
visible={mergedOpen.value}
popupStyle={popupStyle}
prefixCls={prefixCls}
dropdownClassName={dropdownClassName}
dropdownAlign={dropdownAlign}
getPopupContainer={getPopupContainer}
transitionName={transitionName}
range
direction={direction}
v-slots={{
popupElement: () => rangePanel,
}}
>
<div
style={{
pointerEvents: 'none',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
}}
></div>
</PickerTrigger>
</div>
);
};
},

View File

@ -701,8 +701,8 @@ export default defineComponent({
);
return (
<>
{portal}
{trigger}
{portal}
</>
);
},

View File

@ -1,22 +1,5 @@
import type { InjectionKey, Ref } from 'vue';
import { computed, inject, provide } from 'vue';
export interface TriggerContextProps {
setPortal: (val?: any) => void;
popPortal: boolean; // 将 portal 上传至父级元素渲染,不用考虑响应式
}
const TriggerContextKey: InjectionKey<TriggerContextProps> = Symbol('TriggerContextKey');
export const useProviderTrigger = () => {
let portal = null;
provide(TriggerContextKey, {
setPortal(val) {
portal = val;
},
popPortal: true,
});
return () => {
return portal;
};
};
export interface PortalContextProps {
shouldRender: Ref<boolean>;