40 lines
6.8 KiB
JSON
40 lines
6.8 KiB
JSON
{
|
|
"slug": "rangequickpicker",
|
|
"curated": true,
|
|
"mode": "single",
|
|
"examples": [
|
|
{
|
|
"id": "rangequickpicker-ex-1",
|
|
"title": "基础用法",
|
|
"titleSrc": "",
|
|
"desc": "",
|
|
"html": "<div class=\"kole-page\">\n <h2 class=\"kole-h2\">RangeQuickPicker 日期范围快捷选择</h2>\n <p class=\"kole-desc\">内置快捷选项（今天、近7天、本月等），也支持自定义起止日期。</p>\n <div class=\"kole-demo\">\n <div class=\"kole-demo__title\">报表时间筛选</div>\n <div class=\"kole-range\" id=\"range\">\n <div class=\"kole-range-trigger\" id=\"trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"kole-range-placeholder\" id=\"label\" role=\"button\" tabindex=\"0\">请选择时间范围</span>\n </div>\n <div class=\"kole-range-pop\" id=\"pop\" style=\"display:none\">\n <div class=\"kole-range-presets\" id=\"presets\"></div>\n <div class=\"kole-range-custom\">\n <input id=\"start\" type=\"date\" />\n <span class=\"kole-range-tilde\">~</span>\n <input id=\"end\" type=\"date\" />\n </div>\n <div class=\"kole-range-actions\">\n <button class=\"kole-range-cancel\" id=\"cancel\">取消</button>\n <button class=\"kole-range-ok\" id=\"ok\">确定</button>\n </div>\n </div>\n </div>\n <p class=\"kole-code-tip\" id=\"out\"></p>\n </div>\n</div>",
|
|
"preview": {
|
|
"show": [
|
|
[
|
|
0
|
|
]
|
|
],
|
|
"hide": [],
|
|
"mode": "single"
|
|
},
|
|
"previewSafe": true,
|
|
"previewUnsafeReasons": [],
|
|
"source": "curated",
|
|
"code": {
|
|
"html": "<h2>RangeQuickPicker 日期范围快捷选择</h2>\n<p>内置快捷选项（今天、近7天、本月等），也支持自定义起止日期。</p>\n<div>报表时间筛选</div>\n<div class=\"kole-range\">\n <div class=\"kole-range-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"kole-range-placeholder\" role=\"button\" tabindex=\"0\">请选择时间范围</span>\n </div>\n <div class=\"kole-range-pop\" style=\"display:none\">\n <div class=\"kole-range-presets\"></div>\n <div class=\"kole-range-custom\">\n <input type=\"date\" />\n <span class=\"kole-range-tilde\">~</span>\n <input type=\"date\" />\n </div>\n <div class=\"kole-range-actions\">\n <button class=\"kole-range-cancel\">取消</button>\n <button class=\"kole-range-ok\">确定</button>\n </div>\n </div>\n</div>\n<p></p>",
|
|
"jsx": "import { useState } from 'react';\nimport { KoleRangeQuickPicker } from 'kole-ui/react';\n\nconst presets = [\n { label: '今天', days: 0 },\n { label: '昨天', days: -1, len: 1 },\n { label: '近7天', days: -6 },\n { label: '近30天', days: -29 },\n { label: '本月', month: 'this' },\n { label: '上月', month: 'last' },\n { label: '本年', year: 'this' }\n];\n\nexport default function Demo() {\n const [range, setRange] = useState({ start: '', end: '' });\n return <KoleRangeQuickPicker presets={presets} modelValue={range} onChange={setRange} />;\n}",
|
|
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleRangeQuickPicker } from 'kole-ui/vue3';\n\nconst presets = [\n { label: '今天', days: 0 },\n { label: '昨天', days: -1, len: 1 },\n { label: '近7天', days: -6 },\n { label: '近30天', days: -29 },\n { label: '本月', month: 'this' },\n { label: '上月', month: 'last' },\n { label: '本年', year: 'this' }\n];\nconst range = ref({ start: '', end: '' });\n</script>\n\n<template>\n <KoleRangeQuickPicker :presets=\"presets\" v-model=\"range\" />\n</template>",
|
|
"vue2": "<template>\n <KoleRangeQuickPicker :presets=\"presets\" :model-value=\"range\" @update:model-value=\"range = $event\" />\n</template>\n\n<script>\nimport { KoleRangeQuickPicker } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRangeQuickPicker },\n data() {\n return {\n presets: [\n { label: '今天', days: 0 },\n { label: '昨天', days: -1, len: 1 },\n { label: '近7天', days: -6 },\n { label: '近30天', days: -29 },\n { label: '本月', month: 'this' },\n { label: '上月', month: 'last' },\n { label: '本年', year: 'this' }\n ],\n range: { start: '', end: '' }\n };\n }\n};\n</script>",
|
|
"tsx": "import { useState } from 'react';\nimport { KoleRangeQuickPicker } from 'kole-ui/react';\n\nconst presets = [\n { label: '今天', days: 0 },\n { label: '昨天', days: -1, len: 1 },\n { label: '近7天', days: -6 },\n { label: '近30天', days: -29 },\n { label: '本月', month: 'this' },\n { label: '上月', month: 'last' },\n { label: '本年', year: 'this' }\n];\n\nexport default function Demo(): JSX.Element {\n const [range, setRange] = useState({ start: '', end: '' });\n return <KoleRangeQuickPicker presets={presets} modelValue={range} onChange={setRange} />;\n}",
|
|
"vue3ts": "<template>\n\n <KoleRangeQuickPicker :presets=\"presets\" v-model=\"range\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRangeQuickPicker } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\nconst presets = [\n { label: '今天', days: 0 },\n { label: '昨天', days: -1, len: 1 },\n { label: '近7天', days: -6 },\n { label: '近30天', days: -29 },\n { label: '本月', month: 'this' },\n { label: '上月', month: 'last' },\n { label: '本年', year: 'this' }\n];\nconst range = ref({ start: '', end: '' });\n</script>",
|
|
"vue2ts": "<template>\n\n <KoleRangeQuickPicker :presets=\"presets\" :model-value=\"range\" @update:model-value=\"range = $event\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRangeQuickPicker } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleRangeQuickPicker },\n data(): Record<string, unknown> {\n return {\n presets: [\n { label: '今天', days: 0 },\n { label: '昨天', days: -1, len: 1 },\n { label: '近7天', days: -6 },\n { label: '近30天', days: -29 },\n { label: '本月', month: 'this' },\n { label: '上月', month: 'last' },\n { label: '本年', year: 'this' }\n ],\n range: { start: '', end: '' }\n };\n }\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"依据 frameworks/RangeQuickPicker.html 第 39-47 行 PRESETS 的 7 条内置快捷项（label + days/len/month/year）与第 19 行触发器的「请选择时间范围」占位、第 68 行 cur = { start: \"\", end: \"\" } 的初值。",
|
|
"prop 名见 frameworks/RangeQuickPicker.jsx 第 33 行参数表（modelValue / presets / onChange）与 frameworks/RangeQuickPicker.vue3.vue 第 46-60 行 defineProps。Vue2 端（RangeQuickPicker.vue2.vue 第 55-69、79 行）prop 为 modelValue、只 emit update:modelValue，未声明 model，故写 :model-value + @update:model-value 而非 v-model。"
|
|
]
|
|
}
|
|
]
|
|
}
|