快捷導(dǎo)航

鼠標(biāo)懸浮在樹(shù)組件節(jié)點(diǎn)上展示當(dāng)前節(jié)點(diǎn)名稱的三種實(shí)現(xiàn)方式

更新時(shí)間：2023年12月23日 10:35:12 作者：兜小糖的小禿毛

這篇文章主要介紹了鼠標(biāo)懸浮在樹(shù)組件節(jié)點(diǎn)上展示當(dāng)前節(jié)點(diǎn)名稱的三種實(shí)現(xiàn)方式,第一種是使用css樣式設(shè)置,第二種在checkBox綁定,第三種使用tooltip,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

方法一：使用CSS樣式

在樹(shù)組件的模板中，為每個(gè)節(jié)點(diǎn)的外層元素綁定一個(gè)類名，例如"tree-node"，并設(shè)置一個(gè)自定義屬性來(lái)保存節(jié)點(diǎn)名稱。

<el-tree v-if="showCheck" ref="treeRef" :data="treeData" :props="keyProps" :filter-node-method="filterAction" :default-expand-all="expandFlag">
	<template v-slot:default="{ node, data }">
		<span class="custom-tree-node tree-node" :data-label="node.label">
			<el-checkbox-group v-if="!data[keyProps.children]" v-model="checkValue">
				<el-checkbox :label="data[keyProps.value]" :disabled="data.disabled" @change="flag => onCheck(flag, data)">
					{{ node.label }}
				</el-checkbox>
			</el-checkbox-group>
			<span v-else>
				{{ node.label }}
			</span>
		</span>
	</template>
</el-tree>

使用CSS樣式來(lái)實(shí)現(xiàn)鼠標(biāo)懸浮時(shí)顯示節(jié)點(diǎn)名稱的效果。

在CSS樣式中，通過(guò)::before偽元素來(lái)創(chuàng)建一個(gè)內(nèi)容框，然后使用attr(data-label)來(lái)獲取節(jié)點(diǎn)名稱，并設(shè)置為內(nèi)容框的內(nèi)容。通過(guò)調(diào)整top和left屬性來(lái)調(diào)整彈出框的位置。可以根據(jù)需要自定義調(diào)整樣式。
確保將CSS樣式正確應(yīng)用到樹(shù)組件的外層容器或適當(dāng)?shù)母冈厣稀?/p>

:deep(.el-tree) {
	.el-tree-node__content {
		position: relative;
	}
	.tree-node:hover::before {
		content: attr(data-label); /* 設(shè)置節(jié)點(diǎn)名稱內(nèi)容 */
		position: absolute;
		top: 26px; /* 調(diào)整彈出框位置 */
		left: 40px;
		background-color: #fff; /* 彈出框背景色 */
		padding: 4px 8px;
		border: 1px solid #ccc; /* 彈出框邊框樣式 */
		border-radius: 4px;
		z-index: 999;
	}
}

方法二：(在checkBox綁定)

將提示文本保存在節(jié)點(diǎn)數(shù)據(jù)中，然后在el-checkbox元素上使用v-bind:title指令來(lái)綁定節(jié)點(diǎn)數(shù)據(jù)中的提示文本。

<el-tree v-if="showCheck" ref="treeRef" :data="treeData" :props="keyProps" :filter-node-method="filterAction" :default-expand-all="expandFlag">
	<template v-slot:default="{ node, data }">
		<span class="custom-tree-node">
			<el-checkbox-group v-if="!data[keyProps.children]" v-model="checkValue">
				<el-checkbox :label="data[keyProps.value]" :disabled="data.disabled" @change="flag => onCheck(flag, data)" :title="node.label">
					{{ node.label }}
				</el-checkbox>
			</el-checkbox-group>
			<span v-else>
				{{ node.label }}
			</span>
		</span>
	</template>
</el-tree>

方法三：使用tooltip

<el-tree v-if="showCheck" ref="treeRef" :data="treeData" :props="keyProps" :filter-node-method="filterAction" :default-expand-all="expandFlag">
	<template v-slot:default="{ node, data }">
		<span class="custom-tree-node">
			<el-checkbox-group v-if="!data[keyProps.children]" v-model="checkValue">
				<el-checkbox :label="data[keyProps.value]" :disabled="data.disabled" @change="flag => onCheck(flag, data)">
					<el-tooltip class="item" effect="dark" :content="node.label" placement="bottom-start" show-after="300">
						<template>
							<span>{{ node.label }}</span>
						</template>
					</el-tooltip>
				</el-checkbox>
			</el-checkbox-group>
			<span v-else>
				<el-tooltip class="item" effect="dark" :content="node.label" placement="bottom-start" show-after="300">
					<template>
						<span>{{ node.label }}</span>
					</template>
				</el-tooltip>
			</span>
		</span>
	</template>
</el-tree>

到此這篇關(guān)于鼠標(biāo)懸浮在樹(shù)組件節(jié)點(diǎn)上展示當(dāng)前節(jié)點(diǎn)名稱的三種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)鼠標(biāo)懸浮展示當(dāng)前節(jié)點(diǎn)名稱內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: