element-MessageBox 弹框组件 调整按钮位置(确认在左,取消在右)、删除场景回车调取消事件,默认调确认事件
1、调整按钮位置(确认在左,取消在右)
// MessageBox 弹框 调换按钮位置
.el-message-box__btns {display: flex;flex-direction: row-reverse;
}
.el-message-box__btns button:nth-child(2) {margin-right: 10px;
}
2、删除场景回车调取消事件,默认调确认事件
组件默认焦点在确定按钮,尝试改变焦点到取消按钮,结果均无效!只能通过下列方法进行‘拦截’了。
//在组件的 created 或 mounted 钩子中监听键盘事件,当按下回车键时,手动关闭 MessageBox。
created() {document.onkeydown = (e) => {var key = window.event.keyCode;//this.$msgbox 可直接使用if (key === 13 && document.querySelector('.delmsg-focus-cancel')) this.$msgbox.close();};},
methods: {deep_deletefile(id) {this.$confirm('文件删除后将无法恢复,您确认要彻底删除所选文件吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',roundButton: true,cancelButtonClass: 'delmsg-focus-cancel',//重点:自定义样式}).then(() => {//确定:调接口删除}).catch(() => {});},
}