Vue3+Ts封装ToolTip组件

已于 2024-08-15 16:21:25 修改
阅读量1.3k 收藏 4
点赞数 45
文章标签： javascript vue typescript 前端
于 2024-08-14 16:08:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_59625204/article/details/141193431
版权

本组件支持hover和click两种触发方式，需要更多的触发方式，可自行去扩展！！！

本初提供css和sass两种定义css的方式，自行选择！！！

1.传递三个参数：

  • content：要展示的文本

  • position：文本出现的位置（"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right"）

  • trigger：触发的方式（"hover" | "click"）

2.使用方式：

<ToolTip content="Z02343" position="top" trigger="click">
	<span class="tag-text">Z02343</span>
</ToolTip>

3.封装的组件代码如下：(style为css版本)

<template>
	<div
		class="tooltip-container"
		:class="{ 'tooltip-click': trigger === 'click' }"
		@mouseover="handleMouseOver"
		@mouseout="handleMouseOut"
		@click="handleClick"
	>
		<slot></slot>
		<div v-if="isTooltipVisible" :class="tooltipClass">
			{{ content }}
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";

const positionOptions = ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "right"] as const;
type Position = (typeof positionOptions)[number];
type Trigger = ["hover" | "click"][number];
const defaultTrigger: Trigger = "hover";

const props = defineProps<{
	content: string;
	position?: Position;
	trigger?: Trigger;
}>();

const trigger = props.trigger ?? defaultTrigger;

const isTooltipVisible = ref(false);

const showTooltip = () => {
	isTooltipVisible.value = true;
};

const hideTooltip = () => {
	isTooltipVisible.value = false;
};

const handleMouseOver = () => {
	if (trigger === "hover") {
		showTooltip();
	}
};

const handleMouseOut = () => {
	if (trigger === "hover") {
		hideTooltip();
	}
};

const handleClick = () => {
	if (trigger === "click") {
		isTooltipVisible.value = !isTooltipVisible.value;
	}
};

watch(
	() => props.trigger,
	newTrigger => {
		if (newTrigger === "click" && isTooltipVisible.value) {
			hideTooltip();
		}
	},
	{ immediate: true }
);

const tooltipClass = computed(() => {
	return `tooltip-content ${props.position} ${isTooltipVisible ? "active" : ""}`;
});
</script>

<style scoped>
.tooltip-container {
	position: relative;
	display: inline-block;
}

.tooltip-content {
	position: absolute;
	background-color: #333;
	color: #fff;
	padding: 5px;
	border-radius: 3px;
	font-size: 12px;
	white-space: nowrap;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.3s, opacity 0.3s linear;
}

.tooltip-content.active {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.tooltip-content.top {
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%);
}

.tooltip-content.top-start {
	bottom: calc(100% + 3px);
	left: 0;
	transform: translateX(0%);
	border-radius: 3px 3px 3px 0;
}

.tooltip-content.top-end {
	bottom: calc(100% + 3px);
	right: 0;
	transform: translateX(0);
	border-radius: 3px 3px 0;
}

.tooltip-content.bottom {
	top: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%);
}

.tooltip-content.bottom-start {
	top: calc(100% + 3px);
	left: 0;
	transform: translateX(0%);
	border-radius: 0 3px 3px;
}

.tooltip-content.bottom-end {
	top: calc(100% + 3px);
	right: 0;
	transform: translateX(0%);
	border-radius: 3px 0 3px 3px;
}

.tooltip-content.left {
	top: 50%;
	right: calc(100% + 6px);
	transform: translateY(-50%);
}

.tooltip-content.right {
	top: 50%;
	left: calc(100% + 6px);
	transform: translateY(-50%);
}

.tooltip-content::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.tooltip-content.top::before {
	bottom: -6px;
	left: 50%;
	border-width: 6px 6px 0;
	border-color: #333 transparent transparent transparent;
	transform: translateX(-50%);
}

.tooltip-content.bottom::before {
	top: -6px;
	left: 50%;
	border-width: 0 6px 6px;
	border-color: transparent transparent #333 transparent;
	transform: translateX(-50%);
}

.tooltip-content.left::before {
	top: 50%;
	right: -6px;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #333;
	transform: translateY(-50%);
}

.tooltip-content.right::before {
	top: 50%;
	left: -6px;
	border-width: 6px 6px 6px 0;
	border-color: transparent #333 transparent transparent;
	transform: translateY(-50%);
}

.tooltip-content.top-start::before {
	bottom: -6px;
	left: 0;
	border-width: 6px 6px 0;
	border-color: #333 transparent transparent transparent;
}

.tooltip-content.top-end::before {
	bottom: -6px;
	right: 0;
	border-width: 6px 6px 0;
	border-color: #333 transparent transparent transparent;
}

.tooltip-content.bottom-start::before {
	top: -6px;
	left: 0;
	border-width: 0 6px 6px;
	border-color: transparent transparent #333 transparent;
}

.tooltip-content.bottom-end::before {
	top: -6px;
	right: 0;
	border-width: 0 6px 6px;
	border-color: transparent transparent #333 transparent;
}

.tooltip-content.left-start::before {
	top: 6px;
	right: -6px;
	border-width: 6px 6px 6px 0;
	border-color: transparent #333 transparent transparent;
}

.tooltip-content.left-end::before {
	bottom: 6px;
	right: -6px;
	border-width: 6px 6px 6px 0;
	border-color: transparent #333 transparent transparent;
}

.tooltip-content.right-start::before {
	top: 6px;
	left: -6px;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #333;
}

.tooltip-content.right-end::before {
	bottom: 6px;
	left: -6px;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #333;
}
</style>

3.封装的组件代码如下：(style为sass版本)

<template>
	<div
		class="tooltip-container"
		:class="{ 'tooltip-click': trigger === 'click' }"
		@mouseover="handleMouseOver"
		@mouseout="handleMouseOut"
		@click="handleClick"
	>
		<slot></slot>
		<div v-if="isTooltipVisible" :class="tooltipClass">
			{{ content }}
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";

const positionOptions = ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "right"] as const;
type Position = (typeof positionOptions)[number];
type Trigger = ["hover" | "click"][number];
const defaultTrigger: Trigger = "hover";

const props = defineProps<{
	content: string;
	position?: Position;
	trigger?: Trigger;
}>();

const trigger = props.trigger ?? defaultTrigger;

const isTooltipVisible = ref(false);

const showTooltip = () => {
	isTooltipVisible.value = true;
};

const hideTooltip = () => {
	isTooltipVisible.value = false;
};

const handleMouseOver = () => {
	if (trigger === "hover") {
		showTooltip();
	}
};

const handleMouseOut = () => {
	if (trigger === "hover") {
		hideTooltip();
	}
};

const handleClick = () => {
	if (trigger === "click") {
		isTooltipVisible.value = !isTooltipVisible.value;
	}
};

watch(
	() => props.trigger,
	newTrigger => {
		if (newTrigger === "click" && isTooltipVisible.value) {
			hideTooltip();
		}
	},
	{ immediate: true }
);

const tooltipClass = computed(() => {
	return `tooltip-content ${props.position} ${isTooltipVisible ? "active" : ""}`;
});
</script>

<style lang="scss" scoped>
@use "sass:math";
$basicW: 6px;

.tooltip-container {
	position: relative;
	display: inline-block;
}

.tooltip-content {
	position: absolute;
	background-color: #333;
	color: #fff;
	padding: 5px;
	border-radius: math.div($basicW, 2);
	font-size: 12px;
	white-space: nowrap;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.3s, opacity 0.3s linear;
}

.tooltip-content.active {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.tooltip-content.top {
	bottom: calc(100% + math.div($basicW, 2));
	left: 50%;
	transform: translateX(-50%);
}

.tooltip-content.top-start {
	bottom: calc(100% + math.div($basicW, 2));
	left: 0;
	transform: translateX(0%);
	border-radius: math.div($basicW, 2) math.div($basicW, 2) math.div($basicW, 2) 0;
}

.tooltip-content.top-end {
	bottom: calc(100% + math.div($basicW, 2));
	right: 0;
	transform: translateX(0);
	border-radius: math.div($basicW, 2) math.div($basicW, 2) 0;
}

.tooltip-content.bottom {
	top: calc(100% + math.div($basicW, 2));
	left: 50%;
	transform: translateX(-50%);
}

.tooltip-content.bottom-start {
	top: calc(100% + math.div($basicW, 2));
	left: 0;
	transform: translateX(0%);
	border-radius: 0 math.div($basicW, 2) math.div($basicW, 2);
}

.tooltip-content.bottom-end {
	top: calc(100% + math.div($basicW, 2));
	right: 0;
	transform: translateX(0%);
	border-radius: math.div($basicW, 2) 0 math.div($basicW, 2) math.div($basicW, 2);
}

.tooltip-content.left {
	top: 50%;
	right: calc(100% + $basicW);
	transform: translateY(-50%);
}

.tooltip-content.right {
	top: 50%;
	left: calc(100% + $basicW);
	transform: translateY(-50%);
}

.tooltip-content::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.tooltip-content.top::before {
	bottom: -$basicW;
	left: 50%;
	border-width: $basicW $basicW 0;
	border-color: #333 transparent transparent transparent;
	transform: translateX(-50%);
}

.tooltip-content.bottom::before {
	top: -$basicW;
	left: 50%;
	border-width: 0 $basicW $basicW;
	border-color: transparent transparent #333 transparent;
	transform: translateX(-50%);
}

.tooltip-content.left::before {
	top: 50%;
	right: -$basicW;
	border-width: $basicW 0 $basicW $basicW;
	border-color: transparent transparent transparent #333;
	transform: translateY(-50%);
}

.tooltip-content.right::before {
	top: 50%;
	left: -$basicW;
	border-width: $basicW $basicW $basicW 0;
	border-color: transparent #333 transparent transparent;
	transform: translateY(-50%);
}

.tooltip-content.top-start::before {
	bottom: -$basicW;
	left: 0;
	border-width: $basicW $basicW 0;
	border-color: #333 transparent transparent transparent;
}

.tooltip-content.top-end::before {
	bottom: -$basicW;
	right: 0;
	border-width: $basicW $basicW 0;
	border-color: #333 transparent transparent transparent;
}

.tooltip-content.bottom-start::before {
	top: -$basicW;
	left: 0;
	border-width: 0 $basicW $basicW;
	border-color: transparent transparent #333 transparent;
}

.tooltip-content.bottom-end::before {
	top: -$basicW;
	right: 0;
	border-width: 0 $basicW $basicW;
	border-color: transparent transparent #333 transparent;
}

.tooltip-content.left-start::before {
	top: $basicW;
	right: -$basicW;
	border-width: $basicW $basicW $basicW 0;
	border-color: transparent #333 transparent transparent;
}

.tooltip-content.left-end::before {
	bottom: $basicW;
	right: -$basicW;
	border-width: $basicW $basicW $basicW 0;
	border-color: transparent #333 transparent transparent;
}

.tooltip-content.right-start::before {
	top: $basicW;
	left: -$basicW;
	border-width: $basicW 0 $basicW $basicW;
	border-color: transparent transparent transparent #333;
}

.tooltip-content.right-end::before {
	bottom: $basicW;
	left: -$basicW;
	border-width: $basicW 0 $basicW $basicW;
	border-color: transparent transparent transparent #333;
}
</style>

月伤59
关注
vue3+ts+elementplus二次封装组件前的准备
申小兮和林小兮的博客宝
12-28 57
二次封装组件前的准备：背景介绍、统一规范、全局方法封装、系统配置
vue3+ts - 折线图和柱状图综合使用
sunshime的博客
02-06 1041
近期，在做项目的时候有涉及到柱状图和折线图共同放在一个图表里面的效果，所以在这里简单总结一下，有需要的朋友们可自行参考。
v-tooltip:Vue 3的工具提示
03-20
v工具提示 Vue 3工具提示自定义指令 目录 安装 将tooltip.js粘贴到您的src文件夹中，为了清楚起见，我亲自在其中创建了文件夹directives 。下一步是将tooltip.css粘贴到assets文件夹中。 拥有所有文件后，打开main.js文件（或任何挂载应用程序的文件），然后导入这些文件。然后使用app.directive全局添加v-tooltip自定义指令。它看起来应该类似于： import { createApp } from "vue" ; import App from "./App.vue" ; import tooltip from "./directives/tooltip.js" ; import "@/assets/tooltip.css" ; const app = createApp ( App ) ; // app.directive&#39;s
vue3.0 组件篇 Tooltip
秋来九月八
06-20 7247
当用户将鼠标悬停在一个页面元素上时，通常需要显示与该元素相关的信息。这就是Tooltip组件的用途。Tooltip是一种小型弹出框，它显示有关特定页面元素的信息，例如按钮、链接或图标。Tooltip通常以半透明的气泡形式呈现，并出现在页面元素的旁边或下方。它可以改善用户体验，使用户更容易理解页面元素的功能和意图。用户可以通过将鼠标悬停在页面元素上来快速了解有关该元素的信息，而无需离开当前页面或浏览其他页面。
Vue3 + ts 简易Dialog封装
最新发布
FOR_HOU的博客
04-10 279
【代码】Vue3 + ts 简易Dialog封装。
vue3：通过【自定义指令】实现自定义的不同样式的tooltip
qq_45820271的博客
03-27 1424
本文介绍了一个在vue3中自定tooltip的方式
vue3通过ElementPlus的tooltip组件实现自定义指令文字提示
TravelAlone的博客
05-20 1967
之前的项目中，有些文字比较长，不可能全部展示出来，就自己手写了个指令版本的tooltip,开始使用的显示方式，是自己在body中单独创建了个元素，然后监听鼠标事件，然后采用position:fixed的方式展示。后来，想了下，打算借助ElementPlus的tooltip组件进行实现，只需要自己去判断内容是否超出展示的边界即可，于是便有了这篇文章。
Vue封装Tooltip(提示工具)
学习笔记分享给大家
07-12 547
【代码】Vue封装Tooltip(提示工具)
vue3+ts+echarts实现echarts封装
08-01
通过这种方式，我们成功地在Vue3项目中实现了ECharts的封装，使得在多个地方使用ECharts时，可以复用这个组件，减少重复代码，提高代码质量。同时，TypeScript的引入确保了类型安全，降低了错误的可能性。这样的封装...
基于vue3+ts配置化form表单组件实现浅析
junner443的博客
06-20 6909
基于vue3+ts配置化form表单组件实现浅析，同时兼容element-plus和ant-design-vue
vue3+ts - 折线图的使用
sunshime的博客
02-06 1300
近期，在做项目的时候有涉及到折线图的模块，所以在这里简单总结一下，有需要的朋友们可自行参考。说到折线图这种图形模块，我们很自然的就想到了echarts 插件了，里面有格式各样的图形效果，可供我们使用。
一个Vue2x的tooltip提示信息组件
08-08
这是一个vue的tooltip提示信息组件。它使用非常简便，同时它支持自定义样式，提示信息的位置，触发提示信息弹出的事件。提示出现隐藏的延迟时间等。
一个vuetooltip组件
08-12
一个vue tooltip组件
基于Vue的简单tooltip工具
08-09
基于 Vue 的简单 tooltip 工具
Vue tooltip 组件封装(动态地控制tooltip的显示，如果内容能够完全显示在父元素中，则不需要使用tooltip)
weixin_46328739的博客
06-08 2449
1.tooltip 组件封装(动态地控制tooltip的显示，如果内容能够完全显示在父元素中，则不需要使用tooltip) 2.Vue文本内容单行或多行超出显示省略号判断，超出显示tooltip提示
vue3 封装一个Tooltip 文字提示组件
ZMJ_QQ的博客
01-09 1510
默认展示icon图标，悬浮展示文字如果slot有内容则展示对应内容。
Vue3文字提示（Tooltip）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
03-13 3903
文字提示气泡框，支持：自定义弹出提示最大宽度；自定义样式；自定义弹出提示位置；自动调整位置；自定义触发方式；按键控制；自定义过渡动画时间；延迟显示隐藏；使用 Methods；隐藏箭头；总之，功能丰富，简单易用😁😁
el-tooltip组件封装
NewBie96的博客
07-31 722
el-tooltip组件封装
vue3 tooltip
fhrlhh的博客
01-09 266
【代码】vue3 tooltip。
vue3+ts 封装复杂echarts
03-08
以下是在 Vue3 + TypeScript 中封装复杂 ECharts 组件的实现思路和最佳实践： # 一、基础封装结构 ```vue <div ref="chartRef" class="echart-container"></div> <script setup lang="ts"> import { ref, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值