问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

element-ui el-button 点击后 鼠标移出按钮没有失焦？

头像
失落的鼠标垫
    291129

    element-ui按钮点击后不失焦
    image.png

    vue.js前端框架
    阅读 1.4k
    avatarAI BotBETA

    在Element UI中，按钮（<el-button>）在点击后通常不会“失焦”，因为它本身并不是一个可聚焦的元素（如输入框或链接）。按钮在点击后通常只是触发一个事件（如点击事件），然后页面可能会根据这个事件进行导航、数据提交或其他操作，但按钮本身并不会失去焦点，因为它在DOM中并不是一个可聚焦的元素。

    然而，如果你是在讨论一个类似按钮的元素（如一个可聚焦的按钮组件或自定义元素），并且希望它在点击后保持某种“激活”状态或样式（类似于不“失焦”的视觉效果），那么这通常不是由Element UI按钮直接控制的，而是需要通过额外的逻辑来实现。

    以下是一些可能的解决方案：

    1. 使用CSS类: 当按钮被点击时，可以通过JavaScript动态地添加一个CSS类来改变其样式，使其看起来像是保持激活状态。

      document.querySelector('.your-button').addEventListener('click', function() {
  this.classList.add('active');
  // 可以在需要时移除这个类
  // this.classList.remove('active');
});
    .your-button.active {
  /* 激活状态的样式 */
  background-color: #409EFF; /* 举例，Element UI蓝色主题 */
  color: white;
}

    1. 利用Element UI的loading状态: 如果你的目的是防止用户在按钮操作未完成前重复点击，Element UI的按钮组件提供了loading属性，可以在点击时显示加载状态。

      <el-button :loading="isLoading" @click="handleClick">点击我</el-button>
    data() {
  return {
    isLoading: false,
  };
},
methods: {
  handleClick() {
    this.isLoading = true;
    // 模拟异步操作
    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  },
}
    1. 自定义组件: 如果以上方法都不满足你的需求，你可以考虑创建一个自定义组件，通过Vue的ref属性或其他方式控制其样式或行为。

    总之，Element UI的<el-button>组件本身在点击后不会有“失焦”的概念，因为它不是一个可聚焦的元素。如果你的场景有特殊需求，可能需要通过额外的逻辑或样式来实现期望的效果。

    2 个回答
    得票最新
    头像头饰
    陟上晴明
      21.2k124691

      为什么要失焦？你又没有点击其他元素，或者通过业务代码修改你的焦点。

      换个比较容易理解的：如果你点击的是一个input元素，那么点击之后为啥要把input失焦？

      EDIT

      如果你想要在鼠标移出按钮之后，让按钮失去焦点。那么你需要额外的添加对应的业务逻辑：
      比如说：

      <el-button type="primary" @mouseleave.native="e => e.target.blur()">主要按钮</el-button>
      头像
      一只小羊
        14114

        透明的按钮不自动失焦的效果会更加明显。可以自定义一个强制按钮失焦的事件，在@click绑定事件中执行。

         <el-button
     type="danger"
     size="small"
     icon="el-icon-delete"
     @click="addHandler($event)"
>批量删除</el-button>
        addHandler(event) {
  this.cancelButtonFocusStatus(event);
}
        cancelButtonFocusStatus(evt) {
    //点击空白处,target为button;点击字体处,target为span;点击图标处,target为i。后两者本身没有blur,需要判断取父节点button
    let target = evt.target;
    if (target.nodeName == "SPAN" || target.nodeName == "I") {
        target = target.parentNode;
    }
    target.blur();
}
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏