fix: 修复 pxTransform 问题

psaren · May 29, 2020 · be17641 · be17641
1 parent f8ddd2d
commit be17641
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 23 deletions.
diff --git a/src/components/divider/index.jsx b/src/components/divider/index.jsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { mergeStyle } from '../../utils/common'
+import { mergeStyle, pxTransform } from '../../utils/common'
 
 export default {
   name: 'AtDivider',
@@ -33,12 +33,12 @@ export default {
     const { className, customStyle, content, height, fontColor, fontSize, lineColor } = this
 
     const rootStyle = {
-      height: height ? `${Taro.pxTransform(Number(height))}` : '',
+      height: height ? `${pxTransform(Number(height))}` : '',
     }
 
     const fontStyle = {
       color: fontColor,
-      'font-size': fontSize ? `${Taro.pxTransform(Number(fontSize))}` : '',
+      'font-size': fontSize ? `${pxTransform(Number(fontSize))}` : '',
     }
 
     const lineStyle = {

diff --git a/src/components/icon/index.jsx b/src/components/icon/index.jsx
@@ -1,6 +1,5 @@
-import Taro from '@tarojs/taro'
 import classNames from 'classnames'
-import { mergeStyle } from '../../utils/common'
+import { mergeStyle, pxTransform } from '../../utils/common'
 
 export default {
   name: 'AtIcon',
@@ -43,7 +42,7 @@ export default {
     const { customStyle, className, prefixClass, value, size, color } = this
 
     const rootStyle = {
-      fontSize: `${Taro.pxTransform(parseInt(String(size)) * 2)}`,
+      fontSize: `${pxTransform(parseInt(String(size)) * 2)}`,
       color,
     }
 

diff --git a/src/components/indexes/index.jsx b/src/components/indexes/index.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import Taro from '@tarojs/taro'
 import mixins from '../mixins'
-import { delayQuerySelector, isTest, uuid } from '../../utils/common'
+import { delayQuerySelector, isTest, uuid, pxTransform } from '../../utils/common'
 import AtList from '../list/index'
 import AtListItem from '../list/item/index'
 import AtToast from '../toast/index'
@@ -196,7 +196,7 @@ export default {
     const { className, customStyle, animation, topKey, list } = this
     const { _scrollTop, _scrollIntoView, _tipText, _isShowToast, isWEB } = this.state
 
-    const toastStyle = { minWidth: Taro.pxTransform(100) }
+    const toastStyle = { minWidth: pxTransform(100) }
     const rootCls = classNames('at-indexes', className)
 
     const menuList = list.map((dataList, i) => {

diff --git a/src/components/input-number/index.tsx b/src/components/input-number/index.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { InputError } from 'types/input-number'
 import _toString from 'lodash/toString'
 import { CommonEvent, ITouchEvent } from '@tarojs/components/types/common'
+import { pxTransform } from '../../utils/common'
 
 // 实现两数相加并保留小数点后最短尾数
 function addNum(num1: number, num2: number): number {
@@ -197,7 +198,7 @@ const AtInputNumber = Vue.extend({
     } = this
 
     const inputStyle = {
-      width: width ? `${Taro.pxTransform(width)}` : '',
+      width: width ? `${pxTransform(width)}` : '',
     }
     const inputValue = Number(this.handleValue(value))
     const rootCls = classNames(

diff --git a/src/components/loading/index.jsx b/src/components/loading/index.jsx
@@ -1,3 +1,5 @@
+import { pxTransform } from '../../utils/common'
+
 export default {
   name: 'AtLoading',
   props: {
@@ -14,8 +16,8 @@ export default {
     const { color, size } = this
     const loadingSize = typeof size === 'string' ? size : String(size)
     const sizeStyle = {
-      width: size ? `${Taro.pxTransform(parseInt(loadingSize))}` : '',
-      height: size ? `${Taro.pxTransform(parseInt(loadingSize))}` : '',
+      width: size ? `${pxTransform(parseInt(loadingSize))}` : '',
+      height: size ? `${pxTransform(parseInt(loadingSize))}` : '',
     }
     const colorStyle = {
       border: color ? `1px solid ${color}` : '',

diff --git a/src/components/nav-bar/index.jsx b/src/components/nav-bar/index.jsx
@@ -1,6 +1,6 @@
 import Taro from '@tarojs/taro'
 import classNames from 'classnames'
-import { mergeStyle } from '../../utils/common'
+import { mergeStyle, pxTransform } from '../../utils/common'
 
 export default {
   name: 'AtNavBar',
@@ -162,7 +162,7 @@ export default {
               style={mergeStyle(
                 {
                   color: leftIconInfo.color,
-                  fontSize: `${Taro.pxTransform(parseInt(leftIconInfo.size.toString()) * 2)}`,
+                  fontSize: `${pxTransform(parseInt(leftIconInfo.size.toString()) * 2)}`,
                 },
                 leftIconInfo.customStyle
               )}></view>
@@ -184,9 +184,7 @@ export default {
                 style={mergeStyle(
                   {
                     color: rightSecondIconInfo.color,
-                    fontSize: `${Taro.pxTransform(
-                      parseInt(rightSecondIconInfo.size.toString()) * 2
-                    )}`,
+                    fontSize: `${pxTransform(parseInt(rightSecondIconInfo.size.toString()) * 2)}`,
                   },
                   rightSecondIconInfo.customStyle
                 )}></view>
@@ -205,9 +203,7 @@ export default {
                 style={mergeStyle(
                   {
                     color: rightFirstIconInfo.color,
-                    fontSize: `${Taro.pxTransform(
-                      parseInt(rightFirstIconInfo.size.toString()) * 2
-                    )}`,
+                    fontSize: `${pxTransform(parseInt(rightFirstIconInfo.size.toString()) * 2)}`,
                   },
                   rightFirstIconInfo.customStyle
                 )}></view>

diff --git a/src/components/rate/index.tsx b/src/components/rate/index.tsx
@@ -1,7 +1,7 @@
 import Vue, { VNode } from 'vue'
 import { CommonEvent } from '@tarojs/components/types/common'
 import classNames from 'classnames'
-import Taro from '@tarojs/taro'
+import { pxTransform } from '../../utils/common'
 
 const AtRate = Vue.extend({
   name: 'AtRate',
@@ -50,7 +50,7 @@ const AtRate = Vue.extend({
     const { customStyle, className, value, max, size, margin } = this
 
     const iconStyle = {
-      marginRight: Taro.pxTransform(margin),
+      marginRight: pxTransform(margin),
     }
     const starIconStyle = {
       fontSize: size ? `${size}px` : '',

diff --git a/src/components/textarea/index.tsx b/src/components/textarea/index.tsx
@@ -2,6 +2,7 @@ import Vue, { VNode } from 'vue'
 import classNames from 'classnames'
 import { CommonEvent } from '@tarojs/components/types/common'
 import Taro from '@tarojs/taro'
+import { pxTransform } from '../../utils/common'
 
 type ExtendEvent = {
   target: {
@@ -167,7 +168,7 @@ const AtTextarea = Vue.extend({
 
     const _maxLength = parseInt(maxLength.toString())
     const actualMaxLength = getMaxLength(_maxLength, textOverflowForbidden)
-    const textareaStyle = height ? `height:${Taro.pxTransform(Number(height))}` : ''
+    const textareaStyle = height ? `height:${pxTransform(Number(height))}` : ''
     const rootCls = classNames(
       'at-textarea',
       `at-textarea--${ENV}`,

diff --git a/src/utils/common.ts b/src/utils/common.ts
@@ -134,7 +134,13 @@ function handleTouchScroll(flag: any): void {
 
 function pxTransform(size: number): string {
   if (!size) return ''
-  return Taro.pxTransform(size)
+  const designWidth = 750
+  const deviceRatio = {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2,
+  }
+  return `${size / deviceRatio[designWidth]}rpx`
 }
 
 interface EventDetail {