searchBar优化

src/packages/searchbar/demo.vue

@@ -30,10 +30,30 @@
 		        @submit="submitFun"
 	        ></nut-searchbar>
         </div>
+
+		<h4>获取焦点与失去焦点</h4>
+        <div class="demo1">
+            <nut-searchbar
+		        placeText="请输入自定义文案"
+		        @submit="search"
+				ref="myInput"
+	        ></nut-searchbar>
+        </div>
     </div>
 </template>
 <script>
 	export default {
+		mounted(){
+
+			const th = this
+			this.$nextTick(function() {
+				setTimeout(function() {
+					th.$refs.myInput.focus()
+				}, 2000)
+				
+			})
+			
+		},
 	    methods:{
 	    	focusFun() {
 	    		console.log('获取焦点操作！');
@@ -49,7 +69,12 @@
             submitFun(value) {
             	console.log(value);
                 console.log('默认提交操作！');
-            }
+			},
+			
+			search(value) {
+				this.$refs.myInput.blur()
+				console.log('搜索')
+			}
 	    }
 	}
 </script>

src/packages/searchbar/doc.md

@@ -42,6 +42,19 @@
     @submit="submitFun"
 ></nut-searchbar>
 ```
+
+## 获取焦点与失去焦点
+
+#### 注：由于移动设备的不同，第一次自动获取焦点并不一定能吊起键盘，需要手动吊起来一次，当再次进入时则正常吊起键盘
+
+```html
+<nut-searchbar
+    placeText="请输入自定义文案"
+    @submit="search"
+    ref="myInput"
+></nut-searchbar>
+```
+
 > 输入、失去焦点、提交事件都会返回当前输入值
 
 ```javascript
@@ -50,6 +63,12 @@ export default {
         return {
         }
     },
+    mounted(){
+        //设置获取焦点
+        this.$nextTick(function() {
+            this.$refs.myInput.focus()
+        })
+    },
     methods:{
         focusFun() {
             console.log('获取焦点操作！');
@@ -65,6 +84,11 @@ export default {
         submitFun(value) {
             console.log(value);
             console.log('默认提交操作！');
+        },
+        search(value) {
+            //点击键盘中的’搜索‘时，失去焦点
+            this.$refs.myInput.blur()
+            console.log('搜索')
         }
     }
 }

src/packages/searchbar/searchbar.scss

@@ -30,7 +30,11 @@
 		    margin-left: 10px;
 		    background-color: $light-color;
 		    border-color: transparent;
-		    outline: none;
+			outline: none;
+			
+			&::-webkit-search-cancel-button{
+				display: none;
+			}
 	    }
 	    &.focus {
 	    	box-shadow: 0px 0px 5px 0px $light-color;

src/packages/searchbar/searchbar.vue

@@ -1,14 +1,16 @@
 <template>
     <div :class="['nut-searchbar',customClass ? customClass : '']">
     	<div class="search-input" :class="[animation ? 'nut-search-ani':'',inputFocusAnimation?'focus':'']">
-	    	<form action="" id="input-form" @submit="submitFun">
+	    	<form action="javascript:return true" id="input-form">
 	    		<nut-icon type="search" v-if="hasIcon" :size="searchIconSize" :color="searchIconColor"></nut-icon>
-	    		<input type="text"
-	    		v-model="value"
-	    		:placeholder="placeText || nutTranslate('lang.searchbar.placeText')"
-	    		@focus="focusFun"
-	    		@input="inputFun"
-	    		@blur="blurFun"
+	    		<input type="search"
+					v-model="value"
+					:placeholder="placeText || nutTranslate('lang.searchbar.placeText')"
+				
+					@keyup.enter="submitFun"
+					@input="inputFun"
+					@blur="blurFun"
+					ref="searchInput"
 	    		>
 	    		<span class="close-icon" :class="hasCloseIcon ? 'show':''"
 	    		@click="clearInput">
@@ -108,12 +110,22 @@ export default {
     		this.$emit('input', this.value);
     	},
     	blurFun() {
-    		this.inputFocusAnimation = false;
+			this.inputFocusAnimation = false;
     		this.$emit('blur', this.value);
     	},
         submitFun() {
             this.$emit('submit', this.value);
-        }
+		},
+		// 失去焦点
+		blur() {
+			this.$refs.searchInput.blur()
+		},
+		//js控制获取焦点
+		focus() {
+			this.$nextTick(function() {
+				this.$refs.searchInput.focus()
+			})
+		}
     }
 }
 </script>

src/packages/textinput/demo.vue

@@ -86,8 +86,7 @@
     <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 class="searchBtn" @click="submit">搜索</div>
     </div>
   </div>
 </template>
@@ -107,6 +106,16 @@ export default {
       result: "尚未触发"
     };
   },
+
+  mounted() {
+    const th = this
+			this.$nextTick(function() {
+				setTimeout(function() {
+					th.$refs.myInput.focus()
+				}, 2000)
+				
+			})
+  },
   methods: {
     onFocus() {
       this.result = "focus事件触发！";
@@ -115,9 +124,6 @@ export default {
       this.result = "blur事件触发！";
     },
 
-    autoFocusFun() {
-       this.$refs.myInput.autoFocus()
-    },
     submit() {
         this.$refs.myInput.blur()
     }

src/packages/textinput/doc.md

@@ -62,6 +62,19 @@
     v-model="val"
 />
 ```
+
+自动聚焦
+
+注：由于移动设备的不同，第一次自动获取焦点并不一定能吊起键盘，需要手动吊起来一次，当再次进入时则正常吊起键盘
+
+```html
+<div class="autoFucus">
+  <nut-textinput  class="my-input" type="search" v-model="val8"  placeholder="请输入搜索内容" ref="myInput" @keyup.enter="submit" />
+
+  <div class="searchBtn" @click="submit">搜索</div>
+</div>
+```
+
 ```javascript
 export default {
   data() {
@@ -69,12 +82,22 @@ export default {
       val: ""
     };
   },
+  mounted() {
+    //设置获取焦点
+    this.$nextTick(function() {
+				this.$refs.myInput.focus()
+		})
+  },
   methods: {
     onFocus() {
       console.log("focus事件触发！");
     },
     onBlur() {
       console.log("blur事件触发！");
+    },
+    submit() {
+      //失去焦点
+        this.$refs.myInput.blur()
     }
   }
 };

src/packages/textinput/textinput.scss

@@ -18,6 +18,10 @@
             color: #C1C4CB;
             font-style: normal;
         }
+
+        &::-webkit-search-cancel-button{
+            display: none;
+        }
     }
 
     .nut-textinput-clear {
@@ -44,5 +48,9 @@
         &::-webkit-input-placeholder {
             color: #D1D3D9;
         }
+
+        &::-webkit-search-cancel-button{
+            display: none;
+        }
     }
 }

src/packages/textinput/textinput.vue

@@ -84,7 +84,7 @@ export default {
       this.clearBtnShow = false;
     },
 
-    autoFocus() {
+    focus() {
       this.$nextTick(function() {
         this.$refs.nutUiInput.focus()
       })