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(() => {
      });
    },
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值