位置: IT常识 - 正文
实现Vue按钮(button)绑定回车(enter)事件(vue怎么让按键启用和禁用)
编辑：rootadmin实现Vue按钮(button)绑定回车(enter)事件 
本文链接地址:https://www.jiuchutong.com/zhishi/289623.html
转载请保留说明！
推荐整理分享实现Vue按钮(button)绑定回车(enter)事件(vue怎么让按键启用和禁用)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue怎么让按键启用和禁用,vue按钮点击事件,vue按钮点击事件,vue按钮点击调用函数,vue点击按钮切换按钮状态,vue按钮点击调用函数,vue设置按钮不可用,vue 按钮,内容如对您有帮助，希望把文章链接给更多的朋友！
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录前言一、页面展示二、实现步骤1.在删除对话框的取消与确定按钮之间添加input输入框2.写个监听器，监听弹窗打开时，给input框自动聚焦（ inputdata 是 input 上用 ref 绑定的）。3.隐藏input框总结相关文章前言项目中有时候会有这样的需求，当用户点击某个功能对话框(比如：删除、解绑)后，当点击确定时，希望enter键就完成操作，用来代替鼠标点击。下面就向大家介绍我使用的方法
一、页面展示如图所示，当点击确定或者按下enter键后触发删除
二、实现步骤1.在删除对话框的取消与确定按钮之间添加input输入框代码如下：
<!-- 删除弹窗 --> <el-dialog :append-to-body="true" :title="deleteTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" width="30%" > <span class="rent-span">{{ this.dialogText1 }}</span> <span class="rent-span2">{{ this.dialogText2 }}</span> <span class="rent-span">{{ this.dialogText3 }}</span> <span slot="footer" class="dialog-footer" > <el-button @click="dialogConfirm('cancel')">取 消</el-button> //在删除对话框的取消与确定按钮之间添加input输入框 <input type="text" ref="inputdata" class="hiddenIpt" @keyup.enter="dialogConfirm('confirm')" /> <el-button type="primary" @click="dialogConfirm('confirm')" >确 定</el-button> </span> </el-dialog>2.写个监听器，监听弹窗打开时，给input框自动聚焦（ inputdata 是 input 上用 ref 绑定的）。代码如下：
watch: { dialogVisible() { if (this.dialogVisible) { //this.$refs.inputdata.focus(); 错误写法 this.$nextTick(() => { //正确写法 this.$refs.inputdata.focus(); }); } } },3.隐藏input框代码如下：
<style lang="scss" scoped>.hiddenIpt { width: 1px; opacity: 0;}</style>总结归纳起来就大概三个步骤：
在删除对话框的取消与确定按钮之间添加input输入框写个监听器，监听弹窗打开时，给input框自动聚焦（ inputdata 是 input 上用 ref 绑定的）隐藏input框相关文章一篇文章教你实现VUE多个DIV,button绑定回车事件
上一篇：Vue3/ 父组件 ref 获取子组件内属性或方法 子组件 defineExpose 暴露方法 或 属性 总结、(vue 父组件调子组件方法)
下一篇：一只苍鹭栖息在加利福尼亚索尔顿海的木桩上 (© Garret Suhrie/Cavan Images)(苍鹭一生可以活多久)
