fix: searchbar 修复

wypbin · Jan 12, 2023 · babae08 · babae08
1 parent bf04e89
commit babae08
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 37 deletions.
diff --git a/src/packages/__VUE/searchbar/index.scss b/src/packages/__VUE/searchbar/index.scss
@@ -51,36 +51,52 @@
     .nut-searchbar__input-inner {
       display: flex;
       position: relative;
-      width: 100%;
+      // width: 100%;
+      flex: 1;
+      align-items: center;
+      overflow: hidden;
       > taro-form-core {
         width: 100%;
       }
       form {
-        display: flex;
-        align-items: center;
-        width: 100%;
+        // display: flex;
+        // align-items: center;
+        // width: 100%;
+        flex: 1;
+        overflow: hidden;
       }
       input {
         width: 100%;
         height: 100%;
         min-width: 214px;
         padding-left: 4px;
       }
-      .nut-searchbar__input-clear {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-right: 13px;
-        & .nut-searchbar__nut-icon-mask-close {
-          color: rgb(204, 204, 204);
-          &:hover {
-            cursor: pointer;
-            color: rgb(104, 104, 104);
-          }
+    }
+
+    .nut-searchbar__input-inner-icon {
+      display: flex;
+      align-items: center;
+      position: relative;
+      // overflow: hidden;
+      padding: 0 7px;
+    }
+    .nut-searchbar__input-clear {
+      position: relative;
+      z-index: 10;
+      padding: 0 5px;
+      & .nut-searchbar__nut-icon-mask-close {
+        color: rgb(204, 204, 204);
+        &:hover {
+          cursor: pointer;
+          color: rgb(104, 104, 104);
         }
       }
-      .nut-searchbar__input-bar_clear {
-        padding-right: 10px;
+    }
+    .nut-searchbar__input-inner-icon-absolute {
+      .nut-searchbar__input-clear {
+        position: absolute;
+        z-index: 10;
+        left: -20px;
       }
     }
 
@@ -90,8 +106,8 @@
       height: 14px;
     }
 
-    .nut-searchbar__iptright-sarch-icon {
-      margin-right: 12px;
+    .nut-searchbar__iptright-search-icon {
+      margin-left: 5px;
     }
 
     .nut-searchbar__input-bar {
@@ -106,6 +122,13 @@
       outline: none;
       font-size: 14px;
     }
+
+    .nut-searchbar__input-inner-absolute {
+      .nut-searchbar__input-bar {
+        box-sizing: border-box;
+        padding-right: 20px;
+      }
+    }
   }
 
   &__left-search-icon {

diff --git a/src/packages/__VUE/searchbar/index.taro.vue b/src/packages/__VUE/searchbar/index.taro.vue
@@ -7,7 +7,7 @@
       <view v-if="$slots.leftin" class="nut-searchbar__search-icon nut-searchbar__iptleft-search-icon">
         <slot name="leftin"></slot>
       </view>
-      <view class="nut-searchbar__input-inner">
+      <view :class="['nut-searchbar__input-inner', $slots.rightin && 'nut-searchbar__input-inner-absolute']">
         <form action="#" onsubmit="return false" @submit.prevent="handleSubmit">
           <input
             ref="inputsearch"
@@ -27,9 +27,11 @@
             :style="styleSearchbar"
           />
         </form>
+      </view>
+      <view :class="['nut-searchbar__input-inner-icon', $slots.rightin && 'nut-searchbar__input-inner-icon-absolute']">
         <view
           @click="handleClear"
-          class="nut-searchbar__input-clear"
+          class="nut-searchbar__search-icon nut-searchbar__input-clear"
           v-if="clearable"
           v-show="String(modelValue).length > 0"
         >
@@ -38,9 +40,9 @@
           </template>
           <component :is="renderIcon(clearIcon)" v-else></component>
         </view>
-      </view>
-      <view v-if="$slots.rightin" class="nut-searchbar__search-icon nut-searchbar__iptright-sarch-icon">
-        <slot name="rightin"></slot>
+        <view v-if="$slots.rightin" class="nut-searchbar__search-icon nut-searchbar__iptright-search-icon">
+          <slot name="rightin"></slot>
+        </view>
       </view>
     </view>
     <view v-if="$slots.rightout" class="nut-searchbar__search-icon nut-searchbar__right-search-icon">
@@ -51,6 +53,7 @@
 
 <script lang="ts">
 import { toRefs, reactive, computed, ref, onMounted, PropType, Ref, CSSProperties } from 'vue';
+import Taro from '@tarojs/taro';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { CircleClose } from '@nutui/icons-vue-taro';
 import { TextAlign } from './type';

diff --git a/src/packages/__VUE/searchbar/index.vue b/src/packages/__VUE/searchbar/index.vue
@@ -12,7 +12,7 @@
       >
         <slot name="leftin"></slot>
       </view>
-      <view class="nut-searchbar__input-inner">
+      <view :class="['nut-searchbar__input-inner', $slots.rightin && 'nut-searchbar__input-inner-absolute']">
         <form action="#" @submit.prevent="handleSubmit">
           <input
             ref="inputsearch"
@@ -30,9 +30,11 @@
             :style="styleSearchbar"
           />
         </form>
+      </view>
+      <view :class="['nut-searchbar__input-inner-icon', $slots.rightin && 'nut-searchbar__input-inner-icon-absolute']">
         <view
           @click="handleClear"
-          class="nut-searchbar__input-clear"
+          class="nut-searchbar__search-icon nut-searchbar__input-clear"
           v-if="clearable"
           v-show="String(modelValue).length > 0"
         >
@@ -41,13 +43,9 @@
           </template>
           <component :is="renderIcon(clearIcon)" v-else></component>
         </view>
-      </view>
-      <view
-        v-if="$slots.rightin"
-        class="nut-searchbar__search-icon nut-searchbar__iptright-sarch-icon"
-        @click="rightIconClick"
-      >
-        <slot name="rightin"></slot>
+        <view v-if="$slots.rightin" class="nut-searchbar__search-icon nut-searchbar__iptright-search-icon">
+          <slot name="rightin"></slot>
+        </view>
       </view>
     </view>
     <view v-if="$slots.rightout" class="nut-searchbar__search-icon nut-searchbar__right-search-icon">
@@ -143,7 +141,6 @@ export default create({
     const state = reactive({
       active: false
     });
-    console.log(slots);
 
     const searchbarStyle = computed(() => {
       return {

diff --git a/src/sites/mobile-taro/vue/src/dentry/pages/searchbar/index.vue b/src/sites/mobile-taro/vue/src/dentry/pages/searchbar/index.vue
@@ -29,7 +29,7 @@
 
     <h2>自定义清除按钮 icon</h2>
     <nut-searchbar v-model="searchValue6">
-      <template v-slot:clearIcon>
+      <template v-slot:clear-icon>
         <img :src="icon" style="width: 20px; height: 20px" />
       </template>
     </nut-searchbar>

diff --git a/src/sites/mobile-taro/vue/src/exhibition/pages/collapse/index.vue b/src/sites/mobile-taro/vue/src/exhibition/pages/collapse/index.vue
@@ -12,7 +12,7 @@
     <h2>手风琴</h2>
     <nut-collapse v-model="active2" :accordion="true">
       <nut-collapse-item :title="title1" :name="1">
-        <template v-slot:sTitle> 文本测试 </template>
+        <template v-slot:value> 文本测试 </template>
         华为终端操作系统EMUI 11发布，9月11日正式开启
       </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2" :value="subTitle">
@@ -30,7 +30,7 @@
     <h2>设置固定内容（不折叠部分）</h2>
     <nut-collapse v-model="active6" :accordion="true">
       <nut-collapse-item :title="title1" :name="1">
-        <template v-slot:extraRender>固定内容</template>
+        <template v-slot:extra>固定内容</template>
         NutUI是一套拥有京东风格的轻量级的 Vue 组件库
       </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2">