vue按钮样式（实现Vue按钮(button)绑定回车(enter)事件）
导读：提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档...
提示：文章写完后 ，目录可以自动生成 ，如何生成可参考右边的帮助文档
前言
项目中有时候会有这样的需求 ，当用户点击某个功能对话框(比如：删除 、解绑)后 ，当点击确定时 ，希望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绑定回车事件
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！