阅读 494

饿了么UI按钮禁用时加文字提示,按钮正常时不加文字提示(el-tooltip使用注意事项)

需求描述

比如项目中有这样的一个需求,就是在某个页面上有一些按钮,这些按钮的状态不固定。可能有时候按钮会禁用不让点击。有时候按钮是正常的状态,允许点击。所以总结下来就是:如果是禁用状态,当鼠标悬浮的时候,出现文字提示;如果是正常状态,当鼠标悬浮的时候就不出现任何变化。好像挺简单的,不过里面有一个细节,需要注意下。我们先看一下最终的效果图

遇到问题

饿了么ui中的el-tooltip组件具有开启和关闭的功能,但是如果我们直接把组件套在el-button外面,我们会发现,el-tooltip无法开启了,好像也被el-button的禁用,无法打开了。直接使用el-tooltip代码如下:

    <!-- html部分 -->
    <el-tooltip
      effect="dark"
      :disabled="!kkk"
      content="暂时不能确认收货"
      placement="top"
    >
      <el-button type="primary" :disabled="kkk">确认收货</el-button>
    </el-tooltip>
    <!-- js部分 -->
    export default {
      name: "app",
      data() {
        return {
          kkk: true,
        }
      }
    }
复制代码

审查元素看看,找找原因

解决方案

解决方案就是在el-button的外层,再加上一个div包裹起来,这样的话,类名el-tooltip就会加到div身上,就不会受到按钮禁用的影响了。

完整代码

<template>
  <div id="app">
    <!-- 加一层div -->
    <el-tooltip
      effect="dark"
      :disabled="!kkk"
      content="暂时不能确认收货"
      placement="top"
    >
      <div>
        <el-button type="primary" :disabled="kkk">确认收货</el-button>
      </div>
    </el-tooltip>
    <!-- 不加div -->
    <el-tooltip
      effect="dark"
      :disabled="!kkk"
      content="暂时不能确认收货"
      placement="top"
    >
      <el-button type="primary" :disabled="kkk">确认收货</el-button>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      kkk: true,
    };
  },
};
</script>
<style lang="less" scoped>
#app {
  width: 400px;
  height: 400px;
  background-color: #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
复制代码

审查代码看看

总结

好记性不如烂笔头,记录一下小细节,少踩坑,从而加快开发速度。

一定要再加一层哦

文章分类
前端
文章标签