upd: searchbar 优化 (#820)

* 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 样式微调

* upd: imagepreview 点击轮播区域会关闭弹层

* upd: searchbar 1.props暴露背景样式2.slot使用优化3.sass变量命名优化

* docs: 背景样式增加默认值

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

src/packages/__VUE/imagepreview/index.vue

@@ -8,6 +8,7 @@
         :loop="true"
         direction="horizontal"
         @change="slideChangeEnd"
+        :is-preventDefault="false"
       >
         <nut-swiper-item v-for="(item, index) in images" :key="index">
           <img :src="item.imgSrc" class="nut-imagepreview-img" />

src/packages/__VUE/searchbar/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo">
+  <div class="demo full">
     <h2>基础用法</h2>
     <nut-searchbar v-model="searchValue"> </nut-searchbar>
 
@@ -7,25 +7,22 @@
     <nut-searchbar v-model="searchValue1" @search="search"> </nut-searchbar>
 
     <h2>显示搜索 icon</h2>
-    <nut-searchbar v-model="searchValue2" :has-left-in="true">
+    <nut-searchbar v-model="searchValue2">
       <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">
+    <nut-searchbar v-model="searchValue3">
       <template v-slot:rightout> 搜索 </template>
     </nut-searchbar>
 
+    <h2>更改输入框内部及外部的背景样式</h2>
+    <nut-searchbar v-model="searchValue4" background="red" input-background="#fff"> </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"
-    >
+    <nut-searchbar v-model="searchValue5">
       <template v-slot:leftout>
         <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
       </template>
@@ -55,7 +52,8 @@ export default createDemo({
       searchValue1: '',
       searchValue2: '',
       searchValue3: '',
-      searchValue4: ''
+      searchValue4: '',
+      searchValue5: ''
     });
 
     const search = function (e: any) {

src/packages/__VUE/searchbar/doc.md

@@ -7,16 +7,16 @@
 ### 安装
     
 ```javascript
-import { createApp, reactive, toRefs } from 'vue';
+import { createApp } from 'vue';
 
 // vue
-import { SearchBar } from '@nutui/nutui';
+import { SearchBar, Icon } from '@nutui/nutui';
 // taro
-import { SearchBar } from '@nutui/nutui-taro';
+import { SearchBar, Icon } from '@nutui/nutui-taro';
 
 
 const app = createApp();
-app.use(SearchBar);
+app.use(SearchBar).use(Icon);
 ```    
     
 ### 基础用法
@@ -72,7 +72,7 @@ app.use(SearchBar);
 ### 显示搜索 icon
 
 ```html
-  <nut-searchbar v-model="searchValue" :has-left-in="true">
+  <nut-searchbar v-model="searchValue">
     <template v-slot:leftin>
       <nut-icon size="14" name="search2"></nut-icon>
     </template>
@@ -99,7 +99,7 @@ app.use(SearchBar);
 ### 右侧添加搜索文字
 
 ```html
-  <nut-searchbar v-model="searchValue" :has-right-out="true">
+  <nut-searchbar v-model="searchValue">
     <template v-slot:rightout>
       搜索
     </template>
@@ -121,11 +121,33 @@ app.use(SearchBar);
     }
   }
 ```
+    <h2>更改输入框内部及外部的背景样式</h2>
 
+### 更改输入框内部及外部的背景样式
+
+```html
+  <nut-searchbar v-model="searchValue" background="red" input-background="#fff"></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">
+  <nut-searchbar v-model="searchValue">
     <template v-slot:leftout>
       <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
     </template>
@@ -166,10 +188,10 @@ app.use(SearchBar);
 | input-type    | 输入框类型   | String | 'text'      |
 | placeholder        | 输入框默认暗纹  | String | '请输入'   |
 | clearable          | 是否展示清除按钮 | 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 |
+| background      | 输入框外部背景 | String |   '#fff'   |
+| input-background   | 输入框内部背景 | String |   '#f7f7f7'   |
+
+
 
 ### Events
 

src/packages/__VUE/searchbar/index.scss

@@ -1,18 +1,22 @@
 .nut-searchbar {
   display: flex;
   align-items: center;
-  .search-input {
+  width: 100%;
+  padding: 9px 16px;
+  background: $searchbar-background;
+  box-sizing: border-box;
+  &__search-input {
     display: flex;
     align-items: center;
     width: 100%;
     height: 32px;
     flex: 1;
     padding: 0 0 0 13px;
-    background-color: #fff;
     border-radius: 16px;
     box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);
+    background: $searchbar-input-background;
 
-    .input-inner {
+    .nut-searchbar__input-inner {
       display: flex;
       position: relative;
       width: 100%;
@@ -21,7 +25,7 @@
         align-items: center;
         width: 100%;
       }
-      .input-clear {
+      .nut-searchbar__input-clear {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -33,7 +37,7 @@
         height: 16px;
         margin-top: -8px;
         margin-right: 10px;
-        & .nut-icon-mask-close {
+        & .nut-searchbar__nut-icon-mask-close {
           color: rgb(204, 204, 204);
           &:hover {
             cursor: pointer;
@@ -43,17 +47,17 @@
       }
     }
 
-    .iptleft-search-icon {
+    .nut-searchbar__iptleft-search-icon {
       margin-right: 6px;
       width: 14px;
       height: 14px;
     }
 
-    .iptright-sarch-icon {
+    .nut-searchbar__iptright-sarch-icon {
       margin-right: 12px;
     }
 
-    .input-bar {
+    .nut-searchbar__input-bar {
       width: 100%;
       height: 36px;
       flex: 1;
@@ -67,36 +71,19 @@
     }
   }
 
-  .left-search-icon {
+  &__left-search-icon {
     margin-right: 8px;
   }
 
-  .search-icon {
+  &__search-icon {
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
-  .right-search-icon {
+  &__right-search-icon {
     margin-left: 16px;
     font-size: 14px;
     color: rgba(26, 26, 26, 1);
   }
-
-  .btn-right {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 12px;
-    font-size: 14px;
-    color: #e1251b;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  .nut-icon {
-    vertical-align: middle;
-  }
 }

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

@@ -1,42 +1,42 @@
 <template>
-  <view class="nut-searchbar">
-    <view v-if="hasLeftOut" class="search-icon left-search-icon">
+  <view class="nut-searchbar" :style="searchbarStyle">
+    <view v-if="$slots.leftout" class="nut-searchbar__search-icon nut-searchbar__left-search-icon">
       <slot name="leftout"></slot>
     </view>
-    <view class="search-input">
-      <view v-if="hasLeftIn" class="search-icon iptleft-search-icon">
+    <view class="nut-searchbar__search-input" :style="inputSearchbarStyle">
+      <view v-if="$slots.leftin" class="nut-searchbar__search-icon nut-searchbar__iptleft-search-icon">
         <slot name="leftin"></slot>
       </view>
-      <view class="input-inner">
-        <input
-          class="input-bar"
-          :type="text"
-          :maxlength="maxLength"
-          :placeholder="placeholder"
-          :value="modelValue"
-          @input="valueChange"
-          @focus="valueFocus"
-          @blur="valueBlur"
-          @keypress="searchAction"
-        />
-        <view @click="handleClear" class="input-clear" v-if="clearable" v-show="modelValue.length > 0">
+      <view class="nut-searchbar__input-inner">
+        <form action="#" @submit.prevent="handleSubmit">
+          <input
+            class="nut-searchbar__input-bar"
+            :type="inputType"
+            :maxlength="maxLength"
+            :placeholder="placeholder"
+            :value="modelValue"
+            @input="valueChange"
+            @focus="valueFocus"
+            @blur="valueBlur"
+          />
+        </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>
         </view>
       </view>
-      <view v-if="hasRightIn" class="search-icon iptright-sarch-icon">
+      <view v-if="$slots.rightin" class="nut-searchbar__search-icon nut-searchbar__iptright-sarch-icon">
         <slot name="rightin"></slot>
       </view>
     </view>
-    <view v-if="hasRightOut" class="search-icon right-search-icon">
+    <view v-if="$slots.rightout" class="nut-searchbar__search-icon nut-searchbar__right-search-icon">
       <slot name="rightout"></slot>
     </view>
   </view>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from 'vue';
+import { toRefs, reactive, computed } from 'vue';
 import { createComponent } from '../../utils/create';
-import Icon from '../icon/index.vue';
 const { create } = createComponent('searchbar');
 interface Events {
   eventName: 'change' | 'focus' | 'blur' | 'clear' | 'update:modelValue';
@@ -48,6 +48,10 @@ export default create({
       type: [String, Number],
       default: ''
     },
+    inputType: {
+      type: String,
+      default: 'text'
+    },
     maxLength: {
       type: [String, Number],
       default: '9999'
@@ -60,36 +64,34 @@ export default create({
       type: Boolean,
       default: true
     },
-    hasLeftIn: {
-      type: Boolean,
-      default: false
-    },
-    hasLeftOut: {
-      type: Boolean,
-      default: false
-    },
-    hasRightIn: {
-      type: Boolean,
-      default: false
+    background: {
+      type: String,
+      default: ''
     },
-    hasRightOut: {
-      type: Boolean,
-      default: false
+    inputBackground: {
+      type: String,
+      default: ''
     }
   },
-  components: {
-    [Icon.name]: Icon
-  },
 
   emits: ['change', 'update:modelValue', 'blur', 'focus', 'clear', 'search'],
 
   setup(props, { emit }) {
-    const {} = toRefs(props);
-
     const state = reactive({
       active: false
     });
 
+    const searchbarStyle = computed(() => {
+      return {
+        background: props.background
+      };
+    });
+    const inputSearchbarStyle = computed(() => {
+      return {
+        background: props.inputBackground
+      };
+    });
+
     const valueChange = (event: Event) => {
       const input = event.target as HTMLInputElement;
       let val = input.value;
@@ -108,15 +110,6 @@ export default create({
       emit('focus', value, event);
     };
 
-    const searchAction = (event: any) => {
-      if (event.keyCode == 13) {
-        const input = event.target as HTMLInputElement;
-        let value = input.value;
-        state.active = true;
-        emit('search', value, event);
-      }
-    };
-
     const valueBlur = (event: Event) => {
       setTimeout(() => {
         state.active = false;
@@ -136,13 +129,19 @@ export default create({
       emit('clear', '');
     };
 
+    const handleSubmit = () => {
+      emit('search', props.modelValue);
+    };
+
     return {
       ...toRefs(state),
       valueChange,
       valueFocus,
       valueBlur,
       handleClear,
-      searchAction
+      handleSubmit,
+      searchbarStyle,
+      inputSearchbarStyle
     };
   }
 });

src/packages/__VUE/searchbar/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <view class="nut-searchbar">
-    <view v-if="hasLeftOut" class="search-icon left-search-icon">
+  <view class="nut-searchbar" :style="searchbarStyle">
+    <view v-if="$slots.leftout" class="nut-searchbar__search-icon nut-searchbar__left-search-icon">
       <slot name="leftout"></slot>
     </view>
-    <view class="search-input">
-      <view v-if="hasLeftIn" class="search-icon iptleft-search-icon">
+    <view class="nut-searchbar__search-input" :style="inputSearchbarStyle">
+      <view v-if="$slots.leftin" class="nut-searchbar__search-icon nut-searchbar__iptleft-search-icon">
         <slot name="leftin"></slot>
       </view>
-      <view class="input-inner">
+      <view class="nut-searchbar__input-inner">
         <form action="#" @submit.prevent="handleSubmit">
           <input
-            class="input-bar"
+            class="nut-searchbar__input-bar"
             :type="inputType"
             :maxlength="maxLength"
             :placeholder="placeholder"
@@ -20,24 +20,23 @@
             @blur="valueBlur"
           />
         </form>
-        <view @click="handleClear" class="input-clear" v-if="clearable" v-show="modelValue.length > 0">
+        <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>
         </view>
       </view>
-      <view v-if="hasRightIn" class="search-icon iptright-sarch-icon">
+      <view v-if="$slots.rightin" class="nut-searchbar__search-icon nut-searchbar__iptright-sarch-icon">
         <slot name="rightin"></slot>
       </view>
     </view>
-    <view v-if="hasRightOut" class="search-icon right-search-icon">
+    <view v-if="$slots.rightout" class="nut-searchbar__search-icon nut-searchbar__right-search-icon">
       <slot name="rightout"></slot>
     </view>
   </view>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from 'vue';
+import { toRefs, reactive, computed } from 'vue';
 import { createComponent } from '../../utils/create';
-import Icon from '../icon/index.vue';
 const { create } = createComponent('searchbar');
 interface Events {
   eventName: 'change' | 'focus' | 'blur' | 'clear' | 'update:modelValue';
@@ -65,36 +64,34 @@ export default create({
       type: Boolean,
       default: true
     },
-    hasLeftIn: {
-      type: Boolean,
-      default: false
-    },
-    hasLeftOut: {
-      type: Boolean,
-      default: false
-    },
-    hasRightIn: {
-      type: Boolean,
-      default: false
+    background: {
+      type: String,
+      default: ''
     },
-    hasRightOut: {
-      type: Boolean,
-      default: false
+    inputBackground: {
+      type: String,
+      default: ''
     }
   },
-  components: {
-    [Icon.name]: Icon
-  },
 
   emits: ['change', 'update:modelValue', 'blur', 'focus', 'clear', 'search'],
 
   setup(props, { emit }) {
-    const {} = toRefs(props);
-
     const state = reactive({
       active: false
     });
 
+    const searchbarStyle = computed(() => {
+      return {
+        background: props.background
+      };
+    });
+    const inputSearchbarStyle = computed(() => {
+      return {
+        background: props.inputBackground
+      };
+    });
+
     const valueChange = (event: Event) => {
       const input = event.target as HTMLInputElement;
       let val = input.value;
@@ -142,7 +139,9 @@ export default create({
       valueFocus,
       valueBlur,
       handleClear,
-      handleSubmit
+      handleSubmit,
+      searchbarStyle,
+      inputSearchbarStyle
     };
   }
 });

src/packages/styles/variables.scss

@@ -357,5 +357,9 @@ $tabs-vertical-titles-item-height: 40px !default;
 $tabs-vertical-titles-item-active-line-height: 14px !default;
 $tabs-vertical-titles-width: 100px !default;
 
+// searchbar
+$searchbar-background: $white !default;
+$searchbar-input-background: #f7f7f7 !default;
+
 @import './mixins/index';
 @import './animation/index';

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

@@ -1,7 +1,28 @@
 <template>
-  <div class="demo">
+  <div class="demo full">
     <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">
+      <template v-slot:leftin>
+        <nut-icon size="14" name="search2"></nut-icon>
+      </template>
+    </nut-searchbar>
+
+    <h2>右侧添加搜索文字</h2>
+    <nut-searchbar v-model="searchValue3">
+      <template v-slot:rightout> 搜索 </template>
+    </nut-searchbar>
+
+    <h2>更改输入框内部及外部的背景样式</h2>
+    <nut-searchbar v-model="searchValue4" background="red" input-background="#fff"> </nut-searchbar>
+
+    <h2>显示全部 icon</h2>
+    <nut-searchbar v-model="searchValue5">
       <template v-slot:leftout>
         <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
       </template>
@@ -20,20 +41,27 @@
 
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
-
-export default {
+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: '',
+      searchValue5: ''
     });
 
-    const search = function () {
-      console.log('ENTER clicked');
+    const search = function (e: any) {
+      Toast.text('搜索触发');
     };
 
     const clickLeft = function () {
-      console.log('left clicked');
+      Toast.text('点击回退按钮');
     };
 
     return {
@@ -42,12 +70,7 @@ export default {
       ...toRefs(state)
     };
   }
-};
+});
 </script>
 
-<style lang="scss" scoped>
-.wrap {
-  height: 80px;
-  background: rgba(0, 0, 0, 0.1);
-}
-</style>
+<style lang="scss" scoped></style>