文本描边 TextOutline

一个用于给文字添加描边的轻量组件，常用于强调标题或装饰性文字效果。

基本用法

将文字放入默认插槽。使用 color 设置文字描边颜色，使用 outlineWidth 控制描边粗细。

Outlined Text

Outlined Text

<template>
	<div>
		<div style="padding: 8px; background: #222">
			<px-text-outline color="#fff" :outlineWidth="2" style="color: rgb(0, 168, 145)">
				Outlined Text
			</px-text-outline>
		</div>
		<div style="padding: 24px; background: #222">
			<px-text-outline
				color="#fff"
				:outlineWidth="2"
				style="font-size: 24px; color: rgb(0, 168, 145)"
			>
				Outlined Text
			</px-text-outline>
		</div>
	</div>
</template>

填充颜色

color 接受任意 CSS 颜色字符串（十六进制、rgb / rgba、颜色名，或通过 CSS 变量/背景字符串实现渐变等），作为文字的描边填充。

Outlined Text

<template>
	<div style="padding: 8px; background: #222">
		<px-text-outline
			color="linear-gradient(-90deg, red 9%, blue 88%)"
			:outlineWidth="3"
			style="font-size: 24px"
		>
			Outlined Text
		</px-text-outline>
	</div>
</template>

描边宽度

outlineWidth 控制描边宽度。若传入数字，则转换为像素单位；传入字符串则按字面使用（例如 '0.1em'、'2px'）。

Outlined Text

Outlined Text

Outlined Text

Outlined Text

Outlined Text

Outlined Text

Outlined Text

Outlined Text

<template>
	<div>
		<div style="padding: 8px; background: #222" v-for="value in [1, 2, 4, 8, 16]" :key="value">
			<px-text-outline
				color="#fff"
				:outlineWidth="value"
				:style="{
					fontSize: 14 + value + 'px',
					color: 'rgb(0, 168, 145)'
				}"
			>
				Outlined Text
			</px-text-outline>
		</div>
		<div style="padding: 8px; background: #222" v-for="value in [1, 2, 4]" :key="value">
			<px-text-outline
				color="#fff"
				outlineWidth="0.1em"
				:style="{
					fontSize: 14 * value + 'px',
					paddingLeft: '0.2em',
					paddingRight: '0.2em',
					color: 'rgb(0, 168, 145)'
				}"
			>
				Outlined Text
			</px-text-outline>
		</div>
	</div>
</template>

API

TextOutlineProps

属性	类型	可选	默认值	描述	版本
color	string	是		填充颜色，接受任意合法 CSS 颜色或背景字符串（例如 '#fff'、'rgba(255,0,0,0.8)'、'linear-gradient(...)' 等）。	0.0.3
outlineWidth	number | string	是	1	描边宽度，支持 number 或 字符串。number → 视为像素（例如 1 → 1px），字符串按字面使用（例如 '0.1em'、'2px'）。默认 1。	0.0.3
autoPadding	boolean	是	true	自动根据描边宽度加上左右 padding 以防止描边被裁剪。	0.0.3

TextOutlineSlots

插槽	参数	描述	版本
default		文本内容插槽。	0.0.3