el-dropdown-item disabled后el-tooltip失效

最新推荐文章于 2024-07-12 10:24:18 发布

原创最新推荐文章于 2024-07-12 10:24:18 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个关于Element UI框架中，当el-dropdown-item被禁用时，其外层的tooltip也一同失效的问题。通过在el-dropdown-item外包裹span标签并调整样式，成功实现了即使在元素被禁用时也能显示tooltip提示信息。

需求：当el-dropdown-item不能点击时，应该给予用户提示，告知用户为什么不能点这个选项。方案是用户hover该el-dropdown-item后，通过tooltip提示信息。
问题：当el-dropdown-item被disabled了，外层的tooltip也会被disabled。代码如下所示：

<el-tooltip
	effect="dark"
	content="无新增日志权限，不可新增日志"
	placement="bottom-end"
	:disabled="isCouldAddLog"
>
	<el-dropdown-item
		href="#"
		:disabled="!isCouldAddLog"
	>新增日志</el-dropdown-item>
</el-tooltip>

解决方案：外层包裹一个span标签，然后设置一下样式。修改后的代码如下：

<el-tooltip
	effect="dark"
	content="无新增日志权限，不可新增日志"
	placement="bottom-end"
	:disabled="isCouldAddLog"
>
	<span class="wrapper el-button">
		<el-dropdown-item
			:disabled="!isCouldAddLog"
		>新增日志</el-dropdown-item>
	</span>
</el-tooltip>

.wrapper.el-button {
	display: inline-block;
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: left !important;
	border: none;
}

参考资料：
一个遇到过类似问题的老哥：https://github.com/ElemeFE/element/issues/8557

哎。