style(searchbar): 样式优化

src/packages/__VUE/searchbar/demo.vue

@@ -19,7 +19,12 @@
     </nut-searchbar>
 
     <h2>更改输入框内部及外部的背景样式</h2>
-    <nut-searchbar v-model="searchValue4" background="red" input-background="#fff"> </nut-searchbar>
+    <nut-searchbar
+      v-model="searchValue4"
+      background="linear-gradient(to right, #9866F0, #EB4D50)"
+      input-background="#fff"
+    >
+    </nut-searchbar>
 
     <h2>显示全部 icon</h2>
     <nut-searchbar v-model="searchValue5">

src/packages/__VUE/searchbar/doc.md

@@ -1,4 +1,4 @@
-# Searchbar组件
+# Searchbar 搜索栏
 
 ### 介绍
 
@@ -14,7 +14,6 @@ import { SearchBar, Icon } from '@nutui/nutui';
 // taro
 import { SearchBar, Icon } from '@nutui/nutui-taro';
 
-
 const app = createApp();
 app.use(SearchBar).use(Icon);
 ```    
@@ -26,158 +25,158 @@ app.use(SearchBar).use(Icon);
 ```
 
 ```javascript
-  import { toRefs, reactive } from 'vue';
-
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ""
-      });
-
-      return {
-        ...toRefs(state),
-      };
-    }
+import { toRefs, reactive } from 'vue';
+
+export default {
+  setup() {
+    const state = reactive({
+      searchValue: ""
+    });
+
+    return {
+      ...toRefs(state),
+    };
   }
+}
 ```
 
 ### 搜索事件监听
 
 ```html
-  <nut-searchbar v-model="searchValue" @search="search"></nut-searchbar>
+<nut-searchbar v-model="searchValue" @search="search"></nut-searchbar>
 ```
 
 ```javascript
-  import { toRefs, reactive } from 'vue';
-  import { Toast } from '@nutui/nutui';
-
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ""
-      });
-
-      const search = function () {
-        Toast.text('搜索触发');
-      };
-
-      return {
-        ...toRefs(state),
-        search,
-      };
-    }
+import { toRefs, reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+
+export default {
+  setup() {
+    const state = reactive({
+      searchValue: ""
+    });
+
+    const search = function () {
+      Toast.text('搜索触发');
+    };
+
+    return {
+      ...toRefs(state),
+      search,
+    };
   }
+}
 ```
 
 ### 显示搜索 icon
 
 ```html
-  <nut-searchbar v-model="searchValue">
-    <template v-slot:leftin>
-      <nut-icon size="14" name="search2"></nut-icon>
-    </template>
-  </nut-searchbar>
+<nut-searchbar v-model="searchValue">
+  <template v-slot:leftin>
+    <nut-icon size="14" name="search2"></nut-icon>
+  </template>
+</nut-searchbar>
 ```
 
 ```javascript
-  import { toRefs, reactive } from 'vue';
-  import { Icon } from '@nutui/nutui';
-
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ""
-      });
-
-      return {
-        ...toRefs(state),
-      };
-    }
+import { toRefs, reactive } from 'vue';
+import { Icon } from '@nutui/nutui';
+
+export default {
+  setup() {
+    const state = reactive({
+      searchValue: ""
+    });
+
+    return {
+      ...toRefs(state),
+    };
   }
+}
 ```
 
 ### 右侧添加搜索文字
 
 ```html
-  <nut-searchbar v-model="searchValue">
-    <template v-slot:rightout>
-      搜索
-    </template>
-  </nut-searchbar>
+<nut-searchbar v-model="searchValue">
+  <template v-slot:rightout>
+    搜索
+  </template>
+</nut-searchbar>
 ```
 
 ```javascript
-  import { toRefs, reactive } from 'vue';
-
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ""
-      });
-
-      return {
-        ...toRefs(state),
-      };
-    }
+import { toRefs, reactive } from 'vue';
+
+export default {
+  setup() {
+    const state = reactive({
+      searchValue: ""
+    });
+
+    return {
+      ...toRefs(state),
+    };
   }
+}
 ```
     <h2>更改输入框内部及外部的背景样式</h2>
 
 ### 更改输入框内部及外部的背景样式
 
 ```html
-  <nut-searchbar v-model="searchValue" background="red" input-background="#fff"></nut-searchbar> 
+<nut-searchbar v-model="searchValue4" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff"> </nut-searchbar>
 ```
 
 ```javascript
-  import { toRefs, reactive } from 'vue';
-
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ""
-      });
-
-      return {
-        ...toRefs(state),
-      };
-    }
+import { toRefs, reactive } from 'vue';
+
+export default {
+  setup() {
+    const state = reactive({
+      searchValue: ""
+    });
+
+    return {
+      ...toRefs(state),
+    };
   }
+}
 ```
 ### 显示全部 icon
 
 ```html
-  <nut-searchbar v-model="searchValue">
-    <template v-slot:leftout>
-      <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
-    </template>
-    <template v-slot:leftin>
-      <nut-icon size="14" name="search2"></nut-icon>
-    </template>
-    <template v-slot:rightin>
-      <nut-icon size="20" name="photograph"></nut-icon>
-    </template>
-    <template v-slot:rightout>
-      <nut-icon size="20" name="message"></nut-icon>
-    </template>
-  </nut-searchbar> 
+<nut-searchbar v-model="searchValue">
+  <template v-slot:leftout>
+    <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
+  </template>
+  <template v-slot:leftin>
+    <nut-icon size="14" name="search2"></nut-icon>
+  </template>
+  <template v-slot:rightin>
+    <nut-icon size="20" name="photograph"></nut-icon>
+  </template>
+  <template v-slot:rightout>
+    <nut-icon size="20" name="message"></nut-icon>
+  </template>
+</nut-searchbar> 
 ```
 
-```javascript
-  import { toRefs, reactive } from 'vue';
-  import { Icon } from '@nutui/nutui';
-
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ""
-      });
-
-      return {
-        ...toRefs(state),
-      };
-    }
+``` javascript
+import { toRefs, reactive } from 'vue';
+import { Icon } from '@nutui/nutui';
+
+export default {
+  setup() {
+    const state = reactive({
+      searchValue: ""
+    });
+
+    return {
+      ...toRefs(state),
+    };
   }
+}
 ```
     
 ### Props

src/packages/__VUE/searchbar/index.scss

@@ -20,11 +20,20 @@
       display: flex;
       position: relative;
       width: 100%;
+      > taro-form-core {
+        width: 100%;
+      }
       form {
         display: flex;
         align-items: center;
         width: 100%;
       }
+      input {
+        width: 100%;
+        height: 100%;
+        min-width: 214px;
+        padding-left: 4px;
+      }
       .nut-searchbar__input-clear {
         display: flex;
         justify-content: center;
@@ -84,6 +93,6 @@
   &__right-search-icon {
     margin-left: 16px;
     font-size: 14px;
-    color: rgba(26, 26, 26, 1);
+    color: $searchbar-right-out-color;
   }
 }

src/packages/__VUE/searchbar/index.taro.vue

@@ -21,7 +21,7 @@
           />
         </form>
         <view @click="handleClear" class="nut-searchbar__input-clear" v-if="clearable" v-show="modelValue.length > 0">
-          <nut-icon name="mask-close" size="12px"></nut-icon>
+          <nut-icon name="circle-close" size="12" color="#555"></nut-icon>
         </view>
       </view>
       <view v-if="$slots.rightin" class="nut-searchbar__search-icon nut-searchbar__iptright-sarch-icon">

src/packages/__VUE/searchbar/index.vue

@@ -21,7 +21,7 @@
           />
         </form>
         <view @click="handleClear" class="nut-searchbar__input-clear" v-if="clearable" v-show="modelValue.length > 0">
-          <nut-icon name="mask-close" size="12px"></nut-icon>
+          <nut-icon name="circle-close" size="12" color="#555"></nut-icon>
         </view>
       </view>
       <view v-if="$slots.rightin" class="nut-searchbar__search-icon nut-searchbar__iptright-sarch-icon">

src/packages/styles/variables.scss

@@ -360,6 +360,7 @@ $tabs-vertical-titles-width: 100px !default;
 // searchbar
 $searchbar-background: $white !default;
 $searchbar-input-background: #f7f7f7 !default;
+$searchbar-right-out-color: $black !default;
 
 @import './mixins/index';
 @import './animation/index';

src/sites/mobile-taro/vue/src/feedback/pages/searchbar/index.vue

@@ -19,7 +19,12 @@
     </nut-searchbar>
 
     <h2>更改输入框内部及外部的背景样式</h2>
-    <nut-searchbar v-model="searchValue4" background="red" input-background="#fff"> </nut-searchbar>
+    <nut-searchbar
+      v-model="searchValue4"
+      background="linear-gradient(to right, #9866F0, #EB4D50)"
+      input-background="#fff"
+    >
+    </nut-searchbar>
 
     <h2>显示全部 icon</h2>
     <nut-searchbar v-model="searchValue5">
@@ -41,10 +46,7 @@
 
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
-import { createComponent } from '../../utils/create';
-import { Toast } from '@/packages/nutui.vue';
-const { createDemo } = createComponent('searchbar');
-export default createDemo({
+export default {
   props: {},
   setup() {
     const state = reactive({
@@ -57,11 +59,11 @@ export default createDemo({
     });
 
     const search = function (e: any) {
-      Toast.text('搜索触发');
+      console.log('搜索触发');
     };
 
     const clickLeft = function () {
-      Toast.text('点击回退按钮');
+      console.log('点击回退按钮');
     };
 
     return {
@@ -70,7 +72,7 @@ export default createDemo({
       ...toRefs(state)
     };
   }
-});
+};
 </script>
 
 <style lang="scss" scoped></style>