您现在的位置是:首页 > Javascript
当前栏目
实现Vue按钮(button)绑定回车(enter)事件
2023-03-31 10:43:02 时间
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
项目中有时候会有这样的需求,当用户点击某个功能对话框(比如:删除、解绑)后,当点击确定时,希望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框
相关文章
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件