chore: extract getSizeStyle

src/circle/index.js

@@ -1,5 +1,5 @@
 import { watch, computed } from 'vue';
-import { createNamespace, isObject, addUnit } from '../utils';
+import { createNamespace, isObject, getSizeStyle } from '../utils';
 import { raf, cancelRaf } from '../utils/dom/raf';
 import { BLUE, WHITE } from '../utils/constant';
 
@@ -69,14 +69,6 @@ export default createComponent({
 
     const path = computed(() => getPath(props.clockwise, viewBoxSize.value));
 
-    const rootStyle = computed(() => {
-      const size = addUnit(props.size);
-      return {
-        width: size,
-        height: size,
-      };
-    });
-
     watch(
       () => props.rate,
       (rate) => {
@@ -172,7 +164,7 @@ export default createComponent({
     };
 
     return () => (
-      <div class={bem()} style={rootStyle.value}>
+      <div class={bem()} style={getSizeStyle(props.buttonSize)}>
         <svg viewBox={`0 0 ${viewBoxSize.value} ${viewBoxSize.value}`}>
           {renderGradient()}
           {renderHover()}

src/skeleton/index.js

@@ -1,4 +1,4 @@
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, getSizeStyle } from '../utils';
 
 const [createComponent, bem] = createNamespace('skeleton');
 const DEFAULT_ROW_WIDTH = '100%';
@@ -42,11 +42,10 @@ export default createComponent({
   setup(props, { slots }) {
     const renderAvatar = () => {
       if (props.avatar) {
-        const size = addUnit(props.avatarSize);
         return (
           <div
             class={bem('avatar', props.avatarShape)}
-            style={{ width: size, height: size }}
+            style={getSizeStyle(props.avatarSize)}
           />
         );
       }

src/slider/index.js

@@ -1,5 +1,5 @@
 import { ref, computed } from 'vue';
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, getSizeStyle } from '../utils';
 import { preventDefault } from '../utils/dom/event';
 
 // Mixins
@@ -51,16 +51,6 @@ export default createComponent({
 
     const range = computed(() => props.max - props.min);
 
-    const buttonStyle = computed(() => {
-      if (props.buttonSize) {
-        const size = addUnit(props.buttonSize);
-        return {
-          width: size,
-          height: size,
-        };
-      }
-    });
-
     const wrapperStyle = computed(() => {
       const crossAxis = props.vertical ? 'width' : 'height';
       return {
@@ -177,7 +167,7 @@ export default createComponent({
         {slots.button ? (
           slots.button()
         ) : (
-          <div class={bem('button')} style={buttonStyle.value} />
+          <div class={bem('button')} style={getSizeStyle(props.buttonSize)} />
         )}
       </div>
     );

src/stepper/index.js

@@ -1,4 +1,4 @@
-import { createNamespace, isDef, addUnit } from '../utils';
+import { createNamespace, isDef, addUnit, getSizeStyle } from '../utils';
 import { resetScroll } from '../utils/dom/reset-scroll';
 import { preventDefault } from '../utils/dom/event';
 import { formatNumber } from '../utils/format/number';
@@ -124,14 +124,7 @@ export default createComponent({
     },
 
     buttonStyle() {
-      if (this.buttonSize) {
+      return getSizeStyle(this.buttonSize);
-        const size = addUnit(this.buttonSize);
-
-        return {
-          width: size,
-          height: size,
-        };
-      }
     },
   },
 

src/uploader/index.js

@@ -1,5 +1,12 @@
 // Utils
-import { createNamespace, addUnit, noop, isPromise, isDef } from '../utils';
+import {
+  noop,
+  isDef,
+  addUnit,
+  isPromise,
+  getSizeStyle,
+  createNamespace,
+} from '../utils';
 import { toArray, readFile, isOversize, isImageFile } from './utils';
 
 // Mixins
@@ -346,13 +353,7 @@ export default createComponent({
           {PreviewCover}
         </Image>
       ) : (
-        <div
+        <div class={bem('file')} style={getSizeStyle(this.previewSize)}>
-          class={bem('file')}
-          style={{
-            width: this.previewSizeWithUnit,
-            height: this.previewSizeWithUnit,
-          }}
-        >
           <Icon class={bem('file-icon')} name="description" />
           <div class={[bem('file-name'), 'van-ellipsis']}>
             {item.file ? item.file.name : item.url}
@@ -408,17 +409,8 @@ export default createComponent({
         );
       }
 
-      let style;
-      if (this.previewSize) {
-        const size = this.previewSizeWithUnit;
-        style = {
-          width: size,
-          height: size,
-        };
-      }
-
       return (
-        <div class={bem('upload')} style={style}>
+        <div class={bem('upload')} style={getSizeStyle(this.previewSize)}>
           <Icon name={this.uploadIcon} class={bem('upload-icon')} />
           {this.uploadText && (
             <span class={bem('upload-text')}>{this.uploadText}</span>

src/utils/format/unit.ts

@@ -10,6 +10,16 @@ export function addUnit(value?: string | number): string | undefined {
   return isNumeric(value) ? `${value}px` : value;
 }
 
+export function getSizeStyle(originSize?: string | number) {
+  if (isDef(originSize)) {
+    const size = addUnit(originSize);
+    return {
+      width: size,
+      height: size,
+    };
+  }
+}
+
 // cache
 let rootFontSize: number;
 

src/utils/index.ts

@@ -1,4 +1,4 @@
-export { addUnit } from './format/unit';
+export { addUnit, getSizeStyle } from './format/unit';
 export { createNamespace } from './create';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function