首页IT科技vue按钮样式(实现Vue按钮(button)绑定回车(enter)事件)

vue按钮样式(实现Vue按钮(button)绑定回车(enter)事件)

时间2025-07-04 10:01:39分类IT科技浏览4548
导读:提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档...

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

前言

项目中有时候会有这样的需求,当用户点击某个功能对话框(比如:删除、解绑)后,当点击确定时,希望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版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
wmiprvse进程可以关闭吗(mmdiag.exe进程是什么文件 mmdiag进程查询) 高德地图如何添加地点标注(js高德地图添加点Marker,添加线段Polyline,添加一个区域Polygon(面))