chore(SubmitBar): extract render function

packages/vant-cli/site/common/index.js

@@ -4,9 +4,7 @@ function iframeReady(iframe, callback) {
     if (iframe.contentWindow.replacePath) {
       callback();
     } else {
-      setTimeout(() => {
+      setTimeout(interval, 50);
-        interval();
-      }, 50);
     }
   };
 

src/notify/index.js

@@ -42,7 +42,7 @@ function Notify(options) {
   instance.open(options);
   clearTimeout(timer);
 
-  if (options.duration && options.duration > 0) {
+  if (options.duration > 0) {
     timer = setTimeout(Notify.clear, options.duration);
   }
 

src/submit-bar/index.js

@@ -37,68 +37,76 @@ export default createComponent({
   emits: ['submit'],
 
   setup(props, { emit, slots }) {
-    return () => {
+    const renderText = () => {
-      const { tip, price, tipIcon } = props;
+      const {
+        price,
+        label,
+        currency,
+        textAlign,
+        suffixLabel,
+        decimalLength,
+      } = props;
 
-      function Text() {
+      if (typeof price === 'number') {
-        if (typeof price === 'number') {
+        const pricePair = (price / 100).toFixed(decimalLength).split('.');
-          const priceArr = (price / 100)
+        const decimal = decimalLength ? `.${pricePair[1]}` : '';
-            .toFixed(props.decimalLength)
-            .split('.');
-          const decimalStr = props.decimalLength ? `.${priceArr[1]}` : '';
-          return (
-            <div
-              style={{ textAlign: props.textAlign ? props.textAlign : '' }}
-              class={bem('text')}
-            >
-              <span>{props.label || t('label')}</span>
-              <span class={bem('price')}>
-                {props.currency}
-                <span class={bem('price', 'integer')}>{priceArr[0]}</span>
-                {decimalStr}
-              </span>
-              {props.suffixLabel && (
-                <span class={bem('suffix-label')}>{props.suffixLabel}</span>
-              )}
-            </div>
-          );
-        }
-      }
 
-      function Tip() {
+        return (
-        if (slots.tip || tip) {
+          <div class={bem('text')} style={{ textAlign }}>
-          return (
+            <span>{label || t('label')}</span>
-            <div class={bem('tip')}>
+            <span class={bem('price')}>
-              {tipIcon && <Icon class={bem('tip-icon')} name={tipIcon} />}
+              {currency}
-              {tip && <span class={bem('tip-text')}>{tip}</span>}
+              <span class={bem('price-integer')}>{pricePair[0]}</span>
-              {slots.tip && slots.tip()}
+              {decimal}
-            </div>
+            </span>
-          );
+            {suffixLabel && (
-        }
+              <span class={bem('suffix-label')}>{suffixLabel}</span>
-      }
+            )}
-
-      return (
-        <div class={bem({ unfit: !props.safeAreaInsetBottom })}>
-          {slots.top && slots.top()}
-          {Tip()}
-          <div class={bem('bar')}>
-            {slots.default && slots.default()}
-            {Text()}
-            <Button
-              round
-              class={bem('button', props.buttonType)}
-              type={props.buttonType}
-              color={props.buttonColor}
-              loading={props.loading}
-              disabled={props.disabled}
-              text={props.loading ? '' : props.buttonText}
-              onClick={() => {
-                emit('submit');
-              }}
-            />
           </div>
-        </div>
+        );
-      );
+      }
     };
+
+    const renderTip = () => {
+      const { tip, tipIcon } = props;
+      if (slots.tip || tip) {
+        return (
+          <div class={bem('tip')}>
+            {tipIcon && <Icon class={bem('tip-icon')} name={tipIcon} />}
+            {tip && <span class={bem('tip-text')}>{tip}</span>}
+            {slots.tip?.()}
+          </div>
+        );
+      }
+    };
+
+    const onClickButton = () => {
+      emit('submit');
+    };
+
+    const renderButton = () => (
+      <Button
+        round
+        type={props.buttonType}
+        text={props.buttonText}
+        class={bem('button', props.buttonType)}
+        color={props.buttonColor}
+        loading={props.loading}
+        disabled={props.disabled}
+        onClick={onClickButton}
+      />
+    );
+
+    return () => (
+      <div class={bem({ unfit: !props.safeAreaInsetBottom })}>
+        {slots.top?.()}
+        {renderTip()}
+        <div class={bem('bar')}>
+          {slots.default?.()}
+          {renderText()}
+          {renderButton()}
+        </div>
+      </div>
+    );
   },
 });

src/submit-bar/index.less

@@ -50,7 +50,7 @@
   }
 
   &__suffix-label {
-    margin-left: 5px;
+    margin-left: @padding-base;
     font-weight: @font-weight-bold;
   }
 
@@ -59,7 +59,7 @@
     font-weight: @font-weight-bold;
     font-size: @font-size-sm;
 
-    &--integer {
+    &-integer {
       font-size: @submit-bar-price-integer-font-size;
       font-family: @submit-bar-price-font-family;
     }