vue3 element-plus 使用el-button焦点问题

Question

问题描述:

点击按钮后会有激活的样式，除非点击其他地方才能取消掉，然后下面是相关代码，
新增按钮会有问题，提交按钮正常（这个不打开对话框）。

• 步骤：

  1. 点击按钮打开对话框，此时按钮正常状态。 打印document.activeElement指向body
  2. 然后点击对话框关闭X掉，然后按钮变成激活状态。打印document.activeElement指向el-button

  <el-button v-blur icon="el-icon-plus" @click="handleAdd"> 新增 </el-button>
  <el-button v-blur @click="handleSubmit"> 提交 </el-button>

  Element-plus的css样式

  .el-button:focus, .el-button:hover {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary-light-7);
    background-color: var(--el-color-primary-light-9);
    outline: 0;
  }

  自定义指令给button挂载了一个事件

  // ..in v-blur自定义指令
  mounted(el) {
      el.addEventListener("click", () => {
        el.blur();
      });
  }

Answer 1

“点击按钮后会有激活的样式，除非点击其他地方才能取消掉”，这个是正常现象。
elementui、antd都是这样的。

---

第二次解答：
监听按钮的focus事件，在回调函数中执行e.target.blur()。

Answer 2

指令挂载的事件名称改一下

mounted(el) {
    el.addEventListener("focus", () => {
      el.blur();
    });
}