37 lines
3.5 KiB
JSON
37 lines
3.5 KiB
JSON
{
|
||
"curated": true,
|
||
"slug": "qrcode",
|
||
"mode": "single",
|
||
"examples": [
|
||
{
|
||
"id": "qrcode-ex-1",
|
||
"title": "基础用法",
|
||
"titleSrc": "",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-panel\">\n <div class=\"kole-qrcode\" id=\"app\" role=\"img\"></div>\n <div style=\"margin-top:12px\">\n <input id=\"val\" style=\"width:200px;border:1px solid var(--color-border);border-radius:6px;padding:6px 8px;\" value=\"https://kole.admin\" />\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0
|
||
]
|
||
],
|
||
"hide": [],
|
||
"mode": "single"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-qrcode\" role=\"img\"></div>\n<div style=\"margin-top:12px\">\n <input style=\"width:200px;border:1px solid var(--color-border);border-radius:6px;padding:6px 8px;\" value=\"https://kole.admin\" />\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleQRCode } from 'kole-ui/react';\n\nexport default function Demo() {\n const [value, setValue] = useState('https://kole.admin');\n\n return (\n <>\n <KoleQRCode value={value} size={200} color=\"#1F2329\" showText />\n <input value={value} placeholder=\"输入二维码内容\" onChange={(e) => setValue(e.target.value)} />\n </>\n );\n}",
|
||
"vue3": "<template>\n <KoleQRCode :value=\"value\" :size=\"200\" color=\"#1F2329\" :show-text=\"true\" />\n <input v-model=\"value\" placeholder=\"输入二维码内容\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleQRCode } from 'kole-ui/vue3';\n\nconst value = ref('https://kole.admin');\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleQRCode :value=\"value\" :size=\"200\" color=\"#1F2329\" :show-text=\"true\" />\n <input v-model=\"value\" placeholder=\"输入二维码内容\" />\n </div>\n</template>\n\n<script>\nimport { KoleQRCode } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleQRCode },\n data() {\n return { value: 'https://kole.admin' };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleQRCode } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [value, setValue] = useState<string>('https://kole.admin');\n\n return (\n <>\n <KoleQRCode value={value} size={200} color=\"#1F2329\" showText />\n <input value={value} placeholder=\"输入二维码内容\" onChange={(e) => setValue(e.target.value)} />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleQRCode :value=\"value\" :size=\"200\" color=\"#1F2329\" :show-text=\"true\" />\n <input v-model=\"value\" placeholder=\"输入二维码内容\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleQRCode } from 'kole-ui/vue3';\n\nconst value = ref<string>('https://kole.admin');\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleQRCode :value=\"value\" :size=\"200\" color=\"#1F2329\" :show-text=\"true\" />\n <input v-model=\"value\" placeholder=\"输入二维码内容\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleQRCode } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleQRCode },\n data(): Record<string, unknown> {\n return { value: 'https://kole.admin' };\n }\n};\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/QRCode.html:13 的 kole-qrcode 与 :14 输入框初值 value=\"https://kole.admin\"（:38-45 随输入重绘）；size=200、color='#1F2329'、showText 对齐 frameworks/QRCode.jsx 的参数默认值，size 亦见 site/details/qrcode.json contract.dims.size"
|
||
}
|
||
]
|
||
}
|