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版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!