79 lines
3.1 KiB
JSON
79 lines
3.1 KiB
JSON
{
|
|
"slug": "watermark",
|
|
"end": "vue2",
|
|
"curated": true,
|
|
"summary": "Vue 2 水印，把文字拼成 SVG 通过 data URI 作为背景图平铺，支持全屏模式。",
|
|
"usage": [
|
|
"Vue 2 端组件本身不渲染任何可见内容，它是给父容器铺背景的，自身高度由外层或全屏模式决定。",
|
|
"text、fontSize、color、rotate、gap 都会拼进内联 SVG 字符串，再由 encodeURIComponent 转义成 url() 背景。",
|
|
"fullscreen 为 true 时挂上 is-fullscreen 类，铺满视口的样式由 CSS 提供。",
|
|
"gap 同时是 SVG 的宽与高，决定平铺密度。"
|
|
],
|
|
"bestPractices": [
|
|
"文本会直接插入 SVG 字符串，含 & 或 < 等字符时建议先由业务侧过滤，避免生成非法 SVG。",
|
|
"改任一 prop 都会重建整段 data URI，频繁变更（例如绑定动画）会造成不必要的重绘。",
|
|
"水印是背景图，用户无法选中或复制，这符合防泄漏预期但也会影响正常复制需求。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "props",
|
|
"note": "Vue 2 端为 6 个 prop、0 事件、0 插槽；背景图在 computed 里由字符串拼接生成。",
|
|
"table": [
|
|
{
|
|
"name": "text",
|
|
"type": "String，默认 'Kole UI'",
|
|
"desc": "水印文字"
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "String，默认 'rgba(0,0,0,0.10)'",
|
|
"desc": "文字颜色，直接写进 SVG fill"
|
|
},
|
|
{
|
|
"name": "fontSize",
|
|
"type": "Number，默认 14",
|
|
"desc": "字号，同时参与旋转基点计算"
|
|
},
|
|
{
|
|
"name": "rotate",
|
|
"type": "Number，默认 -22",
|
|
"desc": "旋转角度，单位为度"
|
|
},
|
|
{
|
|
"name": "gap",
|
|
"type": "Number，默认 160",
|
|
"desc": "平铺间距，同时是 SVG 画布边长"
|
|
},
|
|
{
|
|
"name": "fullscreen",
|
|
"type": "Boolean，默认 false",
|
|
"desc": "全屏模式，添加 is-fullscreen 类"
|
|
}
|
|
]
|
|
},
|
|
"a11y": [
|
|
"水印是纯 CSS 背景，读屏器完全不会感知，不会干扰正文朗读。",
|
|
"组件自身没有文本内容，若水印承载的必要信息只以水印形式给出，辅助技术用户会丢失这部分信息。",
|
|
"全屏水印覆盖页面时应确认不会拦截点击，本实现只铺背景，不接管事件。"
|
|
],
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/Watermark.vue2.vue",
|
|
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
|
"desc": "Watermark.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
|
},
|
|
{
|
|
"file": "frameworks/Watermark.css",
|
|
"kind": "样式文件",
|
|
"desc": "Watermark.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"watermark-ex-1"
|
|
],
|
|
"notes": [
|
|
"props 声明见 frameworks/Watermark.vue2.vue:8-15，六个 prop 同处一个对象。",
|
|
"SVG 拼接与转义见 frameworks/Watermark.vue2.vue:17-22，返回 url() 背景。",
|
|
"模板只有一行，见 frameworks/Watermark.vue2.vue:2，样式绑定的是 backgroundImage。"
|
|
]
|
|
}
|