前端 - 请问element plus如何把<el button>绑定enter键？

Question

差不多这样

methods: {
        catch_enter(){
            console.log('press enter')
        }
}


<el-button type="primary">点击</el-button>

看到有资源说这样：https://blog.csdn.net/cqlcqlcui123/article/details/130141190
这样也太费劲了，大家都是这么写的吗？

另外找到的材料都是element-ui，vue2的，基本上都推荐用.native：

@keyup.enter.native="handleAddBook"

但是写进去之后提示这个被deprecated了，也不生效

'v-on' directives don't support the modifier 'naive'

Answer 1

可以使用 Element Plus 提供的 el-input 组件，在 el-input 中嵌套 el-button，然后监听 el-input 的 @keyup.enter 事件，触发 el-button 的点击事件。
示例代码如下：

<template>
  <div>
    <el-input v-model="inputValue" @keyup.enter="handleClick">
      <el-button slot="append" @click="handleClick">搜索</el-button>
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleClick() {
      console.log('点击搜索')
    }
  }
}
</script>

这样，当在输入框中按下 Enter 键时，就会触发按钮的点击事件。

Answer 2

因为Vue3 废弃native, 所以你的题目中的方法用一下吧

Answer 3

根据@玛拉_以琳 的回答，最终还是用了https://blog.csdn.net/cqlcqlcui123/article/details/130141190 的写法。

只不过资料的写法是composition风格的api，如果想用vue2那种选项式api，可以：

export default {
    methods: {
            enter_up(e){
                console.log('in enter up')
                if (e.keyCode == 13 || e.keyCode == 100) {
                    console.log('success')
                }
            },
    },
    mounted(){
        window.addEventListener('keydown', this.enter_up)
    },
    unmounted(){
        window.removeEventListener('keydown', this.enter_up, false)
    }
}


<el-button type="primary" @keydown.enter="enter_up()">enter success</el-button>