blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 18:36:51 +08:00
Code Issues Projects Releases Wiki Activity

perf(Overlay): lazy render

Browse Source
This commit is contained in:
chenjiahan 2020-09-14 20:46:13 +08:00
parent d783fcf2f4
commit 46e158fa01
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/overlay/index.js
View File

@ -1,6 +1,7 @@
import { Transition } from 'vue'; import { Transition } from 'vue';
import { createNamespace, isDef, noop } from '../utils'; import { createNamespace, isDef, noop } from '../utils';
import { preventDefault } from '../utils/dom/event'; import { preventDefault } from '../utils/dom/event';
import { useLazyRender } from '../composition/use-lazy-render';
const [createComponent, bem] = createNamespace('overlay'); const [createComponent, bem] = createNamespace('overlay');
@ -22,7 +23,9 @@ export default createComponent({
}, },
setup(props, { slots }) { setup(props, { slots }) {
return function () { const lazyRender = useLazyRender(() => props.show);
const renderOverlay = lazyRender(() => {
const style = { const style = {
zIndex: props.zIndex, zIndex: props.zIndex,
...props.customStyle, ...props.customStyle,
@ -33,17 +36,17 @@ export default createComponent({
} }
return ( return (
<Transition name="van-fade"> <div
<div vShow={props.show}
vShow={props.show} style={style}
style={style} class={[bem(), props.className]}
class={[bem(), props.className]} onTouchmove={props.lockScroll ? preventTouchMove : noop}
onTouchmove={props.lockScroll ? preventTouchMove : noop} >
> {slots.default?.()}
{slots.default?.()} </div>
</div>
</Transition>
); );
}; });
return () => <Transition name="van-fade">{renderOverlay()}</Transition>;
}, },
}); });