feat: 完善pi-search组件

common.scss

@@ -992,10 +992,10 @@ button {
   @if $i % 2 == 0 {
     /* padding */
     .pi-pd-#{$i} {
-      padding: #{$i};
+      padding: #{$i}rpx;
     }
     .pi-pd-top-#{$i} {
-      padding-top: 1rpx * $i;
+      padding-top: #{$i}rpx;
     }
     .pi-pd-right-#{$i} {
       padding-right: #{$i}rpx;
@@ -1050,12 +1050,12 @@ button {
 
     // radius
     .pi-radius-#{$i} {
-      border-radius: 1rpx * $i;
+      border-radius: #{$i}rpx;
     }
 
     // line-height
     .pi-lh-#{$i} {
-      line-height: 1rpx * $i;
+      line-height: #{$i}rpx;
     }
   }
 }

components/pi-search/index.vue

@@ -1,12 +1,236 @@
 <template>
-  <view>
-    asdf
+  <view class="pi-align-center">
+    <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'
+      }"
+    >
+      <!-- 搜索图标 -->
+      <view class="pi-pd-lr-18">
+        <view :class="`pi-icon-${searchIcon}`" />
+      </view>
+      <!-- 输入框包裹 -->
+      <view class="pi-align-center pi-flex-sub">
+        <input
+          class="pi-flex-sub pi-fz-28"
+          confirm-type="search"
+          :value="val"
+          :disabled="disabled"
+          :maxlength="parseInt(maxlength, 10)"
+          :focus="focused"
+          :placeholder="placeholder"
+          :placeholder-style="placeholderStyle"
+          type="text"
+          :style="mergeInputStyle"
+          @blur="handleInputBlur"
+          @confirm="handleInputSearch"
+          @input="handleInputChange"
+          @focus="handleInputFocus"
+        />
+        <!-- clear action -->
+        <view v-if="showClear" class="pi-pd-right-18" @tap="handleClearInput">
+          <view class=" pi-icon-close" />
+        </view>
+      </view>
+    </view>
+    <!-- right action -->
+    <view v-if="showAction" class=" pi-pd-left-18" :style="[actionStyle]" @tap="handleCancel">
+      {{ actionText }}
+    </view>
   </view>
 </template>
 
 <script>
+/**
+ *
+ * search	确定搜索时触发	value: string (当前输入的值)
+ * input	输入框内容变化时触发	value: string (当前输入的值)
+ * focus	输入框获得焦点时触发	event: Event
+ * blur	输入框失去焦点时触发	event: Event
+ * clear	点击清除按钮后触发	event: Event
+ * cancel	点击取消按钮时触发
+ */
+import ValueSync from '../../mixin/value-sync'
+import { getConfig } from '../../config'
+const { search } = getConfig()
+
 export default {
-  name: 'PiSearch'
+  name: 'PiSearch',
+  mixins: [ValueSync], // 注入value与val，进行双向绑定
+  props: {
+    // 搜索框形状 round || square（默认'round'）
+    shape: {
+      type: String,
+      default: search.shape
+    },
+    // 背景颜色（默认'#f2f2f2'）
+    background: {
+      type: String,
+      default: search.background
+    },
+    // 是否启用清除控件（默认true）
+    clearable: {
+      type: Boolean,
+      default: search.clearable
+    },
+    // 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示，（默认'always'）
+    clearTrigger: {
+      type: String,
+      default: search.clearTrigger
+    },
+    // 是否自动获得焦点（默认false）
+    focus: {
+      type: Boolean,
+      default: search.focus
+    },
+    // 占位提示文字（默认''）
+    placeholder: {
+      type: String,
+      default: search.placeholder
+    },
+    // 指定 placeholder 的样式（默认'请输入搜索关键词'）
+    placeholderStyle: {
+      type: String,
+      default() {
+        return search.placeholderStyle
+      }
+    },
+    // 输入框最大能输入的长度，-1为不限制长度（默认-1）
+    maxlength: {
+      type: [Number, String],
+      default: search.maxlength
+    },
+    // 是否在搜索框右侧显示文字（默认false）
+    showAction: {
+      type: Boolean,
+      default: search.showAction
+    },
+    // 右侧显示文字（默认'取消'）
+    actionText: {
+      type: String,
+      default: search.actionText
+    },
+    // 指定右侧显示文字样式（默认{}）
+    actionStyle: {
+      type: Object,
+      default() {
+        return search.actionStyle
+      }
+    },
+    // 输入框内容对齐方式，可选值为 left|center|right（默认为'left'）
+    inputAlign: {
+      type: String,
+      default: search.inputAlign
+    },
+    // 搜索框左侧文本（默认''）
+    searchLabel: {
+      type: String,
+      default: search.searchLabel
+    },
+    // 搜索框左侧文本样式（默认{}）
+    searchLabelStyle: {
+      type: Object,
+      default() {
+        return search.searchLabelStyle
+      }
+    },
+    // 输入框左边的图标，可以为icon名称或图片路径（默认为'search'）
+    searchIcon: {
+      type: String,
+      default: search.searchIcon
+    },
+    // 输入框左边的图标颜色(当传入searchIcon为name的时候)，（默认为'#333333'）
+    searchIconColor: {
+      type: String,
+      default: search.searchIconColor
+    },
+    // 是否禁用输入框
+    disabled: {
+      type: Boolean,
+      default: search.disabled
+    },
+    // 指定input样式（默认{}）
+    inputStyle: {
+      type: Object,
+      default() {
+        return search.inputStyle
+      }
+    },
+    // 导航栏高度，单位px，（默认58）
+    height: {
+      type: [String, Number],
+      default: search.height
+    },
+    // 输入框颜色，（默认为'#333333'）
+    color: {
+      type: String,
+      default: search.color
+    }
+  },
+  data() {
+    return {
+      focused: this.focus // input 是否已获取焦点
+    }
+  },
+  computed: {
+    mergeInputStyle() {
+      return {
+        textAlign: this.inputAlign,
+        color: this.color,
+        background: this.background,
+        height: `${this.height}rpx`,
+        ...this.inputStyle
+      }
+    },
+    showClear() {
+      return this.clearTrigger === 'always' ? this.val : this.focused && this.val
+    }
+  },
+  watch: {
+    focus: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        this.focused = value
+      }
+    }
+  },
+  methods: {
+    handleInputChange(e) {
+      const value = e.detail.value
+      this.$emit('input', value)
+      this.val = value
+    },
+    handleInputBlur() {
+      this.focused = false
+      this.$emit('blur', this.val)
+      // 收起键盘
+      uni.hideKeyboard()
+    },
+    handleInputSearch(e) {
+      this.$emit('search', e.detail.value)
+      // 收起键盘
+      uni.hideKeyboard()
+    },
+    handleInputFocus() {
+      this.focused = true
+      this.$emit('focus', this.val)
+    },
+    handleClearInput() {
+      this.val = ''
+      this.$nextTick(() => {
+        // 延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空)
+        this.$emit('clear', this.val)
+      })
+    },
+    handleCancel() {
+      this.$emit('cancel')
+    }
+  }
 }
 </script>
 

config/index.js

@@ -14,7 +14,7 @@ export const getConfig = () => {
 }
 
 /**
- * 设置配置
+ * 设置配置（piui install 的时候，会注入config merge一次）
  * @param {Object} updateConfig 配置
  */
 export const setConfig = updateConfig => {

config/search.js

@@ -1,21 +1,22 @@
 export default {
   shape: 'round', // 搜索框形状 round || square
-  background: '#f2f2f2', // 搜索框背景颜色（默认#f2f2f2）
+  background: '#f7f7f7', // 背景颜色（默认#f2f2f2）
   clearable: true, // 是否启用清除控件（默认true）
   clearTrigger: 'always', // 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示
   focus: false, // 是否自动获得焦点（默认false）
-  placeholder: '', // 占位提示文字
-  placeholderStyle: {}, // 指定 placeholder 的样式
-  maxlength: null, // 输入的最大字符数
-  showAction: true, // 是否在搜索框右侧显示文字
+  placeholder: '请输入搜索关键词', // 占位提示文字
+  placeholderStyle: 'color: #cccccc;', // 指定 placeholder 的样式
+  maxlength: -1, // 输入的最大字符数
+  showAction: false, // 是否在搜索框右侧显示文字
   actionText: '取消', // 右侧显示文字
   actionStyle: {}, // 右侧显示文字样式
-  inputAlign: 'left', // 'left' || 'center' || 'right'
+  inputAlign: 'left', // 输入框内容对齐方式，可选值为 left|center|right
   searchLabel: '', // 搜索框左侧文本
+  searchLabelStyle: {}, // 搜索框左侧文本样式
   searchIcon: 'search', // 输入框左边的图标，可以为icon名称或图片路径
   searchIconColor: '#333333', // 输入框左边的图标颜色
   disabled: false, // 是否禁用输入框
-  value: '', // 输入框初始值
-  height: '88rpx', // 输入框高度
+  inputStyle: {}, // 指定 input 的样式
+  height: 58, // 输入框高度，单位默认rpx
   color: '#333333' // 输入框颜色
 }

mixin/value-mixin.js → mixin/value-sync.js

@@ -1,3 +1,7 @@
+/**
+ * 提供v-model双向绑定
+ * 提供传入value属性，将同步到val中
+ */
 export default {
   model: {
     prop: 'value',
@@ -11,6 +15,7 @@ export default {
   },
   data() {
     return {
+      // 同步value到val
       val: this.value
     }
   },