fix: picker support v-show
parent
429172b345
commit
5aad611d4c
|
@ -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>
|
||||
);
|
||||
};
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
},
|
||||
|
|
|
@ -701,8 +701,8 @@ export default defineComponent({
|
|||
);
|
||||
return (
|
||||
<>
|
||||
{portal}
|
||||
{trigger}
|
||||
{portal}
|
||||
</>
|
||||
);
|
||||
},
|
||||
|
|
|
@ -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>;
|
||||
|
|
Loading…
Reference in New Issue