搜索框优化

src/packages/textinput/demo.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="textinput-demo">
+
     <h4>基本用法</h4>
     <div>
       <nut-cell>
@@ -53,6 +54,7 @@
         </span>
       </nut-cell>
     </div>
+    
     <h4>使用input原生事件</h4>
     <div>
       <nut-cell>
@@ -79,6 +81,14 @@
         </span>
       </nut-cell>
     </div>
+    
+    <h4>自动聚焦</h4>
+    <div class="autoFucus">
+      <nut-textinput  class="my-input" type="search" v-model="val8"  placeholder="请输入搜索内容" ref="myInput" @keyup.enter="submit" />
+
+      <div class="searchBtn" @click="autoFocusFun">搜索</div>
+      <!-- <nut-button class="searchBtn" shape="circle" type="gray" small @click="autoFocusFun"></nut-button> -->
+    </div>
   </div>
 </template>
 
@@ -93,6 +103,7 @@ export default {
       val5: "我使用了readonly原生属性",
       val6: "",
       val7: "",
+      val8: "",
       result: "尚未触发"
     };
   },
@@ -102,6 +113,13 @@ export default {
     },
     onBlur() {
       this.result = "blur事件触发！";
+    },
+
+    autoFocusFun() {
+       this.$refs.myInput.autoFocus()
+    },
+    submit() {
+        this.$refs.myInput.blur()
     }
   }
 };
@@ -116,6 +134,21 @@ export default {
   padding: 0 10px;
 }
 
+.autoFucus{
+  background: #fff;
+  padding: 10px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .my-input{
+    flex: 1;
+  }
+  .searchBtn{
+    margin-left: 10px;
+  }
+}
 .nut-textinput {
   &.my-input {
     input {

src/packages/textinput/doc.md

@@ -86,7 +86,13 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | value | 当前input值，可使用 v-model 双向绑定数据 | String | ''
+| type | input输入框的类型 | String | 'text'
+| placeholder | 占位文本 | String | ''
 | label | 文本框前面的标签 | String | ''
 | disabled | 是否禁用 | Boolean | false
-| clearBtn | 是否需要清空按钮 | Boolean | true
-| hasBorder | 是否需要边框 | Boolean | true
+| clear-btn | 是否需要清空按钮 | Boolean | true
+| has-border | 是否需要边框 | Boolean | true
+
+## 特殊说明 
+
+设置input框自动聚焦时，由于ios和安卓设备的不同，在ios中，引入的父组件第一次加载，键盘不会弹起，退出再次进入会自动弹起。

src/packages/textinput/textinput.vue

@@ -1,22 +1,26 @@
 <template>
-  <label :class="['nut-textinput',{'nut-textinput-disabled':disabled}]">
-    <span class="nut-textinput-label" v-if="label">{{label}}</span>
-    <input
-      :type="type"
-      :value="value"
-      :disabled="disabled"
-      :style="{'borderWidth':hasBorder?'':0,'outline':outline?'':'none','padding-right':clearBtn?'':'10px'}"
-      v-bind="$attrs"
-      v-on="inputListeners"
-    >
-    <span class="nut-textinput-clear" v-if="clearBtn" v-show="clearBtnShow" @click="clear">
-      <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-        <path
-          d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm2.8 9.7c.3.3.3.8 0 1.1s-.8.3-1.1 0L8 9.1l-1.7 1.7c-.3.3-.8.3-1.1 0-.3-.3-.3-.8 0-1.1L6.9 8 5.2 6.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0L8 6.9l1.7-1.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1L9.1 8l1.7 1.7z"
-        ></path>
-      </svg>
-    </span>
-  </label>
+  <form action="javascript:return true" :class="['nut-textinput',{'nut-textinput-disabled':disabled}]">
+    
+      <span class="nut-textinput-label" v-if="label">{{label}}</span>
+      <input
+        :type="type"
+        :placeholder="placeholder"
+        :value="value"
+        :disabled="disabled"
+        ref='nutUiInput'
+        :style="{'borderWidth':hasBorder?'':0,'outline':outline?'':'none','padding-right':clearBtn?'':'10px'}"
+        v-bind="$attrs"
+        v-on="inputListeners"
+        
+      />
+      <span class="nut-textinput-clear" v-if="clearBtn" v-show="clearBtnShow" @click="clear">
+        <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+          <path
+            d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm2.8 9.7c.3.3.3.8 0 1.1s-.8.3-1.1 0L8 9.1l-1.7 1.7c-.3.3-.8.3-1.1 0-.3-.3-.3-.8 0-1.1L6.9 8 5.2 6.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0L8 6.9l1.7-1.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1L9.1 8l1.7 1.7z"
+          ></path>
+        </svg>
+      </span>
+  </form>
 </template>
 <script>
 export default {
@@ -34,6 +38,11 @@ export default {
       type: String,
       default: ""
     },
+    placeholder:{
+      type: String,
+      default: ""
+    },
+    
     disabled: {
       type: Boolean,
       default: false
@@ -68,14 +77,26 @@ export default {
       });
     }
   },
+
   methods: {
     clear() {
       this.$emit("input", "");
       this.clearBtnShow = false;
+    },
+
+    autoFocus() {
+      this.$nextTick(function() {
+        this.$refs.nutUiInput.focus()
+      })
+    },
+
+    blur() {
+      this.$refs.nutUiInput.blur()
     }
   },
   mounted() {
     this.clearBtnShow = !!this.value;
+
   }
 };
 </script>