37 lines
5.2 KiB
JSON
37 lines
5.2 KiB
JSON
{
|
||
"slug": "numberrangeinput",
|
||
"mode": "single",
|
||
"examples": [
|
||
{
|
||
"id": "numberrangeinput-ex-1",
|
||
"title": "基础用法",
|
||
"titleSrc": "",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-numrange\" id=\"app\" role=\"group\">\n <input id=\"min\" type=\"number\" placeholder=\"最小\" />\n <span class=\"kole-numrange-sep\">—</span>\n <input id=\"max\" type=\"number\" placeholder=\"最大\" />\n <span class=\"kole-numrange-unit\">元</span>\n <span class=\"kole-numrange-msg\" id=\"msg\" role=\"group\"></span>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0
|
||
]
|
||
],
|
||
"hide": [],
|
||
"mode": "single"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-numrange\" role=\"group\">\n <input type=\"number\" placeholder=\"最小\" />\n <span class=\"kole-numrange-sep\">—</span>\n <input type=\"number\" placeholder=\"最大\" />\n <span class=\"kole-numrange-unit\">元</span>\n <span class=\"kole-numrange-msg\" role=\"group\"></span>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleNumberRangeInput } from 'kole-ui/react';\n\nexport default function PriceRange() {\n const [range, setRange] = useState(['', '']);\n return (\n <KoleNumberRangeInput\n value={range}\n onChange={setRange}\n min={0}\n max={10000}\n step={1}\n separator=\"—\"\n unit=\"元\"\n placeholder={['最小', '最大']}\n />\n );\n}",
|
||
"vue3": "<template>\n <KoleNumberRangeInput\n v-model=\"range\"\n :min=\"0\"\n :max=\"10000\"\n :step=\"1\"\n separator=\"—\"\n unit=\"元\"\n :placeholder=\"['最小', '最大']\"\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleNumberRangeInput } from 'kole-ui/vue3';\n\nconst range = ref(['', '']);\n</script>",
|
||
"vue2": "<template>\n <KoleNumberRangeInput\n v-model=\"range\"\n :min=\"0\"\n :max=\"10000\"\n :step=\"1\"\n separator=\"—\"\n unit=\"元\"\n :placeholder=\"['最小', '最大']\"\n />\n</template>\n\n<script>\nimport { KoleNumberRangeInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleNumberRangeInput },\n data() {\n return { range: ['', ''] };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleNumberRangeInput } from 'kole-ui/react';\n\ntype RangeTuple = readonly [string, string];\n\ninterface RangeConfig {\n min: number;\n max: number;\n step: number;\n separator: string;\n unit: string;\n placeholder: RangeTuple;\n}\n\nconst config: RangeConfig = {\n min: 0,\n max: 10000,\n step: 1,\n separator: '—',\n unit: '元',\n placeholder: ['最小', '最大'],\n};\n\nexport default function PriceRange(): JSX.Element {\n const [range, setRange] = useState<RangeTuple>(['', '']);\n return (\n <KoleNumberRangeInput\n value={range}\n onChange={setRange}\n min={config.min}\n max={config.max}\n step={config.step}\n separator={config.separator}\n unit={config.unit}\n placeholder={config.placeholder}\n />\n );\n}",
|
||
"vue3ts": "<template>\n <KoleNumberRangeInput\n v-model=\"range\"\n :min=\"config.min\"\n :max=\"config.max\"\n :step=\"config.step\"\n :separator=\"config.separator\"\n :unit=\"config.unit\"\n :placeholder=\"config.placeholder\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleNumberRangeInput } from 'kole-ui/vue3';\n\ntype RangeTuple = readonly [string, string];\n\ninterface RangeConfig {\n min: number;\n max: number;\n step: number;\n separator: string;\n unit: string;\n placeholder: RangeTuple;\n}\n\nconst config: RangeConfig = {\n min: 0,\n max: 10000,\n step: 1,\n separator: '—',\n unit: '元',\n placeholder: ['最小', '最大'],\n};\n\nconst range = ref<RangeTuple>(['', '']);\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleNumberRangeInput\n v-model=\"range\"\n :min=\"config.min\"\n :max=\"config.max\"\n :step=\"config.step\"\n :separator=\"config.separator\"\n :unit=\"config.unit\"\n :placeholder=\"config.placeholder\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleNumberRangeInput } from 'kole-ui/vue2';\n\ntype RangeTuple = readonly [string, string];\n\ninterface RangeConfig {\n min: number;\n max: number;\n step: number;\n separator: string;\n unit: string;\n placeholder: RangeTuple;\n}\n\nexport default Vue.extend({\n components: { KoleNumberRangeInput },\n data(): { range: RangeTuple; config: RangeConfig } {\n return {\n range: ['', ''],\n config: {\n min: 0,\n max: 10000,\n step: 1,\n separator: '—',\n unit: '元',\n placeholder: ['最小', '最大'],\n },\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/NumberRangeInput.html L25 的 STEP=1 / MIN=0 / MAX=10000、L13-16 两个 input 占位「最小」「最大」与分隔符「—」、单位「元」、L31-33 校验文案；prop 名取自 NumberRangeInput.jsx L4-7（value/step/min/max/separator/unit/placeholder/onChange）与 NumberRangeInput.vue3.vue L15-23（modelValue 等）。"
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|