vue3和ts的el-input的键盘回车绑定事件

惠惠惠惠呀

已于 2023-11-13 13:47:04 修改

阅读量5.3k

点赞数

文章标签： vue.js

于 2023-02-17 17:38:27 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51244498/article/details/129091176

版权

文章介绍了在Vue3环境中，使用el-input组件结合typescript实现键盘回车搜索功能的两种不同方式。第一种方法是通过添加@keyup.enter.native事件监听，第二种方法是直接在input元素上使用@keyup.enter。两种方法都涉及到事件监听和处理函数，以触发getdatalist()获取数据的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-input框绑定键盘回车搜索事件加上@keyup.enter.native="search"


<el-input v-model="key" placeholder="请输入">
                <template #append>
                    <el-button :icon="Search" @click="getdatalist" @keyup.enter.native="search"/>
                </template>
</el-input>

然后


<script setup lang="ts">
  // 搜素键盘回车事件
  const search=(e:any)=>{
    if(e.keyCode==13){
      getdatalist()
    }
  }
  // 开启键盘监听事件
  window.addEventListener('keydown', search, true)
</script>

第二种方法：作用在input元素身上

在html中

<div class="topSearch">
     <el-input v-model="key" placeholder="请输入" @keyup.enter="search">
         <template #append>
            <el-button :icon="Search" @click="getdatalist" />
          </template>
      </el-input>
</div>

然后

<script setup lang="ts">
  //搜索框
  const key = ref('')

  // 搜素键盘回车事件
  const search=(e:any)=>{
    if(e.keyCode==13){
      getdatalist()
    }
  }

  //获取HS编码数据列表
    const getdatalist=()=>{
        getHSCodelist(page.value,pageSize.value,key.value).then(res=>{
            tableData.value=res.data.Items
            total.value=res.data.Total
        })
    }
</script>