feat(H5): H5导航栏搜索框增加清除按钮

src/platforms/h5/components/page/pageHead.vue

 <template>
   <uni-page-head :uni-page-head-type="type">
-    <div
+    <div
       :style="{transitionDuration:duration,transitionTimingFunction:timingFunc,backgroundColor:bgColor,color:textColor}"
-      :class="headClass"
-      class="uni-page-head"
+      :class="headClass"
+      class="uni-page-head"
     >
       <div class="uni-page-head-hd">
-        <div
-          v-show="backButton"
-          class="uni-page-head-btn"
-          @click="_back"
+        <div
+          v-show="backButton"
+          class="uni-page-head-btn"
+          @click="_back"
         >
-          <i
-            :style="{color:color,fontSize:'27px'}"
-            class="uni-btn-icon"
+          <i
+            :style="{color:color,fontSize:'27px'}"
+            class="uni-btn-icon"
           >&#xe601;</i>
         </div>
         <template v-for="(btn,index) in btns">
-          <div
-            v-if="btn.float === 'left'"
-            :key="index"
+          <div
+            v-if="btn.float === 'left'"
+            :key="index"
             :style="{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
-            :badge-text="btn.badgeText"
+            :badge-text="btn.badgeText"
             :class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
-            class="uni-page-head-btn"
+            class="uni-page-head-btn"
           >
-            <i
-              :style="_formatBtnStyle(btn)"
-              class="uni-btn-icon"
-              @click="_onBtnClick(index)"
-              v-html="_formatBtnFontText(btn)"
+            <i
+              :style="_formatBtnStyle(btn)"
+              class="uni-btn-icon"
+              @click="_onBtnClick(index)"
+              v-html="_formatBtnFontText(btn)"
             />
           </div>
         </template>
       </div>
-      <div
-        v-if="!searchInput"
-        class="uni-page-head-bd"
+      <div
+        v-if="!searchInput"
+        class="uni-page-head-bd"
       >
-        <div
-          :style="{fontSize:titleSize,opacity:type==='transparent'?0:1}"
-          class="uni-page-head__title"
+        <div
+          :style="{fontSize:titleSize,opacity:type==='transparent'?0:1}"
+          class="uni-page-head__title"
         >
-          <i
-            v-if="loading"
-            class="uni-loading"
+          <i
+            v-if="loading"
+            class="uni-loading"
           />
-          <img
-            v-if="titleImage!==''"
-            :src="titleImage"
-            class="uni-page-head__title_image"
+          <img
+            v-if="titleImage!==''"
+            :src="titleImage"
+            class="uni-page-head__title_image"
           >
           <template v-else>
             {{ titleText }}
           </template>
         </div>
       </div>
-      <div
-        v-if="searchInput"
+      <div
+        v-if="searchInput"
         :style="{'border-radius':searchInput.borderRadius,'background-color':searchInput.backgroundColor}"
-        class="uni-page-head-search"
+        class="uni-page-head-search"
       >
-        <div
-          :style="{color:searchInput.placeholderColor}"
-          :class="[`uni-page-head-search-placeholder-${focus || text ? 'left' : searchInput.align}`]"
-          class="uni-page-head-search-placeholder"
-          v-text="text || composing ? '' : searchInput.placeholder"
+        <div
+          :style="{color:searchInput.placeholderColor}"
+          :class="[`uni-page-head-search-placeholder-${focus || showPlaceholder ? 'left' : searchInput.align}`]"
+          class="uni-page-head-search-placeholder"
+          v-text="showPlaceholder || composing ? '' : searchInput.placeholder"
         />
-        <v-uni-input
-          ref="input"
-          v-model="text"
-          :focus="searchInput.autoFocus"
-          :disabled="searchInput.disabled"
+        <v-uni-input
+          ref="input"
+          v-model="text"
+          :focus="searchInput.autoFocus"
+          :disabled="searchInput.disabled"
           :style="{color:searchInput.color}"
-          :placeholder-style="`color:${searchInput.placeholderColor}`"
-          class="uni-page-head-search-input"
+          :placeholder-style="`color:${searchInput.placeholderColor}`"
+          class="uni-page-head-search-input"
           confirm-type="search"
-          @focus="_focus"
-          @blur="_blur"
-          @update:value="_input"
+          @focus="_focus"
+          @blur="_blur"
+          @update:value="_input"
         />
+        <i
+          v-if="text"
+          class="uni-icon-clear"
+          @click="_clearInput"
+        >&#xea0f;</i>
       </div>
       <div class="uni-page-head-ft">
         <template v-for="(btn,index) in btns">
-          <div
-            v-if="btn.float !== 'left'"
-            :key="index"
+          <div
+            v-if="btn.float !== 'left'"
+            :key="index"
             :style="{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
-            :badge-text="btn.badgeText"
+            :badge-text="btn.badgeText"
             :class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
-            class="uni-page-head-btn"
+            class="uni-page-head-btn"
           >
-            <i
-              :style="_formatBtnStyle(btn)"
-              class="uni-btn-icon"
-              @click="_onBtnClick(index)"
-              v-html="_formatBtnFontText(btn)"
+            <i
+              :style="_formatBtnStyle(btn)"
+              class="uni-btn-icon"
+              @click="_onBtnClick(index)"
+              v-html="_formatBtnFontText(btn)"
             />
           </div>
         </template>
       </div>
     </div>
-    <div
-      v-if="type!=='transparent'&&type!=='float'"
-      :class="{'uni-placeholder-titlePenetrate': titlePenetrate}"
-      class="uni-placeholder"
+    <div
+      v-if="type!=='transparent'&&type!=='float'"
+      :class="{'uni-placeholder-titlePenetrate': titlePenetrate}"
+      class="uni-placeholder"
     />
   </uni-page-head>
 </template>
@@ -346,6 +351,11 @@
   uni-page-head .uni-page-head-shadow-yellow::after {
     background-image: url("https://cdn.dcloud.net.cn/img/shadow-yellow.png");
   }
+
+  uni-page-head .uni-icon-clear {
+    align-self: center;
+    padding-right: 5px;
+  }
 </style>
 <script>
 import appendCss from 'uni-platform/helpers/append-css'
@@ -441,7 +451,8 @@ export default {
     return {
       focus: false,
       text: '',
-      composing: false
+      composing: false,
+      showPlaceholder: false
     }
   },
   computed: {
@@ -496,6 +507,9 @@ export default {
       input.$watch('composing', val => {
         this.composing = val
       })
+      input.$watch('valueSync', val => {
+        this.showPlaceholder = !!val
+      })
       if (this.searchInput.disabled) {
         input.$el.addEventListener('click', () => {
           UniServiceJSBridge.emit('onNavigationBarSearchInputClicked', '')
@@ -567,7 +581,11 @@ export default {
       UniServiceJSBridge.emit('onNavigationBarSearchInputChanged', {
         text
       })
+    },
+    _clearInput () {
+      this.text = ''
+      this._input(this.text)
     }
   }
 }
-</script>
+</script>