chore(Overlay): use tsx

This commit is contained in:
chenjiahan 2020-10-09 20:56:32 +08:00
parent dffa11959a
commit 6319d44423
3 changed files with 9 additions and 8 deletions

View File

@ -1,6 +1,6 @@
import { ref, watch, WatchSource, VNode } from 'vue'; import { ref, watch, WatchSource } from 'vue';
export function useLazyRender(show: WatchSource<boolean>) { export function useLazyRender(show: WatchSource<boolean | undefined>) {
const inited = ref(false); const inited = ref(false);
watch( watch(
@ -13,5 +13,5 @@ export function useLazyRender(show: WatchSource<boolean>) {
{ immediate: true } { immediate: true }
); );
return (render: () => VNode) => () => (inited.value ? render() : null); return (render: () => JSX.Element) => () => (inited.value ? render() : null);
} }

View File

@ -67,6 +67,7 @@ export default {
width: 120px; width: 120px;
height: 120px; height: 120px;
background-color: @white; background-color: @white;
border-radius: 4px;
} }
} }
</style> </style>

View File

@ -1,4 +1,4 @@
import { Transition } from 'vue'; import { PropType, Transition, CSSProperties } from 'vue';
import { noop, isDef, preventDefault, createNamespace } from '../utils'; import { noop, isDef, preventDefault, createNamespace } from '../utils';
import { useLazyRender } from '../composition/use-lazy-render'; import { useLazyRender } from '../composition/use-lazy-render';
@ -10,7 +10,7 @@ export default createComponent({
zIndex: [Number, String], zIndex: [Number, String],
duration: [Number, String], duration: [Number, String],
className: null, className: null,
customStyle: Object, customStyle: Object as PropType<CSSProperties>,
lockScroll: { lockScroll: {
type: Boolean, type: Boolean,
default: true, default: true,
@ -20,13 +20,13 @@ export default createComponent({
setup(props, { slots }) { setup(props, { slots }) {
const lazyRender = useLazyRender(() => props.show); const lazyRender = useLazyRender(() => props.show);
const preventTouchMove = (event) => { const preventTouchMove = (event: TouchEvent) => {
preventDefault(event, true); preventDefault(event, true);
}; };
const renderOverlay = lazyRender(() => { const renderOverlay = lazyRender(() => {
const style = { const style: CSSProperties = {
zIndex: props.zIndex, zIndex: props.zIndex !== undefined ? +props.zIndex : undefined,
...props.customStyle, ...props.customStyle,
}; };