feat: v-model、clear event

src/packages/searchbar/demo.vue

@@ -2,29 +2,41 @@
   <div class="s-bar demo-list">
     <h4>基本用法</h4>
     <div class="demo1">
-      <nut-searchbar></nut-searchbar>
+      <nut-searchbar v-model="value"></nut-searchbar>
     </div>
     <p>右侧搜索按钮可根据需要进行配置</p>
     <div class="demo1">
-      <nut-searchbar placeText="请输入自定义文案" :hasSearchButton="false"></nut-searchbar>
+      <nut-searchbar v-model="value" placeText="请输入自定义文案" :hasSearchButton="false"></nut-searchbar>
     </div>
     <p>可配置输入框前面是否显示搜索图标、右侧是否显示文字按钮、显示文字、自定义 class</p>
     <div class="demo1">
-      <nut-searchbar placeText="ERP/姓名/邮箱" :hasIcon="true" :hasTextButton="true" customClass="search_demo"></nut-searchbar>
+      <nut-searchbar v-model="value" placeText="ERP/姓名/邮箱" :hasIcon="true" :hasTextButton="true" customClass="search_demo"></nut-searchbar>
     </div>
     <h4>事件</h4>
     <div class="demo1">
-      <nut-searchbar placeText="请输入自定义文案" @focus="focusFun" @input="inputFun" @blur="blurFun" @submit="submitFun"></nut-searchbar>
+      <nut-searchbar
+        v-model="value"
+        placeText="请输入自定义文案"
+        @focus="focusFun"
+        @input="inputFun"
+        @blur="blurFun"
+        @submit="submitFun"
+      ></nut-searchbar>
     </div>
 
     <h4>获取焦点与失去焦点</h4>
     <div class="demo1">
-      <nut-searchbar placeText="请输入自定义文案" @submit="search" @focus="focusFun" ref="myInput"></nut-searchbar>
+      <nut-searchbar v-model="value" placeText="请输入自定义文案" @submit="search" @focus="focusFun" ref="myInput"> </nut-searchbar>
     </div>
   </div>
 </template>
 <script>
 export default {
+  data() {
+    return {
+      value: '11'
+    };
+  },
   mounted() {
     const th = this;
     this.$nextTick(function() {

src/packages/searchbar/doc.md

@@ -99,6 +99,7 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
+| vaule | 当前input值，可使用 v-model 双向绑定数据 | String | ''
 | hasIcon | 是否显示输入框前面的 icon | Boolean | false
 | placeText | 输入框 placeholder 内容 | String | '请输入内容...'
 | hasSearchButton | 是否显示右侧搜索按钮 | Boolean | true
@@ -118,6 +119,7 @@ export default {
 | 字段 | 说明 | 回调参数
 |----- | ----- | -----
 | focus | 输入框获取焦点时触发事件 | 无
-| input | 输入框输入内容时触发事件 | 无
-| blur | 输入框失去焦点时触发事件 | 无
-| submit | 默认提交事件，点击右侧Icon或文字也会触发 | 无
+| input | 输入框输入内容时触发事件 | value
+| blur | 输入框失去焦点时触发事件 | value
+| submit | 默认提交事件，点击右侧Icon或文字也会触发 | value
+| clear | 清空事件 | 无

src/packages/searchbar/searchbar.vue

@@ -5,7 +5,7 @@
         <nut-icon type="search" v-if="hasIcon" :size="searchIconSize" :color="searchIconColor"></nut-icon>
         <input
           type="search"
-          v-model="value"
+          :value="value"
           :placeholder="placeText || nutTranslate('lang.searchbar.placeText')"
           @keyup.enter="submitFun"
           @input="inputFun"
@@ -80,6 +80,10 @@ export default {
     customClass: {
       type: String,
       default: ''
+    },
+    value: {
+      type: String,
+      default: ''
     }
   },
   components: {
@@ -87,32 +91,44 @@ export default {
   },
   data() {
     return {
-      value: '', //输入值
-      hasCloseIcon: false,
       inputFocusAnimation: false
     };
   },
-  computed: {},
+  watch: {
+    value(newValue, oldValue) {
+      this.updateValue('change');
+    }
+  },
+  computed: {
+    hasCloseIcon() {
+      return this.value ? true : false;
+    }
+  },
+  mounted() {},
   methods: {
+    updateValue(trigger = 'input') {
+      let searchInputValue = trigger == 'change' ? this.value : this.$refs.searchInput.value;
+      console.log(searchInputValue);
+      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() {