feat(tab-bar): props fontSize and iconSize accept both string and number

b2nil · Dec 14, 2020 · 72492d4 · 72492d4
1 parent e25d5a3
commit 72492d4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/src/components/tab-bar/index.ts b/src/components/tab-bar/index.ts
@@ -2,7 +2,7 @@ import { h, defineComponent, computed, mergeProps, PropType } from 'vue'
 import { Image, Text, View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'
 import { AtTabBarProps, TabItem } from 'types/tab-bar'
-import { mergeStyle } from '../../utils/common'
+import { convertToUnit } from '../../utils/common'
 
 import AtBadge from '../badge/index'
 
@@ -24,12 +24,18 @@ const AtTabBar = defineComponent({
       required: true
     },
     iconSize: {
-      type: Number,
-      default: 24
+      type: [Number, String],
+      default: 24,
+      validator: (prop: string | number) => {
+        return typeof parseInt(`${prop}`) === 'number'
+      }
     },
     fontSize: {
-      type: Number,
-      default: 14
+      type: [Number, String],
+      default: 14,
+      validator: (prop: string | number) => {
+        return typeof parseInt(`${prop}`) === 'number'
+      }
     },
     color: {
       type: String,
@@ -50,7 +56,7 @@ const AtTabBar = defineComponent({
     },
   },
 
-  setup(props: AtTabBarProps, { attrs, slots }) {
+  setup(props: AtTabBarProps, { attrs }) {
 
     const defaultStyle = computed(() => ({
       color: props.color || ''
@@ -61,16 +67,16 @@ const AtTabBar = defineComponent({
     }))
 
     const titleStyle = computed(() => ({
-      fontSize: props.fontSize ? `${props.fontSize}px` : ''
+      fontSize: props.fontSize ? convertToUnit(props.fontSize) : ''
     }))
 
     const rootStyle = computed(() => ({
       backgroundColor: props.backgroundColor || ''
     }))
 
     const imgStyle = computed(() => ({
-      width: `${props.iconSize}px`,
-      height: `${props.iconSize}px`
+      width: convertToUnit(props.iconSize),
+      height: convertToUnit(props.iconSize)
     }))
 
     const rootClass = computed(() => ({
@@ -93,7 +99,7 @@ const AtTabBar = defineComponent({
 
     const tabBarItemIconStyle = computed(() => (i) => ({
       color: props.current === i ? props.selectedColor : props.color,
-      fontSize: props.iconSize ? `${props.iconSize}px` : ''
+      fontSize: props.iconSize ? convertToUnit(props.iconSize) : ''
     }))
 
     const tabBarItemInnerImgClass = computed(() => (selected: boolean) => ({

diff --git a/types/tab-bar.d.ts b/types/tab-bar.d.ts
@@ -67,12 +67,12 @@ export interface AtTabBarProps extends AtComponent {
    * 图标大小
    * @default 24
    */
-  iconSize?: number
+  iconSize?: number | string
   /**
    * 字体大小
    * @default 14
    */
-  fontSize?: number
+  fontSize?: number | string
   /**
    * 未选中标签字体与图标颜色
    * @default #333