feat: pi-search 增加设置icon的位置

sadais-org · Nov 14, 2020 · 602cc7a · 602cc7a
1 parent 207868f
commit 602cc7a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/components/pi-calendar/index.vue b/components/pi-calendar/index.vue
@@ -298,8 +298,8 @@ export default {
     closeIconPosition: {
       // tl为左上角，tr为右上角，bl为左下角，br为右下角
       type: String,
-      default: calendar.closeIconPosition,
       // -
+      default: calendar.closeIconPosition,
       validator: function(value) {
         return ['', 'tl', 'tr', 'bl', 'br'].includes(value)
       }

diff --git a/components/pi-search/index.vue b/components/pi-search/index.vue
@@ -5,22 +5,23 @@
     </view>
     <!-- 中间灰色包裹块 -->
     <view
-      class="pi-search-wrap pi-flex-sub pi-align-center pi-of-hidden"
+      class="pi-search-wrap pi-flex-sub pi-align-center pi-of-hidden pi-pd-lr-18"
       :class="[customClass]"
       :style="[
         customStyle,
         {
           background: background,
-          borderRadius: shape == 'round' ? '2000px' : '8rpx'
+          borderRadius: shape == 'round' ? '2000px' : '8rpx',
+          flexDirection: searchIconPosition == 'left' ? 'row' : 'row-reverse'
         }
       ]"
     >
       <!-- 搜索图标 -->
-      <view class="pi-pd-lr-18">
+      <view v-if="showSearchIcon">
         <view :class="'pi-fz-32 pi-icon-' + searchIcon" />
       </view>
       <!-- 输入框包裹 -->
-      <view class="pi-align-center pi-flex-sub">
+      <view class="pi-align-center pi-flex-sub pi-pd-left-18">
         <input
           class="pi-flex-sub pi-fz-28"
           confirm-type="search"
@@ -173,7 +174,13 @@ export default {
         return search.searchLabelStyle
       }
     },
-    // 输入框左边的图标，可以为icon名称或图片路径（默认为'search'）
+    // 是否显示搜索icon
+    showSearchIcon: {
+      type: Boolean,
+      // true
+      default: search.showSearchIcon
+    },
+    // 输入框的图标，可以为icon名称或图片路径（默认为'search'）
     searchIcon: {
       type: String,
       default: search.searchIcon
@@ -183,6 +190,15 @@ export default {
       type: String,
       default: search.searchIconColor
     },
+    // 搜索icon的位置
+    searchIconPosition: {
+      type: String,
+      // 'left'
+      default: search.searchIconPosition,
+      validator: function(value) {
+        return ['left', 'right'].includes(value)
+      }
+    },
     // 是否禁用输入框
     disabled: {
       type: Boolean,

diff --git a/config/search.js b/config/search.js
@@ -15,8 +15,10 @@ export default {
   inputAlign: 'left', // 输入框内容对齐方式，可选值为 left|center|right
   searchLabel: '', // 搜索框左侧文本
   searchLabelStyle: {}, // 搜索框左侧文本样式
+  showSearchIcon: true, // 是否显示搜索icon
   searchIcon: 'search', // 输入框左边的图标，可以为icon名称或图片路径
   searchIconColor: '#333333', // 输入框左边的图标颜色
+  searchIconPosition: 'left', // 搜索icon的位置
   disabled: false, // 是否禁用输入框
   inputStyle: {}, // 指定 input 的样式
   height: 58, // 输入框高度，单位默认rpx