输入框的回车搜索事件实现

1.vue2.0，可以使用element ui的input输入框，用到change方法。input的change方法仅在输入框失去焦点或用户按下回车时触发，所以可以使用input的change方法来进行搜索。

<el-input v-model="input" @change="inputSearch" placeholder="请输入内容"></el-input>

2.vue3.0，可以使用element plus的input输入框，和vue2.0的change方法类似，vue3.0的change方法是仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发。

<template>
  <el-input v-model="input" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

3.vue中如果不使用element框架的话，

<template>
<input
     type="text"
     @keyup.enter.prevent="searchEnterFun($event)"
     v-model="input"
     placeholder="超过12000份实用资源"
     class="search_input"
  />
   <input v-show="false" />
</template>

<script>
export default {
methods: {
 var keyCode = window.event ? e.keyCode : e.which;
      console.log("回车搜索", keyCode, e);
      if (keyCode == 13) {
        if (this.input != "") {
          this.$router.push({
            },
          });
        } else {
          this.$message({
            message: "搜索内容不能为空",
            type: "warning",
          });
        }
}
  },
</script>

4.uniapp中可以使用iView的input输入框，用法和vue的用法有点区别，iView的on-enter是按回车后触发，on-click是设置 icon 属性后，点击图标时触发。

<template>
    <Input v-model="value" placeholder="请输入..." style="width: 300px"></Input>
</template>
<script>
    export default {
        data () {
            return {
                value: ''
            }
        }
    }
</script>