Pixelium Design

中文

English

中文

English

Appearance

文本提示 Tooltip ​

Tooltip 用于弹出隐藏的文本提示。

目前 Tooltip 和 Tooltip 组件除了样式外几乎是一样的，保留两个组件是出于 UI 设计和代码后续开发的可维护性考虑。

从 UI 角度来说，Tooltip 用于只读短文本提示，Tooltip 承载更丰富的内容（标题、按钮、表单等）可以让用户完成轻量操作。

基础使用 ​

Tooltip 文本提示提供 9 种展示位置。

使用 content 属性来设置显示的信息。 由 placement 属性决定弹出的位置。该属性值格式为：[方向]-[对齐位置]，分别是'top'、'right'、'bottom'、'left'、'top-start'、'top-end'、'right-start'、'right-end'、'bottom-start'、'bottom-end'、'left-start'、'left-end'，有四个展示方向，和三种对齐方式，默认的 placement 为 top。

<template>
	<div class="box">
		<div class="left">
			<px-tooltip
				v-for="item in ['left-start', 'left', 'left-end']"
				:key="item"
				:placement="item"
				:content="getContent(item)"
			>
				<px-button>{{ getLabel(item) }}</px-button>
			</px-tooltip>
		</div>
		<div class="center">
			<div class="top">
				<px-tooltip
					v-for="item in ['top-start', 'top', 'top-end']"
					:key="item"
					:placement="item"
					:content="getContent(item)"
				>
					<px-button>{{ getLabel(item) }}</px-button>
				</px-tooltip>
			</div>
			<div class="bottom">
				<px-tooltip
					v-for="item in ['bottom-start', 'bottom', 'bottom-end']"
					:key="item"
					:placement="item"
					:content="getContent(item)"
				>
					<px-button>{{ getLabel(item) }}</px-button>
				</px-tooltip>
			</div>
		</div>
		<div class="right">
			<px-tooltip
				v-for="item in ['right-start', 'right', 'right-end']"
				:key="item"
				:placement="item"
				:content="getContent(item)"
			>
				<px-button>{{ getLabel(item) }}</px-button>
			</px-tooltip>
		</div>
	</div>
</template>

<script setup lang="ts">
const getLabel = (placement: string) => {
	return placement.replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
}

const getContent = (placement: string) => {
	let contentArr: string[] = []
	if (placement.includes('-')) {
		const [pos, sub] = placement.split('-')
		contentArr = [capitalize(pos), capitalize(sub), 'Popover']
	} else {
		contentArr = [capitalize(placement), 'Popover']
	}

	return placement.startsWith('top') || placement.startsWith('bottom')
		? contentArr.join(' ')
		: contentArr.join('\n')
}

const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
</script>

<style lang="css" scoped>
.box {
	display: flex;
	width: 600px;
	height: 350px;
	margin-left: 100px;
	margin-top: 64px;
	margin-bottom: 64px;
}
.left,
.right {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.left {
	align-items: flex-start;
}
.right {
	align-items: flex-end;
}
.center {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.top,
.bottom {
	display: flex;
	justify-content: space-around;
}
.top {
	flex: 1;
}
</style>

触发方式 ​

trigger 属性设置触发方式。

<template>
	<px-space>
		<px-tooltip content="Hover" trigger="hover">
			<px-button>Hover</px-button>
		</px-tooltip>
		<px-tooltip content="Click" trigger="click">
			<px-button>Click</px-button>
		</px-tooltip>
	</px-space>
</template>

受控模式 ​

传入 visible 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultVisible 属性作为默认值。

<template>
	<px-space>
		<px-tooltip content="Controlled" v-model:visible="visible">
			<px-button>Controlled {{ visible }}</px-button>
		</px-tooltip>
		<px-tooltip content="Uncontrolled">
			<px-button>Uncontrolled</px-button>
		</px-tooltip>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

禁用状态 ​

传入 disabled 设置禁用状态，禁用状态下，鼠标事件将不再影响弹出关闭。

<template>
	<px-tooltip disabled content="Test">
		<px-button>Cannot Show Popover</px-button>
	</px-tooltip>
</template>

不展示箭头 ​

传入 arrow 设置是否展示箭头，默认为 true。

<template>
	<px-space>
		<px-tooltip content="Not Arrow" :arrow="false">
			<px-button>Not Arrow</px-button>
		</px-tooltip>
		<px-tooltip content="Has Arrow">
			<px-button>Has Arrow</px-button>
		</px-tooltip>
	</px-space>
</template>

偏移距离 ​

传入 offset 设置弹出框和触发元素之间的距离。

<template>
	<px-space>
		<px-tooltip content="Offset Default">
			<px-button>Offset Default</px-button>
		</px-tooltip>
		<px-tooltip content="Offset 0px" :offset="0">
			<px-button>Offset 0px</px-button>
		</px-tooltip>
	</px-space>
</template>

API ​

TooltipProps ​

属性类型可选默认值描述版本
contentstring是气泡内容。0.0.2
visibleboolean | null是是否显示气泡（受控）。0.0.2
defaultVisibleboolean | null是默认是否显示气泡（非受控）。0.0.2
placement'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'是'top'气泡相对于触发元素的位置。0.0.2
trigger'hover' | 'click'是'hover'触发方式。0.0.2
offsetnumber是8偏移距离，单位为像素。0.0.2
variant'dark' | 'light'是'dark'气泡样式变体。0.0.2
arrowboolean是true是否显示箭头。0.0.2
disabledboolean是false是否禁用气泡。0.0.2
disablednumber是是否禁用气泡。0.0.2
rootHTMLElement | string是'body'气泡挂载的元素。0.0.2

TooltipEvents ​

事件参数描述版本
update:visiblevalue: booleanv-model 更新 visible 属性。0.0.2
closee: MouseEvent气泡关闭时的回调。0.0.2
opene: MouseEvent气泡打开时的回调。0.0.2