需要形容
比方我的项目中有这样的一个需要,就是在某个页面上有一些按钮,这些按钮的状态不固定。可能有时候按钮会禁用不让点击。有时候按钮是失常的状态,容许点击。所以总结下来就是:如果是禁用状态,当鼠标悬浮的时候,呈现文字提醒;如果是失常状态,当鼠标悬浮的时候就不呈现任何变动。如同挺简略的,不过外面有一个细节,须要留神下。咱们先看一下最终的效果图
遇到问题
饿了么ui中的el-tooltip组件具备开启和敞开的性能,然而如果咱们间接把组件套在el-button里面,咱们会发现,el-tooltip无奈开启了,如同也被el-button的禁用,无奈关上了。间接应用el-tooltip代码如下:
effect="dark"
:disabled="!kkk"
content="临时不能确认收货"
placement="top"
>
确认收货
export default {
name: "app",
data() {
return {
kkk: true,
}
}
}
审查元素看看,找找起因
解决方案
解决方案就是在el-button的外层,再加上一个div包裹起来,这样的话,类名el-tooltip就会加到div身上,就不会受到按钮禁用的影响了。
残缺代码
effect="dark"
:disabled="!kkk"
content="临时不能确认收货"
placement="top"
>
确认收货
effect="dark"
:disabled="!kkk"
content="临时不能确认收货"
placement="top"
>
确认收货
export default {
name: "app",
data() {
return {
kkk: true,
};
},
};
#app {
width: 400px;
height: 400px;
background-color: #e9e9e9;
display: flex;
align-items: center;
justify-content: space-around;
}
总结
好忘性不如烂笔头,记录一下小细节,少踩坑,从而放慢开发速度。
肯定要再加一层哦