feat: 完善form样式

components/pi-button/index.vue

@@ -267,11 +267,12 @@ export default {
       // 是否开启水波纹效果
       this.waveInfo.active = false
       // 点击事件
+      console.log(TAG, '触发按钮click事件')
       this.$emit('click', e)
       this.$nextTick(function() {
         this.queryWaveInfo(e)
       })
-    }, 200),
+    }, button.debounceTimeout),
     // 查询按钮的节点信息
     queryWaveInfo(e) {
       this.getElRectQuery().then(res => {

components/pi-form-item/index.vue

@@ -23,10 +23,10 @@
     <!-- 内容区域 -->
     <view
       class="content-wrap pi-align-center"
-      :class="[{ 'pi-flex-sub': !getWrap }]"
+      :class="[{ 'pi-flex-sub': !getWrap }, getInputAlign]"
       :style="[contentWrapStyle]"
     >
-      <view class="input-wrap " :class="[{ wrap: getWrap, nowrap: !getWrap }, getInputAlign]">
+      <view class="input-wrap " :class="[{ wrap: getWrap, nowrap: !getWrap }]">
         <slot />
       </view>
       <!-- 右侧区域 -->
@@ -274,23 +274,26 @@ export default {
       width: 100%;
     }
     &.left {
-      .pi-input-wrap {
+      .pi-input-wrap,
+      pi-input {
         text-align: left;
       }
       .pi-checkbox-group.horizontal {
         justify-content: flex-start;
       }
     }
     &.center {
-      .pi-input-wrap {
+      .pi-input-wrap,
+      pi-input {
         text-align: center;
       }
       .pi-checkbox-group.horizontal {
         justify-content: center;
       }
     }
     &.right {
-      .pi-input-wrap {
+      .pi-input-wrap,
+      pi-input {
         text-align: right;
       }
       .pi-checkbox-group.horizontal {

components/pi-radio-group/index.vue

@@ -139,10 +139,13 @@ export default {
 .pi-radio-group {
   display: inline-flex;
   flex-wrap: wrap;
+  width: 100%;
+
   /deep/ .pi-radio-wrap,
   pi-radio {
     margin-bottom: 28rpx;
   }
+
   &.horizontal {
     flex-direction: row;
     align-items: center;
@@ -154,6 +157,7 @@ export default {
       margin-right: 28rpx;
     }
   }
+
   &.vertical {
     flex-direction: column;
   }

components/pi-radio/index.vue

@@ -231,6 +231,8 @@ $disable-color: #c8c9cc;
   .radio-label {
     margin-left: 16rpx;
     word-wrap: break-word;
+    transition: $pi-animation-duration $pi-animation-timing-function;
+    transition-property: border, color, background-color;
     &.text {
       padding: 14rpx 24rpx;
       margin-left: 0;
@@ -243,6 +245,9 @@ $disable-color: #c8c9cc;
       color: #ffffff;
       background-color: #cccccc;
       border-color: #cccccc;
+      .dot {
+        background-color: #ffffff;
+      }
     }
   }
   &.disabled {

components/pi-search/index.vue

@@ -51,7 +51,7 @@
         />
         <!-- clear action -->
         <view v-if="clearable && val" class="pi-pd-lr-18" @tap="handleClearInput">
-          <view class="pi-icon-roundclosefill" />
+          <view class="pi-icon-roundclosefill" :style="[clearIconStyle]" />
         </view>
       </view>
     </view>
@@ -124,6 +124,13 @@ export default {
       type: Boolean,
       default: search.clearable
     },
+    // 清除图标自定义样式
+    clearIconStyle: {
+      type: Object,
+      default() {
+        return search.searchIconStyle
+      }
+    },
     // 是否自动获得焦点（默认false）
     focus: {
       type: Boolean,

config/button.js

@@ -24,5 +24,6 @@ export default {
   bgColor: '', // 自定义背景色按钮（type为default，可自定义设置）
   round: false, // 按钮是否椭圆（默认值：false）
   ripple: true, // 是否开启水波纹效果（默认值：true）
-  rippleBgColor: '' // 水波纹的背景颜色（默认值：''）
+  rippleBgColor: '', // 水波纹的背景颜色（默认值：''）
+  debounceTimeout: 200 // 按钮防抖默认延时200
 }

config/search.js

@@ -4,6 +4,7 @@ export default {
   shape: 'round', // 搜索框形状 round || square
   background: '#f5f5f5', // 背景颜色（默认#f2f2f2）
   clearable: true, // 是否启用清除控件（默认true）
+  clearIconStyle: {}, // 清除图标自定义样式
   focus: false, // 是否自动获得焦点（默认false）
   placeholder: '请输入搜索关键词', // 占位提示文字
   placeholderStyle: 'color: #cccccc;', // 指定 placeholder 的样式

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sadais-piui",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "description": "piui组件库",
   "main": "index.js",
   "scripts": {

tools/common.js

@@ -1,4 +1,9 @@
 import { isNumber } from './validate'
+import lodashDebounce from './debounce'
+import lodashThrottle from './throttle'
+
+export const debounce = lodashDebounce
+export const throttle = lodashThrottle
 
 /**
  * 动态import文件
@@ -41,58 +46,6 @@ export const addUnit = (value = 'auto', unit = 'rpx') => {
   return isNumber(value) ? `${value}${unit}` : value
 }
 
-/**
- * 频率控制 返回函数连续调用时，fn 执行频率限定为每多少时间执行一次
- * @param fn {function} 需要调用的函数
- * @param delay {number} 延迟时间，单位毫秒
- * @param immediate {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。
- * @return { Function }实际调用函数
- */
-export const throttle = function(fn, delay, immediate, debounce) {
-  var curr = +new Date(), // 当前事件
-    last_call = 0,
-    last_exec = 0,
-    timer = null,
-    diff, // 时间差
-    context, // 上下文
-    args,
-    exec = function() {
-      last_exec = curr
-      fn.apply(context, args)
-    }
-  return function() {
-    curr = +new Date()
-    ;(context = this),
-      (args = arguments),
-      (diff = curr - (debounce ? last_call : last_exec) - delay)
-    clearTimeout(timer)
-    if (debounce) {
-      if (immediate) {
-        timer = setTimeout(exec, delay)
-      } else if (diff >= 0) {
-        exec()
-      }
-    } else {
-      if (diff >= 0) {
-        exec()
-      } else if (immediate) {
-        timer = setTimeout(exec, -diff)
-      }
-    }
-    last_call = curr
-  }
-}
-
-/** 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 delay，fn 才会执行
- * @param fn {function} 要调用的函数
- * @param delay {number} 空闲时间
- * @param immediate {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。
- * @return { Function } 实际调用函数
- */
-export const debounce = function(fn, delay, immediate) {
-  return throttle(fn, delay, immediate, true)
-}
-
 /**
  * 查询节点信息
  * @param {Object} scope 传this