gypsy-crm-frontend-vu/components/cwg-tooltip.vue

<template>
	<view class="cwg-tooltip" @mouseenter="showTooltip" @mouseleave="hideTooltip">
		<!-- 触发元素插槽 -->
		<slot></slot>

		<!-- 弹出层 -->
		<view v-if="content || $slots.content" class="cwg-tooltip-popup"
			:class="[`placement-${placement}`, { show: isVisible }]" :style="popupStyle">
			<!-- 内容插槽 -->
			<slot name="content">
				{{ content }}
			</slot>
		</view>
	</view>
</template>

<script setup>
import { ref, watch, computed } from 'vue'

const props = defineProps({
	content: {
		type: String,
		default: ''
	},
	placement: {
		type: String,
		default: 'bottom',
		validator: (value) => ['left', 'right', 'top', 'bottom'].includes(value)
	},
	manual: {
		type: Boolean,
		default: false
	},
	visible: {
		type: Boolean,
		default: false
	},
	// 添加间距控制
	spacing: {
		type: String,
		default: '12rpx'
	},
	// 添加最大宽度控制
	maxWidth: {
		type: String,
		default: ''
	}
})

const emit = defineEmits(['update:visible', 'show', 'hide'])

// 内部显示状态
const isVisible = ref(props.manual ? props.visible : false)

// 监听visible变化
watch(() => props.visible, (val) => {
	if (props.manual) {
		isVisible.value = val
	}
})

// 弹窗样式
const popupStyle = computed(() => {
	const style = {}
	if (props.maxWidth) {
		style.maxWidth = props.maxWidth
	}
	return style
})

// 显示弹窗
const showTooltip = () => {
	if (!props.manual) {
		isVisible.value = true
		emit('show')
	}
}

// 隐藏弹窗
const hideTooltip = () => {
	if (!props.manual) {
		isVisible.value = false
		emit('hide')
	}
}

// 切换显示状态（手动模式）
const toggle = () => {
	if (props.manual) {
		isVisible.value = !isVisible.value
		emit('update:visible', isVisible.value)
	}
}

// 显示（手动模式）
const show = () => {
	if (props.manual) {
		isVisible.value = true
		emit('update:visible', true)
		emit('show')
	}
}

// 隐藏（手动模式）
const hide = () => {
	if (props.manual) {
		isVisible.value = false
		emit('update:visible', false)
		emit('hide')
	}
}

// 暴露方法给父组件
defineExpose({
	toggle,
	show,
	hide
})
</script>

<style scoped lang="scss">
.cwg-tooltip {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

/* 弹窗基础样式 */
.cwg-tooltip-popup {
	position: absolute;
	z-index: 1000;
	text-align: center;
	line-height: 1.5;
	word-break: break-word;
	white-space: nowrap;
	display: none;
	padding: px2rpx(16) px2rpx(24);
	font-size: px2rpx(16);
	color: var(--bs-heading-color);

	/* 你的样式要求 */
	background-color: var(--color-slate-100) !important;
	border-radius: px2rpx(8);

	/* 让箭头可见 */
	overflow: visible;

	/* 默认箭头样式（右侧定位） */
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		left: -12px;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-width: px2rpx(6);
		border-style: solid;
		border-color: transparent var(--color-slate-100) transparent transparent;
		pointer-events: none;
		z-index: 100001;
	}
}

/* 显示状态 */
.cwg-tooltip-popup.show {
	display: block;
}

/* 不同位置的定位 - 箭头方向也相应调整 */

/* 左侧定位 */
.cwg-tooltip-popup.placement-left {
	top: 50%;
	right: 100%;
	transform: translateY(-50%);
	margin-right: v-bind('props.spacing');

	&::after {
		left: auto;
		right: -12px;
		border-color: transparent transparent transparent var(--color-slate-100);
	}
}

/* 右侧定位 */
.cwg-tooltip-popup.placement-right {
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	margin-left: v-bind('props.spacing');

	&::after {
		left: -12px;
		border-color: transparent var(--color-slate-100) transparent transparent;
	}
}

/* 上方定位 */
.cwg-tooltip-popup.placement-top {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: v-bind('props.spacing');

	&::after {
		top: auto;
		bottom: -12px;
		left: 50%;
		transform: translateX(-50%);
		border-color: var(--color-slate-100) transparent transparent transparent;
	}
}

/* 下方定位 */
.cwg-tooltip-popup.placement-bottom {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: v-bind('props.spacing');

	&::after {
		top: -12px;
		left: 50%;
		transform: translateX(-50%);
		border-color: transparent transparent var(--color-slate-100) transparent;
	}
}

/* 长内容换行 - 当设置了最大宽度时 */
.cwg-tooltip-popup[style*="max-width"] {
	white-space: normal;
}
</style>