Browse Source

fix: searchbar 修复

Ymm0008 2 years ago
parent
commit
07f71bc249

+ 1 - 1
src/packages/__VUE/searchbar/demo.vue

@@ -30,7 +30,7 @@
     <h2>{{ translate('basic7') }}</h2>
     <nut-searchbar v-model="searchValue6">
       <template v-slot:clearIcon>
-        <img :src="icon" style="width: 10px; height: 10px" />
+        <img :src="icon" style="width: 20px; height: 20px" />
       </template>
     </nut-searchbar>
 

+ 1 - 1
src/packages/__VUE/searchbar/doc.md

@@ -219,7 +219,7 @@ export default {
     
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| v-model	         | 当前输入的值   | number /| string | `''`     |
+| v-model	         | 当前输入的值   | number \| string | `''`     |
 | label| 搜索框左侧文本 | string | `''` |
 | shape | 搜索框形状,可选值为 `square` `round` | string | `square` |
 | max-length         | 最大输入长度   | number \| string | `9999`      |

+ 5 - 2
src/packages/__VUE/searchbar/doc.taro.md

@@ -148,7 +148,11 @@ app.use(Searchbar);
 :::demo
 ```html
 <template>
-  <nut-searchbar v-model="searchValue" :clear-icon="icon"> </nut-searchbar>
+  <nut-searchbar v-model="searchValue">
+    <template v-slot:clearIcon>
+      <img :src="icon" style="width: 10px; height: 10px" />
+    </template>
+  </nut-searchbar>
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
@@ -159,7 +163,6 @@ app.use(Searchbar);
       const state = reactive({
         searchValue: ""
       });
-
       return {
         ...toRefs(state),
         icon

+ 4 - 8
src/packages/__VUE/searchbar/index.scss

@@ -70,14 +70,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        position: absolute;
-        z-index: 2;
-        top: 50%;
-        right: 0;
-        width: 16px;
-        height: 16px;
-        margin-top: -8px;
-        margin-right: 10px;
+        margin-right: 13px;
         & .nut-searchbar__nut-icon-mask-close {
           color: rgb(204, 204, 204);
           &:hover {
@@ -86,6 +79,9 @@
           }
         }
       }
+      .nut-searchbar__input-bar_clear {
+        padding-right: 10px;
+      }
     }
 
     .nut-searchbar__iptleft-search-icon {

+ 1 - 1
src/packages/__VUE/searchbar/index.taro.vue

@@ -11,7 +11,7 @@
         <form action="#" onsubmit="return false" @submit.prevent="handleSubmit">
           <input
             ref="inputsearch"
-            class="nut-searchbar__input-bar"
+            :class="['nut-searchbar__input-bar', clearable && 'nut-searchbar__input-bar_clear']"
             :type="inputType"
             :maxlength="maxLength"
             :placeholder="placeholder || translate('placeholder')"

+ 1 - 1
src/packages/__VUE/searchbar/index.vue

@@ -16,7 +16,7 @@
         <form action="#" @submit.prevent="handleSubmit">
           <input
             ref="inputsearch"
-            class="nut-searchbar__input-bar"
+            :class="['nut-searchbar__input-bar', clearable && 'nut-searchbar__input-bar_clear']"
             :type="inputType"
             :maxlength="maxLength"
             :placeholder="placeholder || translate('placeholder')"

+ 1 - 1
src/packages/__VUE/textarea/demo.vue

@@ -5,7 +5,7 @@
     <h2>{{ translate('title') }}</h2>
     <nut-textarea v-model="value2" limit-show max-length="20" />
     <h2>{{ translate('title1') }}</h2>
-    <nut-textarea v-model="value3" :rows="1" autosize />
+    <nut-textarea v-model="value3" autosize />
     <h2>{{ translate('title2') }}</h2>
     <nut-textarea readonly :model-value="translate('desc1')" />
     <h2>{{ translate('title3') }}</h2>

+ 1 - 1
src/sites/mobile-taro/vue/src/dentry/pages/searchbar/index.vue

@@ -30,7 +30,7 @@
     <h2>自定义清除按钮 icon</h2>
     <nut-searchbar v-model="searchValue6">
       <template v-slot:clearIcon>
-        <img :src="icon" style="width: 10px; height: 10px" />
+        <img :src="icon" style="width: 20px; height: 20px" />
       </template>
     </nut-searchbar>