Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/packages/__VUE/searchbar/demo.vue

@@ -29,8 +29,8 @@ export default createDemo({
       searchValue: ''
     });
 
-    const search = function () {
-      console.log('ENTER clicked');
+    const search = function (e: any) {
+      console.log('search now', e);
     };
 
     const clickLeft = function () {
@@ -48,7 +48,5 @@ export default createDemo({
 
 <style lang="scss" scoped>
 .wrap {
-  height: 80px;
-  background: rgba(0, 0, 0, 0.1);
 }
 </style>

src/packages/__VUE/searchbar/doc.md

@@ -65,6 +65,7 @@ app.use(SearchBar);
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | max-length         | 最大输入长度   | [Number,String] | '9999'      |
+| input-type    | 输入框类型   | String | 'text'      |
 | placeholder        | 输入框默认暗纹  | String | '请输入'   |
 | clearable          | 是否展示清除按钮 | Boolean | true     |
 | has-left-in     | 是否展示输入框内 左icon     | Boolean | true |

src/packages/__VUE/searchbar/index.scss

@@ -10,6 +10,7 @@
     padding: 0 0 0 13px;
     background-color: #fff;
     border-radius: 16px;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);
 
     .input-inner {
       display: flex;

src/packages/__VUE/searchbar/index.vue

@@ -8,17 +8,18 @@
         <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"
-        />
+        <form action="#" @submit.prevent="handleSubmit">
+          <input
+            class="input-bar"
+            :type="inputType"
+            :maxlength="maxLength"
+            :placeholder="placeholder"
+            :value="modelValue"
+            @input="valueChange"
+            @focus="valueFocus"
+            @blur="valueBlur"
+          />
+        </form>
         <view @click="handleClear" class="input-clear" v-if="clearable" v-show="modelValue.length > 0">
           <nut-icon name="mask-close" size="12px"></nut-icon>
         </view>
@@ -48,6 +49,10 @@ export default create({
       type: [String, Number],
       default: ''
     },
+    inputType: {
+      type: String,
+      default: 'text'
+    },
     maxLength: {
       type: [String, Number],
       default: '9999'
@@ -108,15 +113,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 +132,17 @@ export default create({
       emit('clear', '');
     };
 
+    const handleSubmit = () => {
+      emit('search', props.modelValue);
+    };
+
     return {
       ...toRefs(state),
       valueChange,
       valueFocus,
       valueBlur,
       handleClear,
-      searchAction
+      handleSubmit
     };
   }
 });