feat: migrate SubmitBar component

components.js

@@ -76,4 +76,5 @@ module.exports = [
   'coupon',
   'coupon-list',
   'coupon-cell',
+  'submit-bar',
 ];

src/submit-bar/index.js

@@ -0,0 +1,104 @@
+import { createNamespace } from '../utils';
+import Icon from '../icon';
+import Button from '../button';
+
+const [createComponent, bem, t] = createNamespace('submit-bar');
+
+export default createComponent({
+  props: {
+    tip: String,
+    label: String,
+    price: Number,
+    tipIcon: String,
+    loading: Boolean,
+    disabled: Boolean,
+    textAlign: String,
+    buttonText: String,
+    buttonColor: String,
+    suffixLabel: String,
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: true,
+    },
+    decimalLength: {
+      type: [Number, String],
+      default: 2,
+    },
+    currency: {
+      type: String,
+      default: '¥',
+    },
+    buttonType: {
+      type: String,
+      default: 'danger',
+    },
+  },
+
+  emits: ['submit'],
+
+  setup(props, { emit, slots }) {
+    return () => {
+      const { tip, price, tipIcon } = props;
+
+      function Text() {
+        if (typeof price === 'number') {
+          const priceArr = (price / 100)
+            .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() {
+        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 && slots.tip()}
+            </div>
+          );
+        }
+      }
+
+      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>
+      );
+    };
+  },
+});

src/submit-bar/index.tsx

@@ -1,133 +0,0 @@
-// Utils
-import { createNamespace } from '../utils';
-import { emit, inherit } from '../utils/functional';
-
-// Components
-import Icon from '../icon';
-import Button, { ButtonType } from '../button';
-
-// Types
-import { CreateElement, RenderContext } from 'vue/types';
-import { ScopedSlot, DefaultSlots } from '../utils/types';
-
-export type SubmitBarProps = {
-  tip?: string;
-  tipIcon?: string;
-  label?: string;
-  price?: number;
-  loading?: boolean;
-  currency: string;
-  disabled?: boolean;
-  buttonType: ButtonType;
-  buttonText?: string;
-  buttonColor?: string;
-  suffixLabel?: string;
-  decimalLength: number;
-  safeAreaInsetBottom?: boolean;
-  textAlign?: 'right' | 'left';
-};
-
-export type SubmitBarSlots = DefaultSlots & {
-  top?: ScopedSlot;
-  tip?: ScopedSlot;
-};
-
-const [createComponent, bem, t] = createNamespace('submit-bar');
-
-function SubmitBar(
-  h: CreateElement,
-  props: SubmitBarProps,
-  slots: SubmitBarSlots,
-  ctx: RenderContext<SubmitBarProps>
-) {
-  const { tip, price, tipIcon } = props;
-
-  function Text() {
-    if (typeof price === 'number') {
-      const priceArr = (price / 100).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() {
-    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 && slots.tip()}
-        </div>
-      );
-    }
-  }
-
-  return (
-    <div class={bem({ unfit: !props.safeAreaInsetBottom })} {...inherit(ctx)}>
-      {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(ctx, 'submit');
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-SubmitBar.props = {
-  tip: String,
-  label: String,
-  price: Number,
-  tipIcon: String,
-  loading: Boolean,
-  disabled: Boolean,
-  textAlign: String,
-  buttonText: String,
-  buttonColor: String,
-  suffixLabel: String,
-  safeAreaInsetBottom: {
-    type: Boolean,
-    default: true,
-  },
-  decimalLength: {
-    type: [Number, String],
-    default: 2,
-  },
-  currency: {
-    type: String,
-    default: '¥',
-  },
-  buttonType: {
-    type: String,
-    default: 'danger',
-  },
-};
-
-export default createComponent<SubmitBarProps, {}, SubmitBarSlots>(SubmitBar);

vant.config.js

@@ -351,10 +351,10 @@ module.exports = {
               //   path: 'goods-action',
               //   title: 'GoodsAction 商品导航',
               // },
-              // {
-              //   path: 'submit-bar',
-              //   title: 'SubmitBar 提交订单栏',
-              // },
+              {
+                path: 'submit-bar',
+                title: 'SubmitBar 提交订单栏',
+              },
               // {
               //   path: 'sku',
               //   title: 'Sku 商品规格',
@@ -685,10 +685,10 @@ module.exports = {
               //   path: 'goods-action',
               //   title: 'GoodsAction',
               // },
-              // {
-              //   path: 'submit-bar',
-              //   title: 'SubmitBar',
-              // },
+              {
+                path: 'submit-bar',
+                title: 'SubmitBar',
+              },
               // {
               //   path: 'sku',
               //   title: 'Sku',