feat: 移除vue-prototype

src/app.ts

@@ -1,17 +1,15 @@
 import Vue from 'vue'
 import store from './store'
 import './app.scss'
-import './utils/vue-prototype'
 // Vue.config.productionTip = false
 
 const App = new Vue({
   store,
-  onShow (options) {
-  },
+  onShow(options) {},
   render(h) {
     // this.$slots.default 是将要会渲染的页面
     return h('block', this.$slots.default)
-  }
+  },
 })
 
 export default App

src/components/avatar/index.jsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { getEnvs } from '../../utils/common'
 
 const SIZE_CLASS = {
   large: 'large',
@@ -52,7 +53,7 @@ export default {
     let letter = ''
     if (text) letter = text[0]
 
-    const isOpenData = openData && openData.type === 'userAvatarUrl' && this.$isWEAPP()
+    const isOpenData = openData && openData.type === 'userAvatarUrl' && getEnvs().isWEAPP
     const isImage = !isOpenData && image !== ''
     const isText = !isOpenData && !image
     return (

src/components/button/index.jsx

@@ -1,8 +1,6 @@
-import Taro from '@tarojs/taro'
 import Loading from '../loading/index.jsx'
 import classNames from 'classnames'
-const { getEnv, ENV_TYPE } = Taro
-const env = getEnv()
+import { getEnvs } from '../../utils/common'
 
 const SIZE_CLASS = {
   normal: 'normal',
@@ -114,9 +112,7 @@ export default {
   },
   data() {
     return {
-      isWEB: env === ENV_TYPE.WEB,
-      isWEAPP: env === ENV_TYPE.WEAPP,
-      isALIPAY: env === ENV_TYPE.ALIPAY,
+      ...getEnvs(),
     }
   },
   mounted() {

src/components/divider/index.jsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { mergeStyle } from '../../utils/common'
 
 export default {
   name: 'AtDivider',
@@ -45,9 +46,7 @@ export default {
     }
 
     return (
-      <view
-        class={classNames('at-divider', className)}
-        style={this.$mergeStyle(rootStyle, customStyle)}>
+      <view class={classNames('at-divider', className)} style={mergeStyle(rootStyle, customStyle)}>
         <view class="at-divider__content" style={fontStyle}>
           {content === '' ? this.$slots.default : content}
         </view>

src/components/grid/index.jsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import _chunk from 'lodash/chunk'
+import { mergeStyle } from '../../utils/common'
 
 export default {
   name: 'AtGrid',
@@ -94,7 +95,7 @@ export default {
                             },
                             childItem.iconInfo.className
                           )}
-                          style={this.$mergeStyle(
+                          style={mergeStyle(
                             {
                               color: childItem.iconInfo.color,
                               fontSize: `${childItem.iconInfo.size || 24}px`,

src/components/icon/index.jsx

@@ -1,5 +1,7 @@
 import Taro from '@tarojs/taro'
 import classNames from 'classnames'
+import { mergeStyle } from '../../utils/common'
+
 export default {
   name: 'AtIcon',
   props: {
@@ -50,7 +52,7 @@ export default {
     return (
       <view
         class={classNames(prefixClass, iconName, className)}
-        style={this.$mergeStyle(rootStyle, customStyle)}
+        style={mergeStyle(rootStyle, customStyle)}
         onTab={this.handleTab}></view>
     )
   },

src/components/list/item/index.jsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { mergeStyle } from '../../../utils/common'
 
 export default {
   name: 'AtListItem',
@@ -141,7 +142,7 @@ export default {
             <view class="at-list__item-icon item-icon">
               <view
                 class={iconClass}
-                style={this.mergeStyle(
+                style={mergeStyle(
                   {
                     color: iconInfo.color || '',
                     fontSize: `${iconInfo.size || 24}px`,

src/components/nav-bar/index.jsx

@@ -1,5 +1,6 @@
 import Taro from '@tarojs/taro'
 import classNames from 'classnames'
+import { mergeStyle } from '../../utils/common'
 
 export default {
   name: 'AtNavBar',
@@ -158,7 +159,7 @@ export default {
           {leftIconType && (
             <view
               class={leftIconClass}
-              style={this.$mergeStyle(
+              style={mergeStyle(
                 {
                   color: leftIconInfo.color,
                   fontSize: `${Taro.pxTransform(parseInt(leftIconInfo.size.toString()) * 2)}`,
@@ -180,7 +181,7 @@ export default {
             {rightSecondIconType && (
               <view
                 class={rightSecondIconClass}
-                style={this.$mergeStyle(
+                style={mergeStyle(
                   {
                     color: rightSecondIconInfo.color,
                     fontSize: `${Taro.pxTransform(
@@ -201,7 +202,7 @@ export default {
             {rightFirstIconType && (
               <view
                 class={rightFirstIconClass}
-                style={this.$mergeStyle(
+                style={mergeStyle(
                   {
                     color: rightFirstIconInfo.color,
                     fontSize: `${Taro.pxTransform(

src/components/range/index.tsx

@@ -1,7 +1,8 @@
 import Vue, { VNode } from 'vue'
 import classNames from 'classnames'
 import { CommonEvent, ITouchEvent } from '@tarojs/components/types/common'
-import { delayQuerySelector, getEventDetail } from '../../utils/common'
+import { delayQuerySelector, getEventDetail, mergeStyle } from '../../utils/common'
+
 import mixins from '../mixins'
 
 const AtRange = Vue.extend({
@@ -202,15 +203,15 @@ const AtRange = Vue.extend({
       <view class={rootCls} style={customStyle} onClick={this.handleClick}>
         <view class="at-range__container" style={containerStyle}>
           <view class="at-range__rail" style={railStyle}></view>
-          <view class="at-range__track" style={this.$mergeStyle(atTrackStyle, trackStyle)}></view>
+          <view class="at-range__track" style={mergeStyle(atTrackStyle, trackStyle)}></view>
           <view
             class="at-range__slider"
-            style={this.$mergeStyle(sliderAStyle, sliderStyle)}
+            style={mergeStyle(sliderAStyle, sliderStyle)}
             onTouchMove={this.handleTouchMove.bind(this, 'aX')}
             onTouchEnd={this.handleTouchEnd.bind(this, 'aX')}></view>
           <view
             class="at-range__slider"
-            style={this.$mergeStyle(sliderBStyle, sliderStyle)}
+            style={mergeStyle(sliderBStyle, sliderStyle)}
             onTouchMove={this.handleTouchMove.bind(this, 'bX')}
             onTouchEnd={this.handleTouchEnd.bind(this, 'bX')}></view>
         </view>

src/components/segmented-control/index.jsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { pxTransform } from '../../utils/common'
+import { pxTransform, mergeStyle } from '../../utils/common'
 
 export default {
   name: 'AtSegmentedControl',
@@ -88,7 +88,7 @@ export default {
     )
 
     return (
-      <view class={rootCls} style={this.$mergeStyle(rootStyle, customStyle)}>
+      <view class={rootCls} style={mergeStyle(rootStyle, customStyle)}>
         {values.map((value, i) => (
           <view
             class={classNames('at-segmented-control__item', {

src/components/tab-bar/index.jsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import Badge from '../badge/index'
+import { mergeStyle } from '../../utils/common'
 
 export default {
   name: 'AtTabBar',
@@ -96,7 +97,7 @@ export default {
           },
           className
         )}
-        style={this.$mergeStyle(rootStyle, customStyle)}>
+        style={mergeStyle(rootStyle, customStyle)}>
         {tabList.map((item, i) => (
           <view
             class={classNames('at-tab-bar__item', {

src/components/tabs/index.jsx

@@ -245,7 +245,7 @@ export default {
     const scrollY = tabDirection === 'vertical'
 
     return (
-      <view class={rootCls} style={this.$mergeStyle(heightStyle, customStyle)}>
+      <view class={rootCls} style={mergeStyle(heightStyle, customStyle)}>
         {scroll ? (
           <scroll-view
             id={this.tabId}
@@ -269,7 +269,7 @@ export default {
           onTouchStart={this.handleTouchStart.bind(this)}
           onTouchEnd={this.handleTouchEnd.bind(this)}
           onTouchMove={this.handleTouchMove.bind(this)}
-          style={this.$mergeStyle(bodyStyle, heightStyle)}>
+          style={mergeStyle(bodyStyle, heightStyle)}>
           <view class="at-tabs__underline" style={underlineStyle}></view>
           {this.$slots.default}
         </view>

src/utils/common.ts

@@ -220,6 +220,27 @@ function getEventDetail(event: any): EventDetail {
   return detail
 }
 
+const objectToString = (style: object | string): string => {
+  if (style && typeof style === 'object') {
+    let styleStr = ''
+    Object.keys(style).forEach((key) => {
+      const lowerCaseKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+      styleStr += `${lowerCaseKey}:${style[key]};`
+    })
+    return styleStr
+  } else if (style && typeof style === 'string') {
+    return style
+  }
+  return ''
+}
+
+function mergeStyle(style1: object | string, style2: object | string): object | string {
+  if (style1 && typeof style1 === 'object' && style2 && typeof style2 === 'object') {
+    return Object.assign({}, style1, style2)
+  }
+  return objectToString(style1) + objectToString(style2)
+}
+
 export {
   getEnvs,
   delayGetScrollOffset,
@@ -230,4 +251,5 @@ export {
   handleTouchScroll,
   pxTransform,
   getEventDetail,
+  mergeStyle,
 }