关于html5:饿了么UI按钮禁用时加文字提示按钮正常时不加文字提示eltooltip使用注意事项

需要形容

比方我的项目中有这样的一个需要，就是在某个页面上有一些按钮，这些按钮的状态不固定。可能有时候按钮会禁用不让点击。有时候按钮是失常的状态，容许点击。所以总结下来就是：如果是禁用状态，当鼠标悬浮的时候，呈现文字提醒；如果是失常状态，当鼠标悬浮的时候就不呈现任何变动。如同挺简略的，不过外面有一个细节，须要留神下。咱们先看一下最终的效果图

遇到问题

饿了么 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>

总结

好忘性不如烂笔头，记录一下小细节，少踩坑，从而放慢开发速度。

肯定要再加一层哦