fix(searchbar): 扩充文档内容 (#809)

* fix: 样式冲突问题修复

* fix: 文档修改ImagePreview

* fix: 文档修复ImagePreview，体现taro

* upd: imagepreview组件优化

* feat: searchbar 组件启动开发

* feat: searchbar 开发初步完成；迁移至taro

* feat: searchbar 适配 taro

* upd: imageprevie import 优化

* upd: searchbar 外套form，对外暴露 input-type

* fix: imagepreview 引入 swiper 报错问题修复

* fix: 修复 searchbar 的一些问题；扩充文档内容，使描述更详细

* fix: searchbar 样式微调

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/__VUE/searchbar/demo.vue

@@ -1,7 +1,31 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-searchbar class="wrap" v-model="searchValue" @search="search">
+    <nut-searchbar v-model="searchValue"> </nut-searchbar>
+
+    <h2>搜索事件监听</h2>
+    <nut-searchbar v-model="searchValue1" @search="search"> </nut-searchbar>
+
+    <h2>显示搜索 icon</h2>
+    <nut-searchbar v-model="searchValue2" :has-left-in="true">
+      <template v-slot:leftin>
+        <nut-icon size="14" name="search2"></nut-icon>
+      </template>
+    </nut-searchbar>
+
+    <h2>右侧添加搜索文字</h2>
+    <nut-searchbar v-model="searchValue3" :has-right-out="true">
+      <template v-slot:rightout> 搜索 </template>
+    </nut-searchbar>
+
+    <h2>显示全部 icon</h2>
+    <nut-searchbar
+      v-model="searchValue4"
+      :has-left-in="true"
+      :has-left-out="true"
+      :has-right-in="true"
+      :has-right-out="true"
+    >
       <template v-slot:leftout>
         <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
       </template>
@@ -21,20 +45,25 @@
 <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({
   props: {},
   setup() {
     const state = reactive({
-      searchValue: ''
+      searchValue: '',
+      searchValue1: '',
+      searchValue2: '',
+      searchValue3: '',
+      searchValue4: ''
     });
 
     const search = function (e: any) {
-      console.log('search now', e);
+      Toast.text('搜索触发');
     };
 
     const clickLeft = function () {
-      console.log('left clicked');
+      Toast.text('点击回退按钮');
     };
 
     return {
@@ -46,7 +75,4 @@ export default createDemo({
 });
 </script>
 
-<style lang="scss" scoped>
-.wrap {
-}
-</style>
+<style lang="scss" scoped></style>

src/packages/__VUE/searchbar/doc.md

@@ -22,42 +22,140 @@ app.use(SearchBar);
 ### 基础用法
 
 ```html
-<nut-searchbar class="wrap" v-model="searchValue" @search="search">
+  <nut-searchbar v-model="searchValue"></nut-searchbar>
+```
+
+```javascript
+  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>
+```
+
+```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,
+      };
+    }
+  }
+```
+
+### 显示搜索 icon
+
+```html
+  <nut-searchbar v-model="searchValue" :has-left-in="true">
+    <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),
+      };
+    }
+  }
+```
+
+### 右侧添加搜索文字
+
+```html
+  <nut-searchbar v-model="searchValue" :has-right-out="true">
+    <template v-slot:rightout>
+      搜索
+    </template>
+  </nut-searchbar>
+```
+
+```javascript
+  import { toRefs, reactive } from 'vue';
+
+  export default {
+    setup() {
+      const state = reactive({
+        searchValue: ""
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    }
+  }
+```
+
+### 显示全部 icon
+
+```html
+  <nut-searchbar v-model="searchValue" :has-left-in="true" :has-left-out="true" :has-right-in="true" :has-right-out="true">
     <template v-slot:leftout>
-    <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
+      <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
     </template>
     <template v-slot:leftin>
-    <nut-icon size="14" name="search2"></nut-icon>
+      <nut-icon size="14" name="search2"></nut-icon>
     </template>
     <template v-slot:rightin>
-    <nut-icon size="20" name="photograph"></nut-icon>
+      <nut-icon size="20" name="photograph"></nut-icon>
     </template>
     <template v-slot:rightout>
-    <nut-icon size="20" name="message"></nut-icon>
+      <nut-icon size="20" name="message"></nut-icon>
     </template>
-</nut-searchbar>
+  </nut-searchbar> 
 ```
 
 ```javascript
- setup() {
-    const state = reactive({
-      searchValue: ""
-    });
+  import { toRefs, reactive } from 'vue';
+  import { Icon } from '@nutui/nutui';
 
-    const search = function () {
-      console.log('ENTER clicked');
-    }
+  export default {
+    setup() {
+      const state = reactive({
+        searchValue: ""
+      });
 
-    const clickLeft = function () {
-      console.log('left clicked');
+      return {
+        ...toRefs(state),
+      };
     }
-
-    return {
-      clickLeft,
-      search,
-      ...toRefs(state),
-    };
-}
+  }
 ```
     
 ### Props
@@ -68,10 +166,10 @@ app.use(SearchBar);
 | input-type    | 输入框类型   | String | 'text'      |
 | placeholder        | 输入框默认暗纹  | String | '请输入'   |
 | clearable          | 是否展示清除按钮 | Boolean | true     |
-| has-left-in     | 是否展示输入框内 左icon     | Boolean | true |
-| has-left-out     | 是否展示输入框外 左icon     | Boolean | true |
-| has-right-in     | 是否展示输入框内 右icon     | Boolean | true |
-| has-right-out     | 是否展示输入框外 右icon     | Boolean | true |
+| has-left-in     | 是否展示输入框内 左icon     | Boolean | false |
+| has-left-out     | 是否展示输入框外 左icon     | Boolean | false |
+| has-right-in     | 是否展示输入框内 右icon     | Boolean | false |
+| has-right-out     | 是否展示输入框外 右icon     | Boolean | false |
 
 ### Events
 

src/packages/__VUE/searchbar/index.scss

@@ -15,6 +15,12 @@
     .input-inner {
       display: flex;
       position: relative;
+      width: 100%;
+      form {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
       .input-clear {
         display: flex;
         justify-content: center;
@@ -26,6 +32,7 @@
         width: 16px;
         height: 16px;
         margin-top: -8px;
+        margin-right: 10px;
         & .nut-icon-mask-close {
           color: rgb(204, 204, 204);
           &:hover {
@@ -37,18 +44,18 @@
     }
 
     .iptleft-search-icon {
-      margin-left: 12px;
       margin-right: 6px;
       width: 14px;
       height: 14px;
     }
 
     .iptright-sarch-icon {
+      margin-right: 12px;
     }
 
     .input-bar {
-      width: 200px;
-      height: 32px;
+      width: 100%;
+      height: 36px;
       flex: 1;
       padding: 0;
       margin: 0;
@@ -72,6 +79,8 @@
 
   .right-search-icon {
     margin-left: 16px;
+    font-size: 14px;
+    color: rgba(26, 26, 26, 1);
   }
 
   .btn-right {

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

@@ -27,7 +27,7 @@
         <slot name="rightin"></slot>
       </view>
     </view>
-    <view v-if="hasRightIn" class="search-icon right-search-icon">
+    <view v-if="hasRightOut" class="search-icon right-search-icon">
       <slot name="rightout"></slot>
     </view>
   </view>
@@ -62,19 +62,19 @@ export default create({
     },
     hasLeftIn: {
       type: Boolean,
-      default: true
+      default: false
     },
     hasLeftOut: {
       type: Boolean,
-      default: true
+      default: false
     },
     hasRightIn: {
       type: Boolean,
-      default: true
+      default: false
     },
     hasRightOut: {
       type: Boolean,
-      default: true
+      default: false
     }
   },
   components: {

src/packages/__VUE/searchbar/index.vue

@@ -28,7 +28,7 @@
         <slot name="rightin"></slot>
       </view>
     </view>
-    <view v-if="hasRightIn" class="search-icon right-search-icon">
+    <view v-if="hasRightOut" class="search-icon right-search-icon">
       <slot name="rightout"></slot>
     </view>
   </view>
@@ -67,19 +67,19 @@ export default create({
     },
     hasLeftIn: {
       type: Boolean,
-      default: true
+      default: false
     },
     hasLeftOut: {
       type: Boolean,
-      default: true
+      default: false
     },
     hasRightIn: {
       type: Boolean,
-      default: true
+      default: false
     },
     hasRightOut: {
       type: Boolean,
-      default: true
+      default: false
     }
   },
   components: {