MessageBox组件打开时“确定”按钮失焦问题优化

最新推荐文章于 2024-05-22 15:38:09 发布

码上雏猿

最新推荐文章于 2024-05-22 15:38:09 发布

阅读量1.2k

点赞数

分类专栏：点滴成长文章标签： vue Powered by 金山文档

本文链接：https://blog.csdn.net/qq_42250644/article/details/129086957

版权

点滴成长专栏收录该内容

8 篇文章 1 订阅

订阅专栏

优化前代码：

import { ElMessageBox } from 'element-plus';

ElMessageBox({
      title: '系统提示',
      message: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          //确定按钮操作
            .........
          done()
        } else {
          //取消按钮操作
            .........
          done()
        }
      },
    }).then((action) => {

    }).catch(() => {

    })

每次打开MessageBox时，“确定”按钮都是处于失焦状态的，需要鼠标点击下页面才能恢复聚焦状态

问题原因：MessageBox组件有一个autofocus属性，作用如下

该属性默认为true，即打开MessageBox时，MessageBox”夺取“了页面的聚焦状态，导致”确定“按钮失焦；

优化后代码：

import { ElMessageBox } from 'element-plus';

ElMessageBox({
      title: '系统提示',
      message: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      //将autofocus设为false，”确定”按钮即可自动获取焦点
      autofocus: false,
      type: 'warning',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          //确定按钮操作
            .........
          done()
        } else {
          //取消按钮操作
            .........
          done()
        }
      },
    }).then((action) => {

    }).catch(() => {

    })