perf: portal
parent
70f9b02f51
commit
f32cbaf306
|
@ -1,48 +1,38 @@
|
|||
import PropTypes from './vue-types';
|
||||
import { defineComponent, nextTick, Teleport } from 'vue';
|
||||
import {
|
||||
defineComponent,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
onUpdated,
|
||||
ref,
|
||||
Teleport,
|
||||
} from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Portal',
|
||||
props: {
|
||||
getContainer: PropTypes.func.isRequired,
|
||||
children: PropTypes.any.isRequired,
|
||||
didUpdate: PropTypes.func,
|
||||
},
|
||||
data() {
|
||||
this._container = null;
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.createContainer();
|
||||
},
|
||||
updated() {
|
||||
const { didUpdate } = this.$props;
|
||||
if (didUpdate) {
|
||||
setup(props, { slots }) {
|
||||
const container = ref();
|
||||
|
||||
onMounted(() => {
|
||||
container.value = props.getContainer();
|
||||
});
|
||||
onUpdated(() => {
|
||||
nextTick(() => {
|
||||
didUpdate(this.$props);
|
||||
props.didUpdate?.(props);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.removeContainer();
|
||||
},
|
||||
methods: {
|
||||
createContainer() {
|
||||
this._container = this.$props.getContainer();
|
||||
this.$forceUpdate();
|
||||
},
|
||||
removeContainer() {
|
||||
if (this._container && this._container.parentNode) {
|
||||
this._container.parentNode.removeChild(this._container);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
if (this._container) {
|
||||
return <Teleport to={this._container}>{this.$props.children}</Teleport>;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
container.value &&
|
||||
container.value.parentNode &&
|
||||
container.value.parentNode.removeChild(container.value);
|
||||
});
|
||||
return () => {
|
||||
return container.value ? <Teleport to={container.value}>{slots.default?.()}</Teleport> : null;
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
@ -141,8 +141,8 @@ export default defineComponent({
|
|||
portal = (
|
||||
<Portal
|
||||
getContainer={this.getDomContainer}
|
||||
children={children(childProps)}
|
||||
ref={this.savePortal}
|
||||
v-slots={{ default: () => children(childProps) }}
|
||||
></Portal>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -35,9 +35,11 @@ const DialogWrap = defineComponent({
|
|||
visible={visible}
|
||||
forceRender={forceRender}
|
||||
getContainer={getContainer}
|
||||
children={childProps => {
|
||||
dialogProps = { ...dialogProps, ...childProps };
|
||||
return <Dialog {...dialogProps}>{getSlot(this)}</Dialog>;
|
||||
v-slots={{
|
||||
default: childProps => {
|
||||
dialogProps = { ...dialogProps, ...childProps };
|
||||
return <Dialog {...dialogProps}>{getSlot(this)}</Dialog>;
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -147,22 +147,20 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
|
|||
watch(
|
||||
() => props.open,
|
||||
() => {
|
||||
if (!props.multiple && props.open && props.values.size === 1) {
|
||||
const value = Array.from(props.values)[0];
|
||||
const index = memoFlattenOptions.value.findIndex(({ data }) => data.value === value);
|
||||
setActive(index);
|
||||
nextTick(() => {
|
||||
nextTick(() => {
|
||||
if (!props.multiple && props.open && props.values.size === 1) {
|
||||
const value = Array.from(props.values)[0];
|
||||
const index = memoFlattenOptions.value.findIndex(({ data }) => data.value === value);
|
||||
setActive(index);
|
||||
scrollIntoView(index);
|
||||
});
|
||||
}
|
||||
// Force trigger scrollbar visible when open
|
||||
if (props.open) {
|
||||
nextTick(() => {
|
||||
}
|
||||
// Force trigger scrollbar visible when open
|
||||
if (props.open) {
|
||||
listRef.current?.scrollTo(undefined);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
{ immediate: true, flush: 'post' },
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// ========================== Values ==========================
|
||||
|
|
|
@ -131,6 +131,7 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
|
|||
[`${dropdownPrefixCls}-empty`]: empty,
|
||||
})}
|
||||
popupStyle={popupStyle}
|
||||
// destroyPopupOnHide
|
||||
// getTriggerDOMNode={getTriggerDOMNode}
|
||||
>
|
||||
{getSlot(this)[0]}
|
||||
|
|
|
@ -648,7 +648,7 @@ export default defineComponent({
|
|||
portal = (
|
||||
<Portal
|
||||
key="portal"
|
||||
children={this.getComponent()}
|
||||
v-slots={{ default: this.getComponent }}
|
||||
getContainer={this.getContainer}
|
||||
didUpdate={this.handlePortalUpdate}
|
||||
></Portal>
|
||||
|
|
2
v2-doc
2
v2-doc
|
@ -1 +1 @@
|
|||
Subproject commit 2924233b60d3645d3df5e86e8bec912d3a13496d
|
||||
Subproject commit 6b53258cc2b3709e070d340714e992760e660e67
|
Loading…
Reference in New Issue