86 lines
5.0 KiB
JSON
86 lines
5.0 KiB
JSON
{
|
||
"slug": "watermark",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 水印：把 text 与字号、旋转角、间距拼成 SVG 的 data URI 当背景平铺，组件本身不渲染可见内容。",
|
||
"usage": [
|
||
"水印是算出来的背景图：bg 计算属性把参数拼成 <svg> 字符串，encodeURIComponent 后包成 url(\"data:image/svg+xml;utf8,...\") 赋给 :style 的 backgroundImage（frameworks/Watermark.vue3.vue:2,16-21）。",
|
||
"text 默认 'Kole UI'、color 默认 'rgba(0,0,0,0.10)'、fontSize 默认 14、rotate 默认 -22、gap 默认 160，六个 prop 都有默认值，不传也能出图（frameworks/Watermark.vue3.vue:8-13）。",
|
||
"gap 同时决定 SVG 的 width 与 height，也就是每格平铺的间距；配合 .kole-watermark 的 background-repeat: repeat 铺满容器（frameworks/Watermark.vue3.vue:17 及 Watermark.css:3）。",
|
||
"rotate 传给 SVG 的 transform=\"rotate(θ 0 y)\"，绕文字左下角旋转，负值即常见的上斜水印（frameworks/Watermark.vue3.vue:19）。",
|
||
"fullscreen 为真时根节点加 is-fullscreen，样式把它从 position:absolute 换成 fixed，脱离父级定位直接覆盖全屏（frameworks/Watermark.vue3.vue:2 及 Watermark.css:3-4）。"
|
||
],
|
||
"bestPractices": [
|
||
"非全屏模式根节点是 position:absolute inset:0，父容器必须自己有定位与高度，否则水印要么撑不开要么跑出容器（Watermark.css:3）。",
|
||
"组件自身 pointer-events: none 且 user-select: none：不会拦截点击、水印文字也选不中，所以叠在内容上不需要额外处理（Watermark.css:3）。",
|
||
"text 直接拼进 SVG 字符串，含 & 、< 等字符会破坏 SVG 结构；要在水印里带用户名之类动态值时先自行转义（frameworks/Watermark.vue3.vue:17-19）。",
|
||
"颜色是纯文本属性没有校验，调浅（如 rgba(0,0,0,0.10)）是保证可读性的唯一手段，取值别越过正文对比度底线（frameworks/Watermark.vue3.vue:9）。",
|
||
"改 fontSize 时文字基线会一起上移：y 取 props.fontSize + 6，字号与位置同步变化，不需要另调偏移（frameworks/Watermark.vue3.vue:18）。"
|
||
],
|
||
"a11y": [
|
||
"水印是背景图（backgroundImage）而不是真实文本，读屏器完全读不到 text 内容，不能靠它传达有效信息（frameworks/Watermark.vue3.vue:2）。",
|
||
"根节点是空 <div> 且无 role、无 aria-hidden：对辅助技术它既无名也无语义，装饰意图没有被显式声明（frameworks/Watermark.vue3.vue:2）。",
|
||
"水印压在内容之上（z-index: 1）会同时降低正文对比度，深色文字加高透明度覆盖是更稳妥的组合（Watermark.css:3）。",
|
||
"pointer-events: none 保证了水印不挡操作，键盘用户也不会因它多出一个焦点停靠点（Watermark.css:3）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 3 端载体是 6 个 props（text / color / fontSize / rotate / gap / fullscreen），无 emit、无插槽；输出只有一个 div，全部渲染结果由 bg 计算属性生成的 data URI 承担。",
|
||
"table": [
|
||
{
|
||
"name": "color",
|
||
"type": "String",
|
||
"desc": "颜色（契约：默认文字颜色 #BFBFBF，旋转 -22°，间距 100px）（frameworks/Watermark.vue3.vue:9）"
|
||
},
|
||
{
|
||
"name": "fontSize",
|
||
"type": "Number",
|
||
"desc": "字号（frameworks/Watermark.vue3.vue:10）"
|
||
},
|
||
{
|
||
"name": "fullscreen",
|
||
"type": "Boolean",
|
||
"desc": "是否全屏（frameworks/Watermark.vue3.vue:2）"
|
||
},
|
||
{
|
||
"name": "gap",
|
||
"type": "Number",
|
||
"desc": "间距（frameworks/Watermark.vue3.vue:12）"
|
||
},
|
||
{
|
||
"name": "rotate",
|
||
"type": "Number",
|
||
"desc": "旋转角度（frameworks/Watermark.vue3.vue:11）"
|
||
},
|
||
{
|
||
"name": "text",
|
||
"type": "String",
|
||
"desc": "文本（契约：可配置文字、图片水印）（frameworks/Watermark.vue3.vue:8）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Watermark.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Watermark.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"watermark-ex-1"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Watermark.vue3.vue:7-14 defineProps 六项及各自默认值。",
|
||
"依据 frameworks/Watermark.vue3.vue:16-21 bg 计算属性拼接 SVG、encodeURIComponent 后作为 url() 返回。",
|
||
"依据 frameworks/Watermark.vue3.vue:18 SVG 的 text y 取 fontSize + 6；19 行 rotate 与 fill 使用 color。",
|
||
"依据 frameworks/Watermark.vue3.vue:2 根节点为单个 div，:class 仅含 is-fullscreen。",
|
||
"依据 frameworks/Watermark.css:3 定位、pointer-events、user-select 与 background-repeat；4 行 .is-fullscreen 改 position: fixed。",
|
||
"契约声明的驱动维度（content / coverage）属设计词汇层，未作为 prop 写入本页。"
|
||
]
|
||
}
|