feat: 增加组件全局的样式自定义mixin

components/pi-button/index.vue

@@ -1,7 +1,8 @@
 <template>
   <button
     class="pi-button fix-webkit-appearance"
-    :class="{ 'pi-round': round }"
+    :style="[customStyle]"
+    :class="[customClass, round ? 'pi-round' : '']"
     :size="size"
     :type="type"
     :plain="plain"
@@ -16,7 +17,6 @@
     :session-from="sessionFrom"
     :send-message-img="sendMessageImg"
     :show-message-card="showMessageCard"
-    :style="[customStyle]"
     :hover-class="getHoverClass"
     :hover-start-time="hoverStartTime"
     :hover-stay-time="hoverStayTime"
@@ -44,11 +44,14 @@
  * 因为小程序不兼容v-bind="$attrs"写法，所以只能把官网属性重定义一遍
  */
 import { getConfig } from '../../config'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
 const TAG = 'PiButton'
 const { button } = getConfig()
 
 export default {
   name: TAG,
+  // 混入自定义样式customStyle和customClass
+  mixins: [createCustomPropsByConfig(button)],
   props: {
     /**
      * uniapp button 官方属性定义
@@ -166,13 +169,6 @@ export default {
     rippleBgColor: {
       type: String,
       default: button.rippleBgColor
-    },
-    // 自定义样式，对象形式（默认值：{}）
-    customStyle: {
-      type: Object,
-      default() {
-        return button.customStyle
-      }
     }
   },
   data() {
@@ -196,7 +192,7 @@ export default {
         'left': this.waveInfo.left + 'px',
         'width': this.waveInfo.fields.targetWidth + 'px',
         'height': this.waveInfo.fields.targetWidth + 'px',
-        'background-color': this.rippleBgColor || 'rgba(0, 0, 0, 0.15)'
+        'background-color': this.rippleBgColor || 'rgba(0, 0, 0, 0.1)'
       }
     }
   },

components/pi-calendar/index.vue

@@ -12,7 +12,7 @@
     :mask-closable="maskClosable"
     @close="handlePopupClose"
   >
-    <view class="pi-calendar">
+    <view class="pi-calendar" :style="[customStyle]" :class="[customClass]">
       <!-- title -->
       <view
         class="pi-justify-center pi-fz-32 pi-fw-500"
@@ -86,12 +86,15 @@
 <script>
 import ValueSync from '../../mixin/value-sync'
 import { getConfig } from '../../config'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
 const TAG = 'PiCalendar'
 const { calendar } = getConfig()
 
 export default {
   name: TAG,
-  mixins: [ValueSync],
+  // 混入v-model
+  // 混入自定义样式customStyle和customClass
+  mixins: [ValueSync, createCustomPropsByConfig(calendar)],
   props: {
     title: {
       type: String,

components/pi-divider/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="pi-rela pi-w-100P pi-align-center" :style="[customStyle]">
+  <view class="pi-rela pi-w-100P pi-align-center" :style="[customStyle]" :class="[customClass]">
     <view
       v-if="['center', 'right'].includes(contentPosition)"
       class="pi-divider"
@@ -16,11 +16,14 @@
 
 <script>
 import { getConfig } from '../../config'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
 const TAG = 'PiDivider'
 const { divider } = getConfig()
 
 export default {
   name: TAG,
+  // 混入自定义样式customStyle和customClass
+  mixins: [createCustomPropsByConfig(divider)],
   props: {
     // 是否使用0.5px线
     halfline: {
@@ -37,13 +40,6 @@ export default {
       type: String,
       default: divider.borderStyle
     },
-    // 整个divider自定义样式
-    customStyle: {
-      type: Object,
-      default() {
-        return divider.customStyle
-      }
-    },
     // 内容位置：center left right
     contentPosition: {
       type: String,

components/pi-loading/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <view v-if="show" class="pi-loading" :class="{ vertical: vertical }" :style="{ color: color }">
+  <view
+    v-if="show"
+    class="pi-loading"
+    :style="[customStyle, { color: color }]"
+    :class="[customClass, vertical ? vertical : '']"
+  >
     <view v-if="type === 'circular'" class="loading-circular" :style="[cricleStyle]" />
     <view v-if="type === 'spinner'" class="loading-spinner" :style="[cricleStyle]">
       <view v-for="line of 12" :key="line" />
@@ -10,11 +15,14 @@
 
 <script>
 import { getConfig } from '../../config'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
 const TAG = 'PiLoading'
 const { loading } = getConfig()
 
 export default {
   name: TAG,
+  // 混入自定义样式customStyle和customClass
+  mixins: [createCustomPropsByConfig(loading)],
   props: {
     // 是否显示loading
     show: {
@@ -77,7 +85,7 @@ export default {
         width: this.getSize,
         height: this.getSize
       }
-      if (this.type == 'circle')
+      if (this.type === 'circular')
         style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${this.color ? this.color : '#c7c7c7'}`
       return style
     }

components/pi-mask/index.vue

@@ -1,10 +1,13 @@
 <template>
-  <!-- 蒙层禁止触摸滚动 -->
+  <!-- 蒙层禁止触摸滚动 @touchmove.stop.prevent -->
   <view
     v-if="val"
     class="pi-fixed-top pi-w-100P pi-h-100P"
-    :class="show ? animationShow : animationHide"
-    :style="{ 'zIndex': zIndex, 'background': background, 'animation-duration': getDuration.css }"
+    :class="[customClass, show ? animationShow : animationHide]"
+    :style="[
+      customStyle,
+      { 'zIndex': zIndex, 'background': background, 'animation-duration': getDuration.css }
+    ]"
     @touchmove.stop.prevent
     @tap="handleCloseMask"
   >
@@ -21,12 +24,15 @@
  */
 import ValueSync from '../../mixin/value-sync'
 import { getConfig } from '../../config'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
 const TAG = 'PiMask'
 const { mask } = getConfig()
 
 export default {
   name: TAG,
-  mixins: [ValueSync],
+  // 混入v-model
+  // 混入自定义样式customStyle和customClass
+  mixins: [ValueSync, createCustomPropsByConfig(mask)],
   props: {
     // 显示的时候执行的动画，默认（'pi-ani-fade-show'）
     animationShow: {

components/pi-navbar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="navbar-wrap" :style="[navbarStyle]">
+  <view class="navbar-wrap" :style="[customStyle, navbarStyle]" :class="[customClass]">
     <pi-status-bar v-if="fixed" />
     <!-- 当导航栏为fixed时候，占位用 -->
     <view v-if="fixed && placeholder" :style="{ height: height }" />
@@ -48,12 +48,15 @@
 import { systemInfo } from '../../tools/system'
 import * as navi from '../../tools/navi'
 import { getConfig } from '../../config'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
 
 const TAG = 'PiNavbar'
 const { navbar } = getConfig()
 
 export default {
   name: TAG,
+  // 混入自定义样式customStyle和customClass
+  mixins: [createCustomPropsByConfig(navbar)],
   props: {
     // 标题（默认''）
     title: {

components/pi-popup/index.vue

@@ -9,11 +9,14 @@
   >
     <view
       class="pi-abso pi-of-hidden"
-      :class="show ? 'pi-ani-slide-' + position + '-show' : 'pi-ani-slide-' + position + '-hide'"
+      :class="[
+        customClass,
+        show ? 'pi-ani-slide-' + position + '-show' : 'pi-ani-slide-' + position + '-hide'
+      ]"
       :style="[
         { 'zIndex': zIndex, 'borderRadius': borderRadius, 'animation-duration': getDuration.css },
         positionStyle,
-        popupStyle
+        customStyle
       ]"
       @tap.stop.prevent
     >
@@ -49,6 +52,8 @@
 import ValueSync from '../../mixin/value-sync'
 import { systemInfo } from '../../tools/system'
 import { getConfig } from '../../config'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
+
 const TAG = 'PiPopup'
 const { popup } = getConfig()
 const {
@@ -59,7 +64,9 @@ const {
 
 export default {
   name: TAG,
-  mixins: [ValueSync],
+  // 混入v-model
+  // 混入自定义样式customStyle和customClass
+  mixins: [ValueSync, createCustomPropsByConfig(popup)],
   props: {
     // 弹出位置，可选值为 top bottom right left
     position: {
@@ -99,13 +106,6 @@ export default {
       type: [String, Number],
       default: '0 0 0 0'
     },
-    // 指定popupStyle样式（默认{}）
-    popupStyle: {
-      type: Object,
-      default() {
-        return popup.popupStyle
-      }
-    },
     // 是否可以通过点击遮罩进行关闭，默认（true）
     maskClosable: {
       type: Boolean,

components/pi-search/index.vue

@@ -1,17 +1,21 @@
 <template>
-  <view class="pi-align-center">
+  <view class="pi-align-center" :style="[customStyle]" :class="[customClass]">
     <view class="pi-pd-right-18" :style="searchLabelStyle">{{ searchLabel }}</view>
     <!-- 中间灰色包裹块 -->
     <view
       class="pi-flex-sub pi-align-center pi-of-hidden"
-      :style="{
-        background: background,
-        borderRadius: shape == 'round' ? '2000px' : '8rpx'
-      }"
+      :class="[customClass]"
+      :style="[
+        customStyle,
+        {
+          background: background,
+          borderRadius: shape == 'round' ? '2000px' : '8rpx'
+        }
+      ]"
     >
       <!-- 搜索图标 -->
       <view class="pi-pd-lr-18">
-        <view :class="'pi-icon-' + searchIcon" />
+        <view :class="'pi-fz-32 pi-icon-' + searchIcon" />
       </view>
       <!-- 输入框包裹 -->
       <view class="pi-align-center pi-flex-sub">
@@ -56,12 +60,13 @@
  */
 import ValueSync from '../../mixin/value-sync'
 import { getConfig } from '../../config'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
 const TAG = 'PiSearch'
 const { search } = getConfig()
 
 export default {
   name: TAG,
-  mixins: [ValueSync], // 注入value与val，进行双向绑定
+  mixins: [ValueSync, createCustomPropsByConfig(search)], // 注入value与val，进行双向绑定
   props: {
     // 搜索框形状 round || square（默认'round'）
     shape: {

components/pi-status-bar/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <view class="pi-width-100P" :style="{ height: `${statusBarHeight}px`, background: background }" />
+  <view
+    class="pi-width-100P"
+    :style="[customStyle, { height: `${statusBarHeight}px`, background: background }]"
+    :class="[customClass]"
+  />
 </template>
 
 <script>
@@ -10,8 +14,14 @@
  * @example <status-bar />
  */
 import { systemInfo } from '../../tools/system'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
+import { getConfig } from '../../config'
+const { statusBar } = getConfig()
+
 export default {
   name: 'PiStatusBar',
+  // 混入自定义样式customStyle和customClass
+  mixins: [createCustomPropsByConfig(statusBar)],
   props: {
     // 背景颜色（默认透明）
     background: {

config/button.js

@@ -1,4 +1,6 @@
 export default {
+  customClass: '', // 自定义样式类，字符串形式（''）
+  customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   size: 'default', // 按钮尺寸，default，mini
   type: 'default', // 按钮的预置样式，default，primary，warn（默认值：'default'）
   plain: false, // 按钮是否镂空（默认值：false）
@@ -19,6 +21,5 @@ export default {
   showMessageCard: false, // 用户点击后可以快速发送小程序消息，open-type="contact"时有效（默认值：'false'）
   round: false, // 按钮是否椭圆（默认值：false）
   ripple: true, // 是否开启水波纹效果（默认值：true）
-  rippleBgColor: '', // 水波纹的背景颜色（默认值：''）
-  customStyle: {} // 自定义样式，对象形式（默认值：{}）
+  rippleBgColor: '' // 水波纹的背景颜色（默认值：''）
 }

config/calendar.js

@@ -3,6 +3,8 @@ const maxYear = currentYear + 30
 const minYear = currentYear - 80
 
 export default {
+  customClass: '', // 自定义样式类，字符串形式（''）
+  customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   title: '日期选择', // title
   type: 'date', // 日历的类型，date 单选，range 日历范围
   defaultValue: '', // 日期默认值，单选时候，传入Date，日历范围，传入Date[]

config/divider.js

@@ -1,7 +1,8 @@
 export default {
+  customClass: '', // 自定义样式类，字符串形式（''）
+  customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   borderColor: '#d6e4ef', // 分割线颜色
   borderStyle: 'solid', // 分割线样式：solid dashed dotted double
-  customStyle: {}, // 整个divider自定义样式
   halfline: true, // 是否使用0.5px线
   contentPosition: 'center', // 内容位置：center left right
   contentPadding: '0 24rpx', // 内容边距

config/loading.js

@@ -1,9 +1,10 @@
 export default {
+  customClass: '', // 自定义样式类，字符串形式（''）
+  customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   color: '#c1c1c1', // j颜色
   type: 'spinner', // 类型： spinner 菊花 circular 圆环
   size: 32, // 尺寸，默认32rpx
   vertical: false, // 是否垂直排列
   textSize: '28rpx', // 文字尺寸，默认28rpx
-  textStyle: {}, // 文字样式
-  customStyle: {} // 整个loading自定义样式
+  textStyle: {} // 文字样式
 }

config/mask.js

@@ -1,4 +1,6 @@
 export default {
+  customClass: '', // 自定义样式类，字符串形式（''）
+  customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   animationShow: 'pi-ani-fade-show', // 显示的时候执行的动画
   animationHide: 'pi-ani-fade-hide', // 隐藏的时候执行的动画
   duration: 300, // 遮罩的过渡时间，单位为ms

config/navbar.js

@@ -1,4 +1,6 @@
 export default {
+  customClass: '', // 自定义样式类，字符串形式（''）
+  customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   title: '', // 标题
   titleStyle: { fontSize: '32rpx', fontWeight: 500, color: '#333333' }, // 标题样式
   height: '44px', // 导航栏高度