chore(NavBar): use tsx

src/composition/use-placeholder.tsx

@@ -1,11 +1,11 @@
 import { useHeight } from './use-height';
-import type { Ref, VNode } from 'vue';
+import type { Ref } from 'vue';
 import type { BEM } from '../utils/create/bem';
 
 export function usePlaceholder(contentRef: Ref<Element>, bem: BEM) {
   const height = useHeight(contentRef);
 
-  return (renderContent: () => VNode) => (
+  return (renderContent: () => JSX.Element) => (
     <div
       class={bem('placeholder')}
       style={{ height: height.value ? `${height.value}px` : undefined }}

src/nav-bar/index.tsx

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref, CSSProperties } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -33,11 +33,11 @@ export default createComponent({
     const navBarRef = ref();
     const renderPlaceholder = usePlaceholder(navBarRef, bem);
 
-    const onClickLeft = (event) => {
+    const onClickLeft = (event: MouseEvent) => {
       emit('click-left', event);
     };
 
-    const onClickRight = (event) => {
+    const onClickRight = (event: MouseEvent) => {
       emit('click-right', event);
     };
 
@@ -64,10 +64,14 @@ export default createComponent({
 
     const renderNavBar = () => {
       const { title, fixed, border, zIndex } = props;
+      const style: CSSProperties = {
+        zIndex: zIndex !== undefined ? +zIndex : undefined,
+      };
+
       return (
         <div
           ref={navBarRef}
-          style={{ zIndex }}
+          style={style}
           class={[bem({ fixed }), { [BORDER_BOTTOM]: border }]}
         >
           <div class={bem('left')} onClick={onClickLeft}>