tooltip_vue3可以横竖切换添加图标(语法糖)

一、在 components 中新建 toolTip 文件夹并新建 toolTip.vue文件

1、写入 html 代码

<template>
	<view class="tooltip">
		<slot></slot>
		<view v-if="content || $slots.content" class="tooltip-popup" :style="initPosition">
			<view class="popup-img" :style="initImg">
				<image v-if="img" :src="img" mode="aspectFill" class="img"></image>
				{{content}}
			</view>
		</view>
	</view>
</template>

2、写入 css 代码

.tooltip {
	position: relative;

	.tooltip-popup {
		position: absolute;
		display: none;
		background-color: #666;
		border-radius: 10px;
		color: #fff;
		font-size: 12px;
		text-align: justify;
		line-height: 16px;
		padding: 10px;
		z-index: 1;

		.popup-img {

			.img {
				max-width: 30rpx;
				max-height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}

	&:hover .tooltip-popup {
		display: block;
	}
}

3、写入 js 代码

import { ref, defineProps, computed, } from 'vue';

// 父级传过来的值
const {
	content,
	position,
	direction,
	img
} = defineProps({
	content: {
		type: String,
		require: false,
		default: ''
	},
	position: {
		type: String,
		require: false,
		default: 'top' // top --- 上  bottom --- 下  left --- 左  right --- 右
	},
	direction: {
		type: String,
		require: false,
		default: 'cross' // cross --- 横着   vertical --- 竖着
	},
	img: {
		type: String,
		require: false,
		default: '' // 图标 --- 可以为 base64 或者 线上链接 30rpx 以内
	},
})

// 确定位置和方向
const initPosition = computed(() => {
	let style = {};
	if (position === 'left' && direction === 'cross') {
		style = {
			top: '50%',
			transform: 'translateY(-50%)',
			right: '100%',
			marginRight: '15rpx',
			width: '100%',
		}
	} else if (position === 'left' && direction === 'vertical') {
		style = {
			top: '50%',
			transform: 'translateY(-50%)',
			right: '100%',
			marginRight: '15rpx',
		}
	} else if (position === 'right' && direction === 'cross') {
		style = {
			top: '50%',
			transform: 'translateY(-50%)',
			left: '100%',
			marginLeft: '15rpx',
			width: '100%',
		}
	} else if (position === 'right' && direction === 'vertical') {
		style = {
			top: '50%',
			transform: 'translateY(-50%)',
			left: '100%',
			marginLeft: '15rpx',
		}
	} else if (position === 'top' && direction === 'cross') {
		style = {
			bottom: '100%',
			transform: 'translateX(-50%)',
			left: '50%',
			marginBottom: '15rpx',
			width: '100%',
		}
	} else if (position === 'top' && direction === 'vertical') {
		style = {
			bottom: '100%',
			transform: 'translateX(-50%)',
			left: '50%',
			marginBottom: '15rpx',
		}
	} else if (position === 'bottom' && direction === 'cross') {
		style = {
			top: '100%',
			transform: 'translateX(-50%)',
			left: '50%',
			marginTop: '15rpx',
			width: '100%',
		}
	} else if (position === 'bottom' && direction === 'vertical') {
		style = {
			top: '100%',
			transform: 'translateX(-50%)',
			left: '50%',
			marginTop: '15rpx',
		}
	}
	return style;
});

// 有图标时排版
const initImg = computed(() => {
	let style = {};
	if (direction === 'cross') {
		style = {
			display: 'flex',
			alignItems: 'center',
		}
	} else if (direction === 'vertical') {
		style = {};
	}
	return style;
})

二、父组件调用

1、html 代码

<tool-tip content="示例文字" position="bottom" direction="cross" img="https://www.baidu.com/favicon.ico">
	<view>示例文字展示</view>
</tool-tip>

2、js代码

import toolTip from '@/components/toolTip/toolTip.vue';