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

  • Z时代
  • 2024-03-16
  • 分类：IT

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

问题描述:

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

  • 步骤：

    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();
        });
    }

回答：

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

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

回答：

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

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

以上是 vue3 element-plus 使用el-button焦点问题 的全部内容， 来源链接： utcz.com/p/936659.html

回到顶部