水印 AsamWatermark

使用场景

在一个内容区域上重复显示说明文字或图形。

基础用法与状态

下列示例只使用本入口的实际公开能力。

基础用法与状态

vue

<template>
	<AsamWatermark :content="['ASAM', '本地示例']">
		<div class="watermark-content">用于展示水印的本地内容区域。</div>
	</AsamWatermark>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamWatermarkBasicDemo' });
import { AsamWatermark } from '@asam-ui/ui';
</script>

<style scoped>
.watermark-content {
	height: 240px;
	padding: var(--asam-space-lg);
}
</style>

vue

<template>
	<AsamWatermark :content="['ASAM', '本地示例']">
		<div class="watermark-content">用于展示水印的本地内容区域。</div>
	</AsamWatermark>
</template>

<script setup>
defineOptions({ name: 'AsamWatermarkBasicDemo' });
import { AsamWatermark } from '@asam-ui/ui';
</script>

<style scoped>
.watermark-content {
	height: 240px;
	padding: var(--asam-space-lg);
}
</style>

使用约定

content 使用文字或文字数组，image 可提供图像；font、rotate、width/height、gap/offset 与 zIndex 控制水印排布。default 插槽放被覆盖内容，必须为容器建立实际尺寸。本例明确设置 ASAM 文字；水印不执行访问控制。

完整使用场景

基础用法

最简单的用法。

基础用法

许可

vue

<template>
	<AsamButton type="default" native-type="button" @click="isDark = !isDark"
		>切换深色水印</AsamButton
	>
	<AsamWatermark :font="font">
		<div style="height: 500px" />
	</AsamWatermark>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamWatermarkCapBasicDemo' });
import { AsamButton, AsamWatermark } from '@asam-ui/ui';

import { reactive, watch } from 'vue';
import { ref } from 'vue';
const isDark = ref(false);

const font = reactive({
	color: 'rgba(0, 0, 0, .15)'
});

watch(
	isDark,
	() => {
		font.color = isDark.value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';
	},
	{
		immediate: true
	}
);
</script>

许可

vue

<template>
	<AsamButton type="default" native-type="button" @click="isDark = !isDark"
		>切换深色水印</AsamButton
	>
	<AsamWatermark :font="font">
		<div style="height: 500px" />
	</AsamWatermark>
</template>

<script setup>
defineOptions({ name: 'AsamWatermarkCapBasicDemo' });
import { AsamButton, AsamWatermark } from '@asam-ui/ui';
import { reactive, watch } from 'vue';
import { ref } from 'vue';
const isDark = ref(false);
const font = reactive({
	color: 'rgba(0, 0, 0, .15)'
});
watch(
	isDark,
	() => {
		font.color = isDark.value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';
	},
	{
		immediate: true
	}
);
</script>

多行水印

使用 content设置一个字符串数组来指定多行文本水印内容

多行水印

许可

vue

<template>
	<AsamButton type="default" native-type="button" @click="isDark = !isDark"
		>切换深色水印</AsamButton
	>
	<AsamWatermark :font="font" :content="['Element+', 'ASAM UI']">
		<div style="height: 500px" />
	</AsamWatermark>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamWatermarkCapMultiLineDemo' });
import { AsamButton, AsamWatermark } from '@asam-ui/ui';

import { reactive, watch } from 'vue';
import { ref } from 'vue';
const isDark = ref(false);

const font = reactive({
	color: 'rgba(0, 0, 0, .15)'
});

watch(
	isDark,
	() => {
		font.color = isDark.value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';
	},
	{
		immediate: true
	}
);
</script>

许可

vue

<template>
	<AsamButton type="default" native-type="button" @click="isDark = !isDark"
		>切换深色水印</AsamButton
	>
	<AsamWatermark :font="font" :content="['Element+', 'ASAM UI']">
		<div style="height: 500px" />
	</AsamWatermark>
</template>

<script setup>
defineOptions({ name: 'AsamWatermarkCapMultiLineDemo' });
import { AsamButton, AsamWatermark } from '@asam-ui/ui';
import { reactive, watch } from 'vue';
import { ref } from 'vue';
const isDark = ref(false);
const font = reactive({
	color: 'rgba(0, 0, 0, .15)'
});
watch(
	isDark,
	() => {
		font.color = isDark.value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';
	},
	{
		immediate: true
	}
);
</script>

图片水印

通过 image 指定图像地址。为了确保图像清晰展示而不是被拉伸，请设置宽度和高度，建议使用至少两倍的宽度和高度的图片来保证显示效果。

图片水印

许可

vue

<template>
	<AsamWatermark
		:width="130"
		:height="30"
		image="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E"
	>
		<div style="height: 500px" />
	</AsamWatermark>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamWatermarkCapImageDemo' });
import { AsamWatermark } from '@asam-ui/ui';
</script>

许可

vue

<template>
	<AsamWatermark
		:width="130"
		:height="30"
		image="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E"
	>
		<div style="height: 500px" />
	</AsamWatermark>
</template>

<script setup>
defineOptions({ name: 'AsamWatermarkCapImageDemo' });
import { AsamWatermark } from '@asam-ui/ui';
</script>

自定义配置

配置自定义参数预览水印效果。

自定义配置

许可

vue

<template>
	<div class="demo-root-layout">
		<AsamButton type="default" native-type="button" @click="isDark = !isDark"
			>切换深色水印</AsamButton
		>
		<div class="wrapper demo-layout-1">
			<AsamWatermark
				class="watermark"
				:content="config.content"
				:font="config.font"
				:z-index="config.zIndex"
				:rotate="config.rotate"
				:gap="config.gap"
				:offset="watermarkOffset"
			>
				<div class="watermark-container">
					<h1>ASAM UI</h1>
					<h2>面向设计师与开发者的 Vue 3 组件库</h2>
					<AsamImage
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E"
						alt="示例图片"
					/>
				</div>
			</AsamWatermark>
			<!-- prettier-ignore -->
			<AsamBaseForm
			class="form"
			:model="config"
			label-position="top"
			label-width="50px"
		>
			<AsamFormItem label="内容">
				<AsamInput
					:model-value="config.content"
					@update:model-value="
						(value) => {
							if (typeof value === 'string') config.content = value;
						}
					"
				/>
			</AsamFormItem>
			<AsamFormItem label="颜色">
				<AsamColorPicker
					:model-value="config.font.color"
					show-alpha
					@update:model-value="
						(value) => {
							config.font.color =
								typeof value === 'string'
									? value
									: isDark
										? 'rgba(255, 255, 255, .15)'
										: 'rgba(0, 0, 0, .15)';
						}
					"
				/>
			</AsamFormItem>
			<AsamFormItem label="字号">
				<AsamSlider
					:model-value="config.font.fontSize"
					@update:model-value="
						(value) => {
							if (typeof value === 'number') config.font.fontSize = value;
						}
					"
				/>
			</AsamFormItem>
			<AsamFormItem label="zIndex">
				<AsamSlider
					:model-value="config.zIndex"
					@update:model-value="
						(value) => {
							if (typeof value === 'number') config.zIndex = value;
						}
					"
				/>
			</AsamFormItem>
			<AsamFormItem label="旋转">
				<AsamSlider
					:model-value="config.rotate"
					:min="-180"
					:max="180"
					@update:model-value="
						(value) => {
							if (typeof value === 'number') config.rotate = value;
						}
					"
				/>
			</AsamFormItem>
			<AsamFormItem label="间距">
				<AsamSpace>
					<AsamInputNumber
						:model-value="config.gap[0]"
						controls-position="right"
						@update:model-value="
							(value) => {
								config.gap[0] = typeof value === 'number' ? value : 100;
							}
						"
					/>
					<AsamInputNumber
						:model-value="config.gap[1]"
						controls-position="right"
						@update:model-value="
							(value) => {
								config.gap[1] = typeof value === 'number' ? value : 100;
							}
						"
					/>
				</AsamSpace>
			</AsamFormItem>
			<AsamFormItem label="偏移量">
				<AsamSpace>
					<AsamInputNumber
						:model-value="offset[0]"
						placeholder="offsetLeft"
						controls-position="right"
						@update:model-value="
							(value) => {
								offset[0] = typeof value === 'number' ? value : undefined;
							}
						"
					/>
					<AsamInputNumber
						:model-value="offset[1]"
						placeholder="offsetTop"
						controls-position="right"
						@update:model-value="
							(value) => {
								offset[1] = typeof value === 'number' ? value : undefined;
							}
						"
					/>
				</AsamSpace>
			</AsamFormItem>
		</AsamBaseForm>
		</div>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamWatermarkCapCustomDemo' });
import {
	AsamImage,
	AsamButton,
	AsamWatermark,
	AsamBaseForm,
	AsamFormItem,
	AsamInput,
	AsamColorPicker,
	AsamSlider,
	AsamSpace,
	AsamInputNumber
} from '@asam-ui/ui';

import { computed, reactive, watch } from 'vue';
import { ref } from 'vue';
const isDark = ref(false);

const gap = reactive<[number, number]>([100, 100]);
const offset = reactive<[number | undefined, number | undefined]>([undefined, undefined]);

const config = reactive({
	content: 'ASAM UI',
	font: {
		fontSize: 16,
		color: 'rgba(0, 0, 0, 0.15)'
	},
	zIndex: -1,
	rotate: -22,
	gap
});

const watermarkOffset = computed<[number, number] | undefined>(() => {
	const [left, top] = offset;
	return left === undefined && top === undefined
		? undefined
		: [left ?? config.gap[0] / 2, top ?? config.gap[1] / 2];
});

watch(
	isDark,
	(value) => {
		config.font.color = value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';
	},
	{ immediate: true }
);
</script>

<style scoped>
.wrapper {
	display: flex;
}

.watermark {
	display: flex;
	flex: auto;
}

.watermark-container {
	flex: auto;
}

.form {
	width: 330px;
	margin-left: 20px;
	border-left: 1px solid #eee;
	padding-left: 20px;
}

img {
	z-index: 10;
	width: 100%;
	max-width: 300px;
	position: relative;
}
</style>

<style scoped>
.demo-layout-1 {
	gap: var(--asam-space-md);
}
</style>

<style scoped>
.demo-root-layout {
	display: flex;
	gap: var(--asam-space-md);
	flex-wrap: wrap;
	align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

许可

vue

<template>
	<div class="demo-root-layout">
		<AsamButton type="default" native-type="button" @click="isDark = !isDark"
			>切换深色水印</AsamButton
		>
		<div class="wrapper demo-layout-1">
			<AsamWatermark
				class="watermark"
				:content="config.content"
				:font="config.font"
				:z-index="config.zIndex"
				:rotate="config.rotate"
				:gap="config.gap"
				:offset="watermarkOffset"
			>
				<div class="watermark-container">
					<h1>ASAM UI</h1>
					<h2>面向设计师与开发者的 Vue 3 组件库</h2>
					<AsamImage
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E"
						alt="示例图片"
					/>
				</div>
			</AsamWatermark>
			<!-- prettier-ignore -->
			<AsamBaseForm
			class="form"
			:model="config"
			label-position="top"
			label-width="50px"
		>
			<AsamFormItem label="内容">
				<AsamInput
					:model-value="config.content"
					@update:model-value="
						(value) => {
							if (typeof value === 'string') config.content = value;
						}
					"
				/>
			</AsamFormItem>
			<AsamFormItem label="颜色">
				<AsamColorPicker
					:model-value="config.font.color"
					show-alpha
					@update:model-value="
						(value) => {
							config.font.color =
								typeof value === 'string'
									? value
									: isDark
										? 'rgba(255, 255, 255, .15)'
										: 'rgba(0, 0, 0, .15)';
						}
					"
				/>
			</AsamFormItem>
			<AsamFormItem label="字号">
				<AsamSlider
					:model-value="config.font.fontSize"
					@update:model-value="
						(value) => {
							if (typeof value === 'number') config.font.fontSize = value;
						}
					"
				/>
			</AsamFormItem>
			<AsamFormItem label="zIndex">
				<AsamSlider
					:model-value="config.zIndex"
					@update:model-value="
						(value) => {
							if (typeof value === 'number') config.zIndex = value;
						}
					"
				/>
			</AsamFormItem>
			<AsamFormItem label="旋转">
				<AsamSlider
					:model-value="config.rotate"
					:min="-180"
					:max="180"
					@update:model-value="
						(value) => {
							if (typeof value === 'number') config.rotate = value;
						}
					"
				/>
			</AsamFormItem>
			<AsamFormItem label="间距">
				<AsamSpace>
					<AsamInputNumber
						:model-value="config.gap[0]"
						controls-position="right"
						@update:model-value="
							(value) => {
								config.gap[0] = typeof value === 'number' ? value : 100;
							}
						"
					/>
					<AsamInputNumber
						:model-value="config.gap[1]"
						controls-position="right"
						@update:model-value="
							(value) => {
								config.gap[1] = typeof value === 'number' ? value : 100;
							}
						"
					/>
				</AsamSpace>
			</AsamFormItem>
			<AsamFormItem label="偏移量">
				<AsamSpace>
					<AsamInputNumber
						:model-value="offset[0]"
						placeholder="offsetLeft"
						controls-position="right"
						@update:model-value="
							(value) => {
								offset[0] = typeof value === 'number' ? value : undefined;
							}
						"
					/>
					<AsamInputNumber
						:model-value="offset[1]"
						placeholder="offsetTop"
						controls-position="right"
						@update:model-value="
							(value) => {
								offset[1] = typeof value === 'number' ? value : undefined;
							}
						"
					/>
				</AsamSpace>
			</AsamFormItem>
		</AsamBaseForm>
		</div>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamWatermarkCapCustomDemo' });
import {
	AsamImage,
	AsamButton,
	AsamWatermark,
	AsamBaseForm,
	AsamFormItem,
	AsamInput,
	AsamColorPicker,
	AsamSlider,
	AsamSpace,
	AsamInputNumber
} from '@asam-ui/ui';
import { computed, reactive, watch } from 'vue';
import { ref } from 'vue';
const isDark = ref(false);
const gap = reactive([100, 100]);
const offset = reactive([undefined, undefined]);

const config = reactive({
	content: 'ASAM UI',
	font: {
		fontSize: 16,
		color: 'rgba(0, 0, 0, 0.15)'
	},
	zIndex: -1,
	rotate: -22,
	gap
});
const watermarkOffset = computed(() => {
	const [left, top] = offset;
	return left === undefined && top === undefined
		? undefined
		: [left ?? config.gap[0] / 2, top ?? config.gap[1] / 2];
});

watch(
	isDark,
	(value) => {
		config.font.color = value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';
	},
	{ immediate: true }
);
</script>

<style scoped>
.wrapper {
	display: flex;
}

.watermark {
	display: flex;
	flex: auto;
}

.watermark-container {
	flex: auto;
}

.form {
	width: 330px;
	margin-left: 20px;
	border-left: 1px solid #eee;
	padding-left: 20px;
}

img {
	z-index: 10;
	width: 100%;
	max-width: 300px;
	position: relative;
}
</style>

<style scoped>
.demo-layout-1 {
	gap: var(--asam-space-md);
}
</style>

<style scoped>
.demo-root-layout {
	display: flex;
	gap: var(--asam-space-md);
	flex-wrap: wrap;
	align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

自定义示例显式收窄控件回写值：Gap 清空后恢复该轴的初始值 100；Offset 清空后恢复自动偏移，两个轴均为空时交由水印组件按 Gap 的一半计算，只有一个轴为空时该轴采用当前 Gap 的一半。数值 0 仍是有效的显式偏移。颜色清空后恢复当前主题的默认半透明颜色。

API

属性 `AsamWatermarkProps`

属性名	说明	类型	默认值
`zIndex`	水印元素的z-index值	`number \| undefined`	`9`
`rotate`	水印旋转角度。	`number \| undefined`	`-22`
`width`	水印宽度。	`number \| undefined`	—
`height`	水印高度。	`number \| undefined`	—
`image`	图片来源，支持 base64，建议使用二倍或三倍尺寸图片；优先级较高。	`string \| undefined`	—
`content`	水印文本内容	`string \| string[] \| undefined`	`内置默认文本（建议显式设置）`
`font`	文字样式	`AsamWatermarkFontType \| undefined`	—
`gap`	水印之间的间距	`[number, number] \| undefined`	`工厂函数（每个实例创建）`
`offset`	水印从容器左上角的偏移默认值为 gap/2	`[number, number] \| undefined`	—
`key`	—	`PropertyKey \| undefined`	—
`ref`	—	`VNodeRef \| undefined`	—
`ref_for`	—	`boolean \| undefined`	—
`ref_key`	—	`string \| undefined`	—
`onVnodeBeforeMount`	—	`(AsamWatermarkProps)["onVnodeBeforeMount"]`	—
`onVnodeMounted`	—	`(AsamWatermarkProps)["onVnodeMounted"]`	—
`onVnodeBeforeUpdate`	—	`(AsamWatermarkProps)["onVnodeBeforeUpdate"]`	—
`onVnodeUpdated`	—	`(AsamWatermarkProps)["onVnodeUpdated"]`	—
`onVnodeBeforeUnmount`	—	`(AsamWatermarkProps)["onVnodeBeforeUnmount"]`	—
`onVnodeUnmounted`	—	`(AsamWatermarkProps)["onVnodeUnmounted"]`	—
`class`	—	`unknown`	—
`style`	—	`unknown`	—

实例方法与状态 `AsamWatermarkExpose`

属性名	说明	类型	默认值
`$`	—	`AsamWatermarkExpose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamWatermarkProps`	—
`$attrs`	—	`AsamWatermarkExpose["$attrs"]`	—
`$refs`	—	`AsamWatermarkExpose["$refs"]`	—
`$slots`	—	`AsamWatermarkSlots`	—
`$root`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$parent`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$host`	—	`Element \| null`	—
`$emit`	—	`(event: string, ...args: any[]) => void`	—
`$el`	—	`any`	—
`$options`	—	`(AsamWatermarkExpose)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamWatermarkExpose)["$nextTick"]`	—
`$watch`	—	`(AsamWatermarkExpose)["$watch"]`	—
`content`	—	`string \| string[]`	—
`zIndex`	—	`number`	—
`gap`	—	`[number, number]`	—
`rotate`	—	`number`	—
`offset`	水印从容器左上角的偏移默认值为 gap/2	`[number, number] \| undefined`	—
`width`	水印宽度。	`number \| undefined`	—
`height`	水印高度。	`number \| undefined`	—
`image`	图片来源，支持 base64，建议使用二倍或三倍尺寸图片；优先级较高。	`string \| undefined`	—
`font`	文字样式	`AsamWatermarkFontType \| undefined`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamWatermarkExpose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamWatermarkExpose["$router"]`	—

类型 `AsamWatermarkInstance`

属性名	说明	类型	默认值
`$`	—	`AsamWatermarkExpose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamWatermarkProps`	—
`$attrs`	—	`AsamWatermarkExpose["$attrs"]`	—
`$refs`	—	`AsamWatermarkExpose["$refs"]`	—
`$slots`	—	`AsamWatermarkSlots`	—
`$root`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$parent`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$host`	—	`Element \| null`	—
`$emit`	—	`(event: string, ...args: any[]) => void`	—
`$el`	—	`any`	—
`$options`	—	`(AsamWatermarkInstance)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamWatermarkInstance)["$nextTick"]`	—
`$watch`	—	`(AsamWatermarkInstance)["$watch"]`	—
`content`	—	`string \| string[]`	—
`zIndex`	—	`number`	—
`gap`	—	`[number, number]`	—
`rotate`	—	`number`	—
`offset`	水印从容器左上角的偏移默认值为 gap/2	`[number, number] \| undefined`	—
`width`	水印宽度。	`number \| undefined`	—
`height`	水印高度。	`number \| undefined`	—
`image`	图片来源，支持 base64，建议使用二倍或三倍尺寸图片；优先级较高。	`string \| undefined`	—
`font`	文字样式	`AsamWatermarkFontType \| undefined`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamWatermarkExpose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamWatermarkExpose["$router"]`	—

插槽 `AsamWatermarkSlots`

属性名	说明	类型	默认值
`default`	—	`(AsamWatermarkSlots)["default"]`	—

类型 `AsamWatermarkFontType`

属性名	说明	类型	默认值
`color`	—	`string \| undefined`	—
`fontSize`	—	`string \| number \| undefined`	—
`fontWeight`	—	`enum"normal" \| "bold" \| "bolder" \| "lighter"`完整类型：`number \| "normal" \| "bold" \| "bolder" \| "lighter" \| undefined`	—
`fontStyle`	—	`enum"none" \| "normal" \| "italic" \| "oblique"`完整类型：`"none" \| "normal" \| "italic" \| "oblique" \| undefined`	—
`fontFamily`	—	`string \| undefined`	—
`fontGap`	—	`number \| undefined`	—
`textAlign`	—	`enum"right" \| "left" \| "start" \| "center" \| "end"`完整类型：`"right" \| "left" \| "start" \| "center" \| "end" \| undefined`	—
`textBaseline`	—	`enum"top" \| "bottom" \| "middle" \| "alphabetic" \| "ideographic" \| "hanging"`完整类型：`"top" \| "bottom" \| "middle" \| "alphabetic" \| "ideographic" \| "hanging" \| undefined`	—

类型 `AsamWatermarkPropsPublic`

属性名	说明	类型	默认值
`zIndex`	—	`number \| undefined`	—
`offset`	—	`[number, number] \| undefined`	—
`content`	—	`(AsamWatermarkPropsPublic)["content"]`	—
`width`	—	`number \| undefined`	—
`height`	—	`number \| undefined`	—
`image`	—	`string \| undefined`	—
`rotate`	—	`number \| undefined`	—
`font`	—	`AsamWatermarkFontType \| undefined`	—
`gap`	—	`[number, number] \| undefined`	—

参数与事件补充说明

公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。

参数与事件说明

`zIndex`

必填：否；声明来源：上游声明。

默认值与来源

9（已安装运行时；已安装组件）

固定上游文档默认：9（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：9（2.14.7；源码事实，未作为 ASAM 运行实测）

`rotate`

必填：否；声明来源：上游声明。

默认值与来源

-22（已安装运行时；已安装组件）

固定上游文档默认：-22（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：-22（2.14.7；源码事实，未作为 ASAM 运行实测）

`width`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游文档默认：120（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`height`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游文档默认：64（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`image`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`content`

必填：否；声明来源：上游声明。

默认值与来源

内置默认文本（建议显式设置）（已安装运行时；已安装组件）

固定上游文档默认：原始表达式见机器资料（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：原始表达式见机器资料（2.14.7；源码事实，未作为 ASAM 运行实测）

`font`

必填：否；声明来源：上游声明。

font 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

font.color: string | undefined — 上游声明
字体颜色
固定上游文档默认：rgba(0,0,0,.15)（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontSize: string | number | undefined — 上游声明
字体大小
固定上游文档默认：16（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontWeight: number | "normal" | "bold" | "bolder" | "lighter" | undefined — 上游声明
字重
固定上游文档默认：normal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："normal" / "bold" / "bolder" / "lighter"
font.fontStyle: "none" | "normal" | "italic" | "oblique" | undefined — 上游声明
字体样式
固定上游文档默认：normal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："none" / "normal" / "italic" / "oblique"
font.fontFamily: string | undefined — 上游声明
字体
固定上游文档默认：sans-serif（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontGap: number | undefined — 上游声明
字体间隙
固定上游文档默认：3（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.textAlign: "right" | "left" | "start" | "center" | "end" | undefined — 上游声明
文本对齐
固定上游文档默认：center（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："right" / "left" / "start" / "center" / "end"
font.textBaseline: "top" | "bottom" | "middle" | "alphabetic" | "ideographic" | "hanging" | undefined — 上游声明
文本基线
固定上游文档默认：hanging（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："top" / "bottom" / "middle" / "alphabetic" / "ideographic" / "hanging"

默认值与来源

未知 / 未声明

固定上游文档默认：[Font](#font)（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`gap`

必填：否；声明来源：上游声明。

默认值与来源

工厂函数（每个实例创建）（实例工厂；已安装组件）

固定上游文档默认：\[100, 100\]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码工厂（未执行）：() => [100, 100]（2.14.7；源码事实，未作为 ASAM 运行实测）

`offset`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游文档默认：\[gap\[0\]/2, gap\[1\]/2\]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`key`

必填：否；声明来源：依赖声明。

`ref`

必填：否；声明来源：依赖声明。

ref 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void

ref.value: any — 依赖声明
ref.__@RefSymbol@8854: true — 依赖声明
仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：true

`ref_for`

必填：否；声明来源：依赖声明。

ref_for 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`ref_key`

必填：否；声明来源：依赖声明。

`onVnodeBeforeMount`

必填：否；声明来源：依赖声明。

onVnodeBeforeMount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeMounted`

必填：否；声明来源：依赖声明。

onVnodeMounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeBeforeUpdate`

必填：否；声明来源：依赖声明。

onVnodeBeforeUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeUpdated`

必填：否；声明来源：依赖声明。

onVnodeUpdated 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeBeforeUnmount`

必填：否；声明来源：依赖声明。

onVnodeBeforeUnmount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeUnmounted`

必填：否；声明来源：依赖声明。

onVnodeUnmounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`class`

必填：否；声明来源：依赖声明。

`style`

必填：否；声明来源：依赖声明。

AsamWatermarkProps 公开类型视图

import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamWatermarkProps, AsamWatermarkFontType, AsamWatermarkExpose } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamWatermarkProps
type PublicContract = {
	readonly "zIndex"?: number | undefined;
	readonly "rotate"?: number | undefined;
	readonly "width"?: number | undefined;
	readonly "height"?: number | undefined;
	readonly "image"?: string | undefined;
	readonly "content"?: string | string[] | undefined;
	readonly "font"?: AsamWatermarkFontType | undefined;
	readonly "gap"?: [number, number] | undefined;
	readonly "offset"?: [number, number] | undefined;
	"key"?: PropertyKey | undefined;
	"ref"?: VNodeRef | undefined;
	"ref_for"?: boolean | undefined;
	"ref_key"?: string | undefined;
	"onVnodeBeforeMount"?: (AsamWatermarkProps)["onVnodeBeforeMount"];
	"onVnodeMounted"?: (AsamWatermarkProps)["onVnodeMounted"];
	"onVnodeBeforeUpdate"?: (AsamWatermarkProps)["onVnodeBeforeUpdate"];
	"onVnodeUpdated"?: (AsamWatermarkProps)["onVnodeUpdated"];
	"onVnodeBeforeUnmount"?: (AsamWatermarkProps)["onVnodeBeforeUnmount"];
	"onVnodeUnmounted"?: (AsamWatermarkProps)["onVnodeUnmounted"];
	"class"?: unknown;
	"style"?: unknown;
};

完整的上游实例，包含全部公开方法与响应式状态。

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$slots`

必填：是；声明来源：依赖声明。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: string, ...args: any[]): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

`$forceUpdate`

必填：是；声明来源：依赖声明。

$forceUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$nextTick`

必填：是；声明来源：依赖声明。

$nextTick 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): Promise<void>

事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$watch`

必填：是；声明来源：依赖声明。

$watch 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamWatermarkExpose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`content`

必填：是；声明来源：上游声明。

`zIndex`

必填：是；声明来源：上游声明。

`gap`

必填：是；声明来源：上游声明。

`rotate`

必填：是；声明来源：上游声明。

`offset`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`width`

必填：否；声明来源：上游声明。

`height`

必填：否；声明来源：上游声明。

`image`

必填：否；声明来源：上游声明。

`font`

必填：否；声明来源：上游声明。

font 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

font.color: string | undefined — 上游声明
字体颜色
固定上游文档默认：rgba(0,0,0,.15)（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontSize: string | number | undefined — 上游声明
字体大小
固定上游文档默认：16（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontWeight: number | "normal" | "bold" | "bolder" | "lighter" | undefined — 上游声明
字重
固定上游文档默认：normal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："normal" / "bold" / "bolder" / "lighter"
font.fontStyle: "none" | "normal" | "italic" | "oblique" | undefined — 上游声明
字体样式
固定上游文档默认：normal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："none" / "normal" / "italic" / "oblique"
font.fontFamily: string | undefined — 上游声明
字体
固定上游文档默认：sans-serif（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontGap: number | undefined — 上游声明
字体间隙
固定上游文档默认：3（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.textAlign: "right" | "left" | "start" | "center" | "end" | undefined — 上游声明
文本对齐
固定上游文档默认：center（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："right" / "left" / "start" / "center" / "end"
font.textBaseline: "top" | "bottom" | "middle" | "alphabetic" | "ideographic" | "hanging" | undefined — 上游声明
文本基线
固定上游文档默认：hanging（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："top" / "bottom" / "middle" / "alphabetic" / "ideographic" / "hanging"

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$route.matched: (NonNullable<AsamWatermarkExpose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamWatermarkExpose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamWatermarkExpose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "params"> — 依赖声明
  从 path 提取并解码后的参数对象。
- $route.redirectedFrom.path: string — 依赖声明
  URL 中经过百分号编码的路径部分。
- $route.redirectedFrom.replace: boolean | undefined — 依赖声明
  替换当前历史记录，而不是添加新记录。
  枚举：false / true
- $route.redirectedFrom.force: boolean | undefined — 依赖声明
  即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
  枚举：false / true
- $route.redirectedFrom.state: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamWatermarkExpose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamWatermarkExpose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$router.options: (NonNullable<AsamWatermarkExpose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"] — 依赖声明
  路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
  - $router.options.history.base: string — 依赖声明
    添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.location: string — 依赖声明
    当前历史记录位置。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.state: (NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.go: (delta: number, triggerListeners?: boolean) => void — 依赖声明
    按指定方向遍历历史记录。
    事件参数：(delta: number, triggerListeners?: boolean | undefined): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.listen: (NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["createHref"] — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamWatermarkExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string
- $router.options.linkActiveClass: string | undefined — 依赖声明
  应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
- $router.options.linkExactActiveClass: string | undefined — 依赖声明
  应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
- $router.options.end: boolean | undefined — 依赖声明
  是否在表达式末尾添加 $，使其匹配到路径结尾。
  声明默认：`true`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.sensitive: boolean | undefined — 依赖声明
  使正则表达式区分大小写。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.strict: boolean | undefined — 依赖声明
  是否禁止路径末尾的斜杠。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
$router.addRoute: (NonNullable<AsamWatermarkExpose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamWatermarkExpose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamWatermarkExpose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamWatermarkExpose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamWatermarkExpose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamWatermarkExpose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamWatermarkExpose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamWatermarkExpose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>
$router.back: () => void — 依赖声明
通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：(): void
$router.forward: () => void — 依赖声明
通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：(): void
$router.go: (delta: number) => void — 依赖声明
通过调用 history.go() 在历史记录中前进或后退。
事件参数：(delta: number): void
$router.beforeEach: (NonNullable<AsamWatermarkExpose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamWatermarkExpose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamWatermarkExpose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamWatermarkExpose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void
$router.isReady: () => Promise<void> — 依赖声明
返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：(): Promise<void>
$router.install: (app: App) => void — 依赖声明
由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：(app: App<any>): void

AsamWatermarkExpose 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamWatermarkExpose, AsamTableColumnExpose, AsamWatermarkProps, AsamWatermarkSlots, AsamWatermarkFontType } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamWatermarkExpose
type PublicContract = {
	"$": AsamWatermarkExpose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamWatermarkProps;
	"$attrs": AsamWatermarkExpose["$attrs"];
	"$refs": AsamWatermarkExpose["$refs"];
	"$slots": AsamWatermarkSlots;
	"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$host": Element | null;
	"$emit": (event: string, ...args: any[]) => void;
	"$el": any;
	"$options": (AsamWatermarkExpose)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamWatermarkExpose)["$nextTick"];
	"$watch": (AsamWatermarkExpose)["$watch"];
	readonly "content": string | string[];
	readonly "zIndex": number;
	readonly "gap": [number, number];
	readonly "rotate": number;
	readonly "offset"?: [number, number] | undefined;
	readonly "width"?: number | undefined;
	readonly "height"?: number | undefined;
	readonly "image"?: string | undefined;
	readonly "font"?: AsamWatermarkFontType | undefined;
	"$route": AsamWatermarkExpose["$route"];
	"$router": AsamWatermarkExpose["$router"];
};

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$slots`

必填：是；声明来源：依赖声明。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: string, ...args: any[]): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

`$forceUpdate`

必填：是；声明来源：依赖声明。

$forceUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$nextTick`

必填：是；声明来源：依赖声明。

$nextTick 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): Promise<void>

事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$watch`

必填：是；声明来源：依赖声明。

$watch 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamWatermarkInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`content`

必填：是；声明来源：上游声明。

`zIndex`

必填：是；声明来源：上游声明。

`gap`

必填：是；声明来源：上游声明。

`rotate`

必填：是；声明来源：上游声明。

`offset`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`width`

必填：否；声明来源：上游声明。

`height`

必填：否；声明来源：上游声明。

`image`

必填：否；声明来源：上游声明。

`font`

必填：否；声明来源：上游声明。

font 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

font.color: string | undefined — 上游声明
字体颜色
固定上游文档默认：rgba(0,0,0,.15)（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontSize: string | number | undefined — 上游声明
字体大小
固定上游文档默认：16（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontWeight: number | "normal" | "bold" | "bolder" | "lighter" | undefined — 上游声明
字重
固定上游文档默认：normal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："normal" / "bold" / "bolder" / "lighter"
font.fontStyle: "none" | "normal" | "italic" | "oblique" | undefined — 上游声明
字体样式
固定上游文档默认：normal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："none" / "normal" / "italic" / "oblique"
font.fontFamily: string | undefined — 上游声明
字体
固定上游文档默认：sans-serif（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontGap: number | undefined — 上游声明
字体间隙
固定上游文档默认：3（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.textAlign: "right" | "left" | "start" | "center" | "end" | undefined — 上游声明
文本对齐
固定上游文档默认：center（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："right" / "left" / "start" / "center" / "end"
font.textBaseline: "top" | "bottom" | "middle" | "alphabetic" | "ideographic" | "hanging" | undefined — 上游声明
文本基线
固定上游文档默认：hanging（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："top" / "bottom" / "middle" / "alphabetic" / "ideographic" / "hanging"

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$route.matched: (NonNullable<AsamWatermarkExpose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamWatermarkExpose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamWatermarkExpose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "params"> — 依赖声明
  从 path 提取并解码后的参数对象。
- $route.redirectedFrom.path: string — 依赖声明
  URL 中经过百分号编码的路径部分。
- $route.redirectedFrom.replace: boolean | undefined — 依赖声明
  替换当前历史记录，而不是添加新记录。
  枚举：false / true
- $route.redirectedFrom.force: boolean | undefined — 依赖声明
  即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
  枚举：false / true
- $route.redirectedFrom.state: PublicMember<NonNullable<(NonNullable<AsamWatermarkExpose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamWatermarkExpose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamWatermarkExpose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$router.options: (NonNullable<AsamWatermarkExpose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"] — 依赖声明
  路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
  - $router.options.history.base: string — 依赖声明
    添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.location: string — 依赖声明
    当前历史记录位置。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.state: (NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.go: (delta: number, triggerListeners?: boolean) => void — 依赖声明
    按指定方向遍历历史记录。
    事件参数：(delta: number, triggerListeners?: boolean | undefined): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.listen: (NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["history"]>)["createHref"] — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamWatermarkExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string
- $router.options.linkActiveClass: string | undefined — 依赖声明
  应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
- $router.options.linkExactActiveClass: string | undefined — 依赖声明
  应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
- $router.options.end: boolean | undefined — 依赖声明
  是否在表达式末尾添加 $，使其匹配到路径结尾。
  声明默认：`true`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.sensitive: boolean | undefined — 依赖声明
  使正则表达式区分大小写。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.strict: boolean | undefined — 依赖声明
  是否禁止路径末尾的斜杠。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
$router.addRoute: (NonNullable<AsamWatermarkExpose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamWatermarkExpose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamWatermarkExpose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamWatermarkExpose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamWatermarkExpose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamWatermarkExpose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamWatermarkExpose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamWatermarkExpose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>
$router.back: () => void — 依赖声明
通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：(): void
$router.forward: () => void — 依赖声明
通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：(): void
$router.go: (delta: number) => void — 依赖声明
通过调用 history.go() 在历史记录中前进或后退。
事件参数：(delta: number): void
$router.beforeEach: (NonNullable<AsamWatermarkExpose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamWatermarkExpose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamWatermarkExpose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamWatermarkExpose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamWatermarkExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void
$router.isReady: () => Promise<void> — 依赖声明
返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：(): Promise<void>
$router.install: (app: App) => void — 依赖声明
由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：(app: App<any>): void

AsamWatermarkInstance 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamWatermarkInstance, AsamWatermarkExpose, AsamTableColumnExpose, AsamWatermarkProps, AsamWatermarkSlots, AsamWatermarkFontType } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamWatermarkInstance
type PublicContract = {
	"$": AsamWatermarkExpose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamWatermarkProps;
	"$attrs": AsamWatermarkExpose["$attrs"];
	"$refs": AsamWatermarkExpose["$refs"];
	"$slots": AsamWatermarkSlots;
	"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$host": Element | null;
	"$emit": (event: string, ...args: any[]) => void;
	"$el": any;
	"$options": (AsamWatermarkInstance)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamWatermarkInstance)["$nextTick"];
	"$watch": (AsamWatermarkInstance)["$watch"];
	readonly "content": string | string[];
	readonly "zIndex": number;
	readonly "gap": [number, number];
	readonly "rotate": number;
	readonly "offset"?: [number, number] | undefined;
	readonly "width"?: number | undefined;
	readonly "height"?: number | undefined;
	readonly "image"?: string | undefined;
	readonly "font"?: AsamWatermarkFontType | undefined;
	"$route": AsamWatermarkExpose["$route"];
	"$router": AsamWatermarkExpose["$router"];
};

作用域插槽保留上游实例契约。

参数与事件说明

`default`

必填：否；声明来源：上游声明。

default 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: AsamTableColumnExpose): any

AsamWatermarkSlots 公开类型视图

import type { AsamWatermarkSlots, AsamWatermarkExpose, AsamTableColumnExpose } from '@asam-ui/ui';

// AsamWatermarkSlots
type PublicContract = {
	"default"?: (AsamWatermarkSlots)["default"];
	readonly [key: string]: import("vue").Slot<any> | undefined;
};

参数与事件说明

`color`

必填：否；声明来源：上游声明。

`fontSize`

必填：否；声明来源：上游声明。

`fontWeight`

必填：否；声明来源：上游声明。

fontWeight 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："normal" / "bold" / "bolder" / "lighter"

`fontStyle`

必填：否；声明来源：上游声明。

fontStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："none" / "normal" / "italic" / "oblique"

`fontFamily`

必填：否；声明来源：上游声明。

`fontGap`

必填：否；声明来源：上游声明。

`textAlign`

必填：否；声明来源：上游声明。

textAlign 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："right" / "left" / "start" / "center" / "end"

`textBaseline`

必填：否；声明来源：上游声明。

textBaseline 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："top" / "bottom" / "middle" / "alphabetic" / "ideographic" / "hanging"

AsamWatermarkFontType 公开类型视图

import type { AsamWatermarkFontType, AsamWatermarkProps } from '@asam-ui/ui';

// AsamWatermarkFontType
type PublicContract = {
	"color"?: string | undefined;
	"fontSize"?: string | number | undefined;
	"fontWeight"?: number | "normal" | "bold" | "bolder" | "lighter" | undefined;
	"fontStyle"?: "none" | "normal" | "italic" | "oblique" | undefined;
	"fontFamily"?: string | undefined;
	"fontGap"?: number | undefined;
	"textAlign"?: "right" | "left" | "start" | "center" | "end" | undefined;
	"textBaseline"?: "top" | "bottom" | "middle" | "alphabetic" | "ideographic" | "hanging" | undefined;
};

参数与事件说明

`zIndex`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：9（2.14.7；源码事实，未作为 ASAM 运行实测）

`offset`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`content`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：原始表达式见机器资料（2.14.7；源码事实，未作为 ASAM 运行实测）

`width`

必填：否；声明来源：上游声明。

`height`

必填：否；声明来源：上游声明。

`image`

必填：否；声明来源：上游声明。

`rotate`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：-22（2.14.7；源码事实，未作为 ASAM 运行实测）

`font`

必填：否；声明来源：上游声明。

font 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

font.color: string | undefined — 上游声明
字体颜色
固定上游文档默认：rgba(0,0,0,.15)（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontSize: string | number | undefined — 上游声明
字体大小
固定上游文档默认：16（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontWeight: number | "normal" | "bold" | "bolder" | "lighter" | undefined — 上游声明
字重
固定上游文档默认：normal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："normal" / "bold" / "bolder" / "lighter"
font.fontStyle: "none" | "normal" | "italic" | "oblique" | undefined — 上游声明
字体样式
固定上游文档默认：normal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："none" / "normal" / "italic" / "oblique"
font.fontFamily: string | undefined — 上游声明
字体
固定上游文档默认：sans-serif（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.fontGap: number | undefined — 上游声明
字体间隙
固定上游文档默认：3（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
font.textAlign: "right" | "left" | "start" | "center" | "end" | undefined — 上游声明
文本对齐
固定上游文档默认：center（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："right" / "left" / "start" / "center" / "end"
font.textBaseline: "top" | "bottom" | "middle" | "alphabetic" | "ideographic" | "hanging" | undefined — 上游声明
文本基线
固定上游文档默认：hanging（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："top" / "bottom" / "middle" / "alphabetic" / "ideographic" / "hanging"

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`gap`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码工厂（未执行）：() => [100, 100]（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamWatermarkPropsPublic 公开类型视图

import type { AsamWatermarkPropsPublic, AsamWatermarkProps, AsamWatermarkFontType } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamWatermarkPropsPublic
type PublicContract = {
	readonly "zIndex"?: number | undefined;
	readonly "offset"?: [number, number] | undefined;
	readonly "content"?: (AsamWatermarkPropsPublic)["content"];
	readonly "width"?: number | undefined;
	readonly "height"?: number | undefined;
	readonly "image"?: string | undefined;
	readonly "rotate"?: number | undefined;
	readonly "font"?: AsamWatermarkFontType | undefined;
	readonly "gap"?: [number, number] | undefined;
};

水印 AsamWatermark

使用场景 ​

基础用法与状态 ​

基础用法与状态

使用约定 ​

完整使用场景 ​

基础用法 ​

基础用法

多行水印 ​

多行水印

图片水印 ​

图片水印

自定义配置 ​

自定义配置

API

属性 AsamWatermarkProps

实例方法与状态 AsamWatermarkExpose

类型 AsamWatermarkInstance

插槽 AsamWatermarkSlots

类型 AsamWatermarkFontType

类型 AsamWatermarkPropsPublic

关联组件

参数与事件说明

zIndex

默认值与来源

rotate

默认值与来源

width

默认值与来源

height

默认值与来源

image

默认值与来源

content

默认值与来源

font

默认值与来源

gap

默认值与来源

offset

默认值与来源

key

ref

ref_for

ref_key

onVnodeBeforeMount

onVnodeMounted

onVnodeBeforeUpdate

onVnodeUpdated

onVnodeBeforeUnmount

onVnodeUnmounted

class

style

参数与事件说明

$

$data

$props

$attrs

$refs

$slots

$root

$parent

$host

$emit

$el

$options

$forceUpdate

$nextTick

$watch

content

zIndex

gap

rotate

offset

默认值与来源

width

height

image

font

默认值与来源

使用场景

基础用法与状态

使用约定

完整使用场景

基础用法

多行水印

图片水印

自定义配置

属性 `AsamWatermarkProps`

实例方法与状态 `AsamWatermarkExpose`

类型 `AsamWatermarkInstance`

插槽 `AsamWatermarkSlots`

类型 `AsamWatermarkFontType`

类型 `AsamWatermarkPropsPublic`

`zIndex`

`rotate`

`width`

`height`

`image`

`content`

`font`

`gap`

`offset`

`key`

`ref`

`ref_for`

`ref_key`

`onVnodeBeforeMount`

`onVnodeMounted`

`onVnodeBeforeUpdate`

`onVnodeUpdated`

`onVnodeBeforeUnmount`

`onVnodeUnmounted`

`class`

`style`

`$`

`$data`

`$props`

`$attrs`

`$refs`

`$slots`

`$root`

`$parent`

`$host`

`$emit`

`$el`

`$options`

`$forceUpdate`

`$nextTick`

`$watch`

`content`

`zIndex`

`gap`

`rotate`

`offset`

`width`

`height`

`image`

`font`

`$route`

`$router`

`$`

`$data`

`$props`

`$attrs`

`$refs`

`$slots`

`$root`

`$parent`

`$host`

`$emit`

`$el`

`$options`

`$forceUpdate`

`$nextTick`

`$watch`

`content`

`zIndex`

`gap`

`rotate`