40 lines
5.3 KiB
JSON
40 lines
5.3 KiB
JSON
{
|
||
"slug": "transfer",
|
||
"curated": true,
|
||
"mode": "single",
|
||
"examples": [
|
||
{
|
||
"id": "transfer-ex-1",
|
||
"title": "基础用法",
|
||
"titleSrc": "",
|
||
"desc": "",
|
||
"html": "<div class=\"demo\">\n <h1>Kole UI · Transfer 组件（纯 H5）</h1>\n <p class=\"sub\">对齐 Transfer 规范：左右两栏、搜索、复选框、已选数量</p>\n <div class=\"demo-block\">\n <div class=\"kole-transfer\" data-transfer></div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0
|
||
]
|
||
],
|
||
"hide": [],
|
||
"mode": "single"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<h1>Kole UI · Transfer 组件（纯 H5）</h1>\n<p>对齐 Transfer 规范：左右两栏、搜索、复选框、已选数量</p>\n<div class=\"kole-transfer\"></div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleTransfer } from 'kole-ui/react';\n\nconst DATA = [\n { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n];\n\nfunction DeptTransfer() {\n const [keys, setKeys] = useState(['1', '2']);\n return (\n <KoleTransfer\n data={DATA}\n value={keys}\n titles={['候选部门', '已选部门']}\n filterable\n onChange={setKeys}\n />\n );\n}",
|
||
"vue3": "<template>\n <KoleTransfer\n v-model=\"keys\"\n :data=\"DATA\"\n :titles=\"['候选部门', '已选部门']\"\n filterable\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTransfer } from 'kole-ui/vue3';\n\nconst keys = ref(['1', '2']);\nconst DATA = [\n { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n];\n</script>",
|
||
"vue2": "<template>\n <KoleTransfer\n v-model=\"keys\"\n :data=\"DATA\"\n :titles=\"['候选部门', '已选部门']\"\n filterable\n />\n</template>\n\n<script>\nimport { KoleTransfer } from 'kole-ui/vue2';\nexport default {\n components: { KoleTransfer },\n data() {\n return {\n keys: ['1', '2'],\n DATA: [\n { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleTransfer } from 'kole-ui/react';\n\nconst DATA = [\n { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n];\n\nfunction DeptTransfer(): JSX.Element {\n const [keys, setKeys] = useState(['1', '2']);\n return (\n <KoleTransfer\n data={DATA}\n value={keys}\n titles={['候选部门', '已选部门']}\n filterable\n onChange={setKeys}\n />\n );\n}\n\nexport default DeptTransfer;",
|
||
"vue3ts": "<template>\n\n <KoleTransfer\n v-model=\"keys\"\n :data=\"DATA\"\n :titles=\"['候选部门', '已选部门']\"\n filterable\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTransfer } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\nconst keys = ref(['1', '2']);\nconst DATA = [\n { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n];\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleTransfer\n v-model=\"keys\"\n :data=\"DATA\"\n :titles=\"['候选部门', '已选部门']\"\n filterable\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTransfer } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleTransfer },\n data(): Record<string, unknown> {\n return {\n keys: ['1', '2'],\n DATA: [\n { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n { key: '7', label: '财务部' }, { key: '8', label: '人事部', disabled: true }\n ]\n };\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Transfer.html 第 29-33 行的 DATA（8 个部门，人事部 disabled）与第 35 行 let selected = [\"1\",\"2\"]：已选初值为研发部/产品部，两侧面板标题取自第 46 / 60 行的「候选部门」「已选部门」。",
|
||
"搜索框由第 47 / 61 行的 input[placeholder=搜索] 提供，对应 filterable（frameworks/Transfer.jsx 第 15 行参数表、frameworks/Transfer.vue3.vue 第 56 行 defineProps）。"
|
||
]
|
||
}
|
||
]
|
||
}
|