需要形容
比方我的项目中有这样的一个需要，就是在某个页面上有一些按钮，这些按钮的状态不固定。可能有时候按钮会禁用不让点击。有时候按钮是失常的状态，容许点击。所以总结下来就是：如果是禁用状态，当鼠标悬浮的时候，呈现文字提醒；如果是失常状态，当鼠标悬浮的时候就不呈现任何变动。如同挺简略的，不过外面有一个细节，须要留神下。咱们先看一下最终的效果图
遇到问题
饿了么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>总结
好忘性不如烂笔头，记录一下小细节，少踩坑，从而放慢开发速度。
肯定要再加一层哦