chore: add getZIndexStyle util (#8254)

src/dropdown-item/index.tsx

@@ -7,7 +7,7 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace, UnknownProp } from '../utils';
+import { createNamespace, getZIndexStyle, UnknownProp } from '../utils';
 import { DROPDOWN_KEY, DropdownMenuProvide } from '../dropdown-menu';
 
 // Composables
@@ -153,9 +153,7 @@ export default createComponent({
         closeOnClickOverlay,
       } = parent.props;
 
-      const style: CSSProperties = {
+      const style: CSSProperties = getZIndexStyle(zIndex);
-        zIndex: zIndex !== undefined ? +zIndex : undefined,
-      };
 
       if (direction === 'down') {
         style.top = `${offset.value}px`;

src/dropdown-menu/index.tsx

@@ -70,11 +70,11 @@ export default createComponent({
       children.some((item) => item.state.showWrapper)
     );
 
-    const barStyle = computed(() => {
+    const barStyle = computed<CSSProperties | undefined>(() => {
       if (opened.value && isDef(props.zIndex)) {
         return {
           zIndex: +props.zIndex + 1,
-        } as CSSProperties;
+        };
       }
     });
 

src/index-anchor/index.tsx

@@ -1,7 +1,7 @@
 import { ref, reactive, computed, CSSProperties } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, getZIndexStyle } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 import { INDEX_BAR_KEY, IndexBarProvide } from '../index-bar';
 import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll';
@@ -40,17 +40,19 @@ export default createComponent({
 
     const isSticky = () => state.active && parent.props.sticky;
 
-    const anchorStyle = computed(() => {
+    const anchorStyle = computed<CSSProperties | undefined>(() => {
       const { zIndex, highlightColor } = parent.props;
 
       if (isSticky()) {
         return {
-          zIndex: `${zIndex}`,
+          ...getZIndexStyle(zIndex),
-          left: state.left ? `${state.left}px` : null,
+          left: state.left ? `${state.left}px` : undefined,
-          width: state.width ? `${state.width}px` : null,
+          width: state.width ? `${state.width}px` : undefined,
-          transform: state.top ? `translate3d(0, ${state.top}px, 0)` : null,
+          transform: state.top
+            ? `translate3d(0, ${state.top}px, 0)`
+            : undefined,
           color: highlightColor,
-        } as CSSProperties;
+        };
       }
     });
 

src/index-bar/index.tsx

@@ -85,19 +85,19 @@ export default createComponent({
 
     linkChildren({ props });
 
-    const sidebarStyle = computed(() => {
+    const sidebarStyle = computed<CSSProperties | undefined>(() => {
       if (isDef(props.zIndex)) {
         return {
           zIndex: +props.zIndex + 1,
-        } as CSSProperties;
+        };
       }
     });
 
-    const highlightStyle = computed(() => {
+    const highlightStyle = computed<CSSProperties | undefined>(() => {
       if (props.highlightColor) {
         return {
           color: props.highlightColor,
-        } as CSSProperties;
+        };
       }
     });
 

src/index-bar/test/__snapshots__/demo.spec.ts.snap

@@ -870,9 +870,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div>
           <div style="height: 0px;">
-            <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom"
+            <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom">
-                 style="z-index: undefined;"
-            >
               Z
             </div>
           </div>

src/index-bar/test/__snapshots__/index.spec.js.snap

@@ -300,9 +300,7 @@ exports[`should update active anchor after page scroll 2`] = `
   <div data-index="0"
        style="height: 10px;"
   >
-    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom"
+    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom">
-         style="z-index: undefined;"
-    >
       1
     </div>
   </div>
@@ -310,7 +308,7 @@ exports[`should update active anchor after page scroll 2`] = `
        style="height: 10px;"
   >
     <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom"
-         style="z-index: undefined; transform: translate3d(0, 10px, 0);"
+         style="transform: translate3d(0, 10px, 0);"
     >
       2
     </div>

src/nav-bar/index.tsx

@@ -1,7 +1,7 @@
 import { ref, CSSProperties } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, getZIndexStyle } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
 // Composables
@@ -58,9 +58,7 @@ export default createComponent({
 
     const renderNavBar = () => {
       const { title, fixed, border, zIndex } = props;
-      const style: CSSProperties = {
+      const style: CSSProperties = getZIndexStyle(zIndex);
-        zIndex: zIndex !== undefined ? +zIndex : undefined,
-      };
 
       const hasLeft = props.leftArrow || props.leftText || slots.left;
       const hasRight = props.rightText || slots.right;

src/number-keyboard/index.tsx

@@ -8,7 +8,7 @@ import {
   Transition,
   TeleportProps,
 } from 'vue';
-import { createNamespace, stopPropagation } from '../utils';
+import { createNamespace, getZIndexStyle, stopPropagation } from '../utils';
 import { useClickAway } from '@vant/use';
 import Key, { KeyType } from './Key';
 
@@ -263,9 +263,7 @@ export default createComponent({
           <div
             v-show={props.show}
             ref={root}
-            style={{
+            style={getZIndexStyle(props.zIndex)}
-              zIndex: props.zIndex !== undefined ? +props.zIndex : undefined,
-            }}
             class={bem({
               unfit: !props.safeAreaInsetBottom,
               'with-title': !!Title,

src/overlay/index.tsx

@@ -5,6 +5,7 @@ import {
   UnknownProp,
   preventDefault,
   createNamespace,
+  getZIndexStyle,
 } from '../utils';
 import { useLazyRender } from '../composables/use-lazy-render';
 
@@ -32,7 +33,7 @@ export default createComponent({
 
     const renderOverlay = lazyRender(() => {
       const style: CSSProperties = {
-        zIndex: props.zIndex !== undefined ? +props.zIndex : undefined,
+        ...getZIndexStyle(props.zIndex),
         ...props.customStyle,
       };
 

src/tabbar/index.tsx

@@ -1,7 +1,7 @@
 import { ref, PropType } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, getZIndexStyle } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { callInterceptor, Interceptor } from '../utils/interceptor';
 
@@ -69,7 +69,7 @@ export default createComponent({
       return (
         <div
           ref={root}
-          style={{ zIndex: zIndex !== undefined ? +zIndex : undefined }}
+          style={getZIndexStyle(zIndex)}
           class={[
             bem({ unfit: isUnfit(), fixed }),
             { [BORDER_TOP_BOTTOM]: border },

src/utils/format/unit.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'vue';
 import { isDef, inBrowser } from '../base';
 import { isNumeric } from '../validate/number';
 
@@ -9,7 +10,9 @@ export function addUnit(value?: string | number): string | undefined {
   return isNumeric(value) ? `${value}px` : String(value);
 }
 
-export function getSizeStyle(originSize?: string | number) {
+export function getSizeStyle(
+  originSize?: string | number
+): CSSProperties | undefined {
   if (isDef(originSize)) {
     const size = addUnit(originSize);
     return {
@@ -19,6 +22,14 @@ export function getSizeStyle(originSize?: string | number) {
   }
 }
 
+export function getZIndexStyle(zIndex?: string | number) {
+  const style: CSSProperties = {};
+  if (zIndex !== undefined) {
+    style.zIndex = +zIndex;
+  }
+  return style;
+}
+
 // cache
 let rootFontSize: number;