feat: searchbar props v-model、event clear

src/packages/popup/popup.vue

@@ -131,7 +131,7 @@ export default {
       if (this.opened) {
         return;
       }
-      if(this.destroyOnClose){
+      if (this.destroyOnClose) {
         this.showSlot = true;
       }
       this.opened = true;
@@ -206,13 +206,12 @@ export default {
         if (!overlayManager.lockCount) {
           document.body.classList.remove('nut-overflow-hidden');
         }
-      } 
-      if(this.destroyOnClose){
-        setTimeout(()=>{
+      }
+      if (this.destroyOnClose) {
+        setTimeout(() => {
           this.showSlot = false;
-        },this.duration*1000)        
+        }, this.duration * 1000);
       }
-      
 
       overlayManager.closeOverlay(this);
       this.$emit('input', false);

src/packages/searchbar/demo.vue

@@ -1,40 +1,46 @@
 <template>
   <div class="demo-list">
     <h4>基本用法</h4>
-    <nut-searchbar :hasIcon="true" :hasSearchButton="false" :clearable="true"></nut-searchbar>
+    <nut-searchbar v-model="value" :hasIcon="true" :hasSearchButton="false" :clearable="true"></nut-searchbar>
 
     <h4>搜索框对齐方式</h4>
-    <nut-searchbar :hasIcon="true" :hasSearchButton="false" inputAlign="center"></nut-searchbar>
+    <nut-searchbar v-model="value" :hasIcon="true" :hasSearchButton="false" inputAlign="center"></nut-searchbar>
 
     <h4>自定义右侧按钮</h4>
-    <nut-searchbar placeText="右侧默认图标" @submit="searchIcon"></nut-searchbar>
+    <nut-searchbar v-model="value" placeText="右侧默认图标" @submit="searchIcon"></nut-searchbar>
 
-    <nut-searchbar placeText="右侧图标自定义" @submit="searchQR" :searchBtnIcon="require('../../assets/svg/qr.svg')"> </nut-searchbar>
+    <nut-searchbar v-model="value" placeText="右侧图标自定义" @submit="searchQR" :searchBtnIcon="require('../../assets/svg/qr.svg')"> </nut-searchbar>
 
-    <nut-searchbar placeText="右侧默认文字" :hasTextButton="true" @submit="submitFun"></nut-searchbar>
+    <nut-searchbar v-model="value" placeText="右侧默认文字" :hasTextButton="true" @submit="submitFun"></nut-searchbar>
 
-    <nut-searchbar placeText="右侧文字自定义" :hasIcon="true" :hasTextButton="true" textInfo="取消" @submit="cancel"> </nut-searchbar>
+    <nut-searchbar v-model="value" placeText="右侧文字自定义" :hasIcon="true" :hasTextButton="true" textInfo="取消" @submit="cancel"> </nut-searchbar>
 
     <h4>自定义搜索框右侧按钮</h4>
-    <nut-searchbar :hasIcon="true" :hasSearchButton="false" :hasAction="true" @handleAction="handleAction"> </nut-searchbar>
+    <nut-searchbar v-model="value" :hasIcon="true" :hasSearchButton="false" :hasAction="true" @handle-action="handleAction"> </nut-searchbar>
 
     <nut-searchbar
+      v-model="value"
       :hasIcon="true"
       :hasSearchButton="false"
       :hasAction="true"
       :actionIcon="require('../../assets/svg/rate-default-img.svg')"
-      @handleAction="handleAction"
+      @handle-action="handleAction"
     ></nut-searchbar>
 
     <h4>事件</h4>
-    <nut-searchbar @focus="focusFun" @input="inputFun" @blur="blurFun" @submit="submitFun"></nut-searchbar>
+    <nut-searchbar v-model="value" @focus="focusFun" @input="inputFun" @blur="blurFun" @submit="submitFun"> </nut-searchbar>
 
     <h4>获取焦点与失去焦点</h4>
-    <nut-searchbar @submit="search" @focus="focusFun" ref="myInput"></nut-searchbar>
+    <nut-searchbar v-model="value" @submit="search" @focus="focusFun" ref="myInput"></nut-searchbar>
   </div>
 </template>
 <script>
 export default {
+  data() {
+    return {
+      value: '',
+    };
+  },
   mounted() {
     const th = this;
     this.$nextTick(function () {

src/packages/searchbar/doc.md

@@ -151,6 +151,7 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
+| vaule | 当前input值，可使用 v-model 双向绑定数据 | String | ''
 | hasIcon | 是否显示输入框前面的 icon | Boolean | false
 | placeText | 输入框 placeholder 内容 | String | '请输入内容...'
 | inputAlign | 输入框内容的对齐方式，可选值：left/center/right| String | left
@@ -180,4 +181,5 @@ export default {
 | blur | 输入框失去焦点时触发事件 | 无
 | submit | 默认提交事件，点击右侧Icon或文字也会触发 | 无
 | handleAction | 点击输入框右侧图标触发 | 无
+| clear | 清空事件 | 无
 

src/packages/searchbar/searchbar.vue

@@ -2,10 +2,10 @@
   <div :class="['nut-searchbar', customClass ? customClass : '']">
     <div class="search-input" :class="[animation ? 'nut-search-ani' : '', inputFocusAnimation ? 'focus' : '']">
       <form action="javascript:return true" id="input-form">
-        <nut-icon class="search-icon" type="search3" v-if="hasIcon" :size="searchIconSize" :color="searchIconColor"></nut-icon>
+        <nut-icon class="search-icon" type="search3" v-if="hasIcon" :size="searchIconSize" :color="searchIconColor"> </nut-icon>
         <input
           type="search"
-          v-model="value"
+          :value="value"
           :class="[inputAlign]"
           :placeholder="placeText || nutTranslate('lang.searchbar.placeText')"
           @keyup.enter="submitFun"
@@ -21,7 +21,7 @@
         <!-- input右侧事件 -- 默认 二维码 -->
         <span class="input-right custom-icon" v-if="hasAction" @click="handleAction">
           <nut-icon v-if="hasAction && actionIcon == ''" type="qr" :size="actionIconSize"></nut-icon>
-          <nut-icon v-if="hasAction && actionIcon != ''" type="self" :url="actionIcon" :size="actionIconSize"></nut-icon>
+          <nut-icon v-if="hasAction && actionIcon != ''" type="self" :url="actionIcon" :size="actionIconSize"> </nut-icon>
         </span>
       </form>
     </div>
@@ -119,38 +119,52 @@ export default {
       type: String,
       default: '',
     },
+    value: {
+      type: String,
+      default: '',
+    },
   },
   components: {
     [nuticon.name]: nuticon,
   },
   data() {
     return {
-      value: '', //输入值
-      hasCloseIcon: false,
       inputFocusAnimation: false,
     };
   },
-  computed: {},
+  watch: {
+    value(newValue, oldValue) {
+      this.updateValue('change');
+    },
+  },
+  computed: {
+    hasCloseIcon() {
+      return this.value ? true : false;
+    },
+  },
   methods: {
+    updateValue(trigger = 'input') {
+      let searchInputValue = trigger == 'change' ? this.value : this.$refs.searchInput.value;
+      this.$emit(trigger, searchInputValue);
+    },
     //清空 input 输入
     clearInput() {
-      this.value = '';
-      this.hasCloseIcon = false;
+      this.$emit('clear', '');
+      this.$emit('input', '');
     },
     focusFun() {
       this.inputFocusAnimation = true;
       this.$emit('focus');
     },
     inputFun() {
-      this.hasCloseIcon = this.value ? true : false;
-      this.$emit('input', this.value);
+      this.updateValue();
     },
     blurFun() {
       this.inputFocusAnimation = false;
-      this.$emit('blur', this.value);
+      this.updateValue('blur');
     },
     submitFun() {
-      this.$emit('submit', this.value);
+      this.updateValue('submit');
     },
     // 失去焦点
     blur() {
@@ -164,7 +178,7 @@ export default {
     },
 
     handleAction() {
-      this.$emit('handleAction', this.value);
+      this.$emit('handle-action', this.value);
     },
   },
 };