chore(Overlay): use tsx

src/composition/use-lazy-render.ts

@@ -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);
 
   watch(
@@ -13,5 +13,5 @@ export function useLazyRender(show: WatchSource<boolean>) {
     { immediate: true }
   );
 
-  return (render: () => VNode) => () => (inited.value ? render() : null);
+  return (render: () => JSX.Element) => () => (inited.value ? render() : null);
 }

src/overlay/demo/index.vue

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

src/overlay/index.tsx

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