chore: optimize some code (#9669)

packages/vant/src/action-sheet/ActionSheet.tsx

@@ -1,10 +1,11 @@
-import { nextTick, PropType, defineComponent } from 'vue';
+import { nextTick, defineComponent } from 'vue';
 
 // Utils
 import {
   pick,
   extend,
   truthProp,
+  makeArrayProp,
   makeStringProp,
   createNamespace,
 } from '../utils';
@@ -40,7 +41,7 @@ export default defineComponent({
   props: extend({}, popupSharedProps, {
     title: String,
     round: truthProp,
-    actions: Array as PropType<ActionSheetAction[]>,
+    actions: makeArrayProp<ActionSheetAction>(),
     closeIcon: makeStringProp('cross'),
     closeable: truthProp,
     cancelText: String,
@@ -138,12 +139,6 @@ export default defineComponent({
       }
     };
 
-    const renderOptions = () => {
-      if (props.actions) {
-        return props.actions.map(renderOption);
-      }
-    };
-
     return () => (
       <Popup
         class={bem()}
@@ -154,7 +149,7 @@ export default defineComponent({
         {renderHeader()}
         {renderDescription()}
         <div class={bem('content')}>
-          {renderOptions()}
+          {props.actions.map(renderOption)}
           {slots.default?.()}
         </div>
         {renderCancel()}

packages/vant/src/cascader/Cascader.tsx

@@ -80,9 +80,7 @@ export default defineComponent({
       options: CascaderOption[],
       value: string | number
     ): CascaderOption[] | undefined => {
-      for (let i = 0; i < options.length; i++) {
+      for (const option of options) {
-        const option = options[i];
-
         if (option[valueKey] === value) {
           return [option];
         }

packages/vant/src/image-preview/ImagePreview.tsx

@@ -38,6 +38,13 @@ import { ImagePreviewScaleEventParams } from './types';
 
 const [name, bem] = createNamespace('image-preview');
 
+const popupProps = [
+  'show',
+  'transition',
+  'overlayStyle',
+  'closeOnPopstate',
+] as const;
+
 const props = {
   show: Boolean,
   loop: truthProp,
@@ -207,12 +214,7 @@ export default defineComponent({
         overlayClass={bem('overlay')}
         onClosed={onClosed}
         onUpdate:show={updateShow}
-        {...pick(props, [
+        {...pick(props, popupProps)}
-          'show',
-          'transition',
-          'overlayStyle',
-          'closeOnPopstate',
-        ])}
       >
         {renderClose()}
         {renderImages()}

packages/vant/src/image/Image.tsx

@@ -1,5 +1,6 @@
 import {
   ref,
+  Slot,
   watch,
   computed,
   PropType,
@@ -94,31 +95,15 @@ export default defineComponent({
       emit('error', event);
     };
 
-    const renderLoadingIcon = () => {
+    const renderIcon = (name: string, className: unknown, slot?: Slot) => {
-      if (slots.loading) {
+      if (slot) {
-        return slots.loading();
+        return slot();
       }
-
       return (
         <Icon
+          name={name}
           size={props.iconSize}
-          name={props.loadingIcon}
+          class={className}
-          class={bem('loading-icon')}
-          classPrefix={props.iconPrefix}
-        />
-      );
-    };
-
-    const renderErrorIcon = () => {
-      if (slots.error) {
-        return slots.error();
-      }
-
-      return (
-        <Icon
-          size={props.iconSize}
-          name={props.errorIcon}
-          class={bem('error-icon')}
           classPrefix={props.iconPrefix}
         />
       );
@@ -126,10 +111,18 @@ export default defineComponent({
 
     const renderPlaceholder = () => {
       if (loading.value && props.showLoading) {
-        return <div class={bem('loading')}>{renderLoadingIcon()}</div>;
+        return (
+          <div class={bem('loading')}>
+            {renderIcon(props.loadingIcon, bem('loading-icon'), slots.loading)}
+          </div>
+        );
       }
       if (error.value && props.showError) {
-        return <div class={bem('error')}>{renderErrorIcon()}</div>;
+        return (
+          <div class={bem('error')}>
+            {renderIcon(props.errorIcon, bem('error-icon'), slots.error)}
+          </div>
+        );
       }
     };
 

packages/vant/src/index-bar/IndexBar.tsx

@@ -100,16 +100,6 @@ export default defineComponent({
       }
     });
 
-    const getScrollerRect = () => {
-      if ('getBoundingClientRect' in scrollParent.value!) {
-        return useRect(scrollParent);
-      }
-      return {
-        top: 0,
-        left: 0,
-      };
-    };
-
     const getActiveAnchor = (
       scrollTop: number,
       rects: Array<{ top: number; height: number }>
@@ -133,7 +123,7 @@ export default defineComponent({
 
       const { sticky, indexList } = props;
       const scrollTop = getScrollTop(scrollParent.value!);
-      const scrollParentRect = getScrollerRect();
+      const scrollParentRect = useRect(scrollParent);
 
       const rects = children.map((item) =>
         item.getRect(scrollParent.value, scrollParentRect)

packages/vant/src/toast/Toast.tsx

@@ -9,6 +9,7 @@ import {
 
 // Utils
 import {
+  pick,
   isDef,
   unknownProp,
   numericProp,
@@ -28,6 +29,15 @@ import type { ToastType, ToastPosition } from './types';
 
 const [name, bem] = createNamespace('toast');
 
+const popupProps = [
+  'show',
+  'overlay',
+  'transition',
+  'overlayClass',
+  'overlayStyle',
+  'closeOnClickOverlay',
+] as const;
+
 export default defineComponent({
   name,
 
@@ -128,20 +138,15 @@ export default defineComponent({
 
     return () => (
       <Popup
-        show={props.show}
         class={[
           bem([props.position, { [props.type]: !props.icon }]),
           props.className,
         ]}
-        overlay={props.overlay}
         lockScroll={false}
-        transition={props.transition}
-        overlayClass={props.overlayClass}
-        overlayStyle={props.overlayStyle}
-        closeOnClickOverlay={props.closeOnClickOverlay}
         onClick={onClick}
         onClosed={clearTimer}
         onUpdate:show={updateShow}
+        {...pick(props, popupProps)}
       >
         {renderIcon()}
         {renderMessage()}