40 lines
4.2 KiB
JSON
40 lines
4.2 KiB
JSON
{
|
|
"slug": "watermark",
|
|
"curated": true,
|
|
"mode": "single",
|
|
"examples": [
|
|
{
|
|
"id": "watermark-ex-1",
|
|
"title": "基础用法",
|
|
"titleSrc": "",
|
|
"desc": "",
|
|
"html": "<div class=\"kole-box\">\n <div class=\"kole-watermark\" id=\"wm\"></div>\n <div class=\"kole-watermark is-fullscreen\" id=\"wmFull\" title=\"全屏水印演示\"></div>\n <h3 style=\"position:relative;color:var(--color-text-title)\">机密文档</h3>\n <p style=\"position:relative;color:var(--color-text-body)\">该区域内容受水印保护，请勿外传。</p>\n</div>",
|
|
"preview": {
|
|
"show": [
|
|
[
|
|
0
|
|
]
|
|
],
|
|
"hide": [],
|
|
"mode": "single"
|
|
},
|
|
"previewSafe": true,
|
|
"previewUnsafeReasons": [],
|
|
"source": "curated",
|
|
"code": {
|
|
"html": "<div class=\"kole-watermark\"></div>\n<div class=\"kole-watermark is-fullscreen\" id=\"wmFull\" title=\"全屏水印演示\"></div>\n<h3 style=\"position:relative;color:var(--color-text-title)\">机密文档</h3>\n<p style=\"position:relative;color:var(--color-text-body)\">该区域内容受水印保护，请勿外传。</p>",
|
|
"jsx": "import { KoleWatermark } from 'kole-ui/react';\n\n<>\n {/* 局部水印：贴合宿主容器（覆盖区域内的内容） */}\n <KoleWatermark text=\"Kole UI\" color=\"rgba(0,0,0,0.10)\" fontSize={14} rotate={-22} gap={160} />\n {/* 全屏水印：铺满整页 */}\n <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n</>",
|
|
"vue3": "<template>\n <div style=\"position: relative; overflow: hidden\">\n <KoleWatermark\n text=\"Kole UI\"\n color=\"rgba(0,0,0,0.10)\"\n :font-size=\"14\"\n :rotate=\"-22\"\n :gap=\"160\"\n />\n <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n </div>\n</template>\n\n<script setup>\nimport { KoleWatermark } from 'kole-ui/vue3';\n</script>",
|
|
"vue2": "<template>\n <div style=\"position: relative; overflow: hidden\">\n <KoleWatermark\n text=\"Kole UI\"\n color=\"rgba(0,0,0,0.10)\"\n :font-size=\"14\"\n :rotate=\"-22\"\n :gap=\"160\"\n />\n <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n </div>\n</template>\n\n<script>\nimport { KoleWatermark } from 'kole-ui/vue2';\nexport default { components: { KoleWatermark } };\n</script>",
|
|
"tsx": "import { KoleWatermark } from 'kole-ui/react';\n\nexport default function KoleWatermarkDemo(): JSX.Element {\n return (\n <>\n {/* 局部水印：贴合宿主容器（覆盖区域内的内容） */}\n <KoleWatermark text=\"Kole UI\" color=\"rgba(0,0,0,0.10)\" fontSize={14} rotate={-22} gap={160} />\n {/* 全屏水印：铺满整页 */}\n <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n </>\n );\n}",
|
|
"vue3ts": "<template>\n\n <div style=\"position: relative; overflow: hidden\">\n <KoleWatermark\n text=\"Kole UI\"\n color=\"rgba(0,0,0,0.10)\"\n :font-size=\"14\"\n :rotate=\"-22\"\n :gap=\"160\"\n />\n <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleWatermark } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\n\n</script>",
|
|
"vue2ts": "<template>\n\n <div style=\"position: relative; overflow: hidden\">\n <KoleWatermark\n text=\"Kole UI\"\n color=\"rgba(0,0,0,0.10)\"\n :font-size=\"14\"\n :rotate=\"-22\"\n :gap=\"160\"\n />\n <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleWatermark } from 'kole-ui/vue2';\n\nexport default { components: { KoleWatermark },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"依据 frameworks/Watermark.html 第 26 行 buildWatermark(\"Kole UI\", \"rgba(0,0,0,0.10)\", 14, -22, 160) 的五个实参，逐项对应组件的 text / color / fontSize / rotate / gap；第 14 行第二个 .kole-watermark 带 is-fullscreen 类，对应 fullscreen。",
|
|
"prop 名与默认值见 frameworks/Watermark.jsx 第 4-6 行参数表与 frameworks/Watermark.vue3.vue 第 7-14 行 defineProps；覆盖范围 page|area 见 site/details/watermark.json 的 contract.dims。"
|
|
]
|
|
}
|
|
]
|
|
}
|