plain-design 1.0.0-beta.4 → 1.0.0-beta.5

package/src/pages/index/components/normal/DemoTime.tsx

@@ -1,403 +1,403 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Checkbox, Segment, SegmentGroup, TimePicker} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({ value: '12:30:00' });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value}/>
-      <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value}/>
-      {state.value}
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const state = reactive({ start: '12:30:00', end: '18:30:00' });
-
-  return () => (
-    <DemoRow title="时间范围">
-      <TimePicker
-        style={{ width: '400px' }}
-        range
-        v-model:start={state.start} v-model:end={state.end}
-        startPlaceholder="开始时间"
-        endPlaceholder="结束时间"
-      />
-      <TimePicker
-        style={{ width: '400px', display: 'flex', margin: '8px 0' }}
-        range
-        v-model:start={state.start} v-model:end={state.end}
-        startPlaceholder="开始时间"
-        endPlaceholder="结束时间"
-      />
-      {state.start} / {state.end}
-    </DemoRow>
-  );
-});
-
-export const demoSeparate = designPage(() => {
-
-  const state = reactive({ start: '12:30:00', end: '18:30:00' });
-
-  return () => (
-    <DemoRow title="时间范围分开选择">
-      <div>1、分开选择开始时间与结束时间</div>
-      <div>2、可以在input中清空某个时间，非separate模式下不可以清空某个时间，要么都清空，要么清空无效</div>
-      <div>3、选择时间的时候，不会自动补全另一个时间，非separate模式下，选中一个时间，另一个时间没有值得时候会以defaultTime的值作为默认值更新</div>
-      <div>4、这种模式下适用于设置筛选条件，比如对表格中的某个时间类型的字段进行筛选，那么此时可以没有开始时间或者没有结束时间</div>
-      <TimePicker
-        style={{ width: '400px' }}
-        separate
-        v-model:start={state.start} v-model:end={state.end}
-        startPlaceholder="开始时间"
-        endPlaceholder="结束时间"
-      />
-      <TimePicker
-        style={{ width: '400px', display: 'flex', margin: '8px 0' }}
-        separate
-        v-model:start={state.start} v-model:end={state.end}
-        startPlaceholder="开始时间"
-        endPlaceholder="结束时间"
-      />
-      {state.start} / {state.end}
-    </DemoRow>
-  );
-});
-
-
-export const demoFormatter = designPage(() => {
-
-  const state = reactive({
-    value: '121500',
-    start: '121500',
-    end: '183000',
-  });
-
-  return () => (
-    <DemoRow title="格式化值以及显示值">
-      <div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} displayFormat="HH时mm分ss秒" valueFormat="HHmmss"/>
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          displayFormat="HH时mm分ss秒" valueFormat="HHmmss"
-          v-model:start={state.start} v-model:end={state.end}/>
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoFoot = designPage(() => {
-
-  const state = reactive({
-    value: '121500',
-    start: '121500',
-    end: '183000',
-  });
-
-  const setSingleValue = () => {
-    state.value = TimePicker.plainDate.today('HH::mm:ss', 'HHmmss').getValue();
-  };
-  const setRangeValue = () => {
-    state.start = '000000';
-    state.end = '235959';
-  };
-
-  return () => (
-    <DemoRow title="额外内容">
-      <div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} displayFormat="HH时mm分ss秒" valueFormat="HHmmss">
-          {{ foot: () => <><Button label="现在" onClick={setSingleValue} mode="text" size="mini"/></> }}
-        </TimePicker>
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          displayFormat="HH时mm分ss秒" valueFormat="HHmmss"
-          v-model:start={state.start} v-model:end={state.end}>
-          {{ foot: () => <><Button label="今天" onClick={setRangeValue} mode="text" size="mini"/></> }}
-        </TimePicker>
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoDefaultTime = designPage(() => {
-
-  const state = reactive({
-    value: '12:15:00',
-    start: '12:15:00',
-    end: '18:30:00',
-  });
-
-  return () => (
-    <DemoRow title="格式化值以及显示值">
-      <div>
-        <div>defaultTime=12:30:00</div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} defaultTime="12:30:00"/>
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <div>defaultStartTime=12:30:00, defaultEndTime=18:30:0</div>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          defaultStartTime="12:30:00"
-          defaultEndTime="18:30:00"
-          v-model:start={state.start} v-model:end={state.end}/>
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoMaxMin = designPage(() => {
-
-  const state = reactive({
-    value: '12:15:00',
-    start: '12:15:00',
-    end: '18:30:00',
-
-    max: '12:12:12',
-    min: '04:04:04',
-  });
-
-  return () => (
-    <DemoRow title="最大最小时间">
-      <div>max=12:12:12 min=04:04:04</div>
-      <div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} max={state.max} min={state.min}/>
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <div>defaultStartTime=12:30:00, defaultEndTime=18:30:0</div>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          max={state.max} min={state.min}
-          defaultStartTime="12:30:00"
-          defaultEndTime="18:30:00"
-          v-model:start={state.start} v-model:end={state.end}/>
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoView = designPage(() => {
-  const state = reactive({
-    h: null as any,
-    hm: null as any,
-    hms: null as any,
-    ms: null as any,
-  });
-  return () => <>
-    <DemoRow title="视图类型">
-      <h4>时</h4>
-      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.h} valueFormat="HH" displayFormat="HH时" layout={['h']}/>
-      <span>{state.h}</span>
-      <h4>时分</h4>
-      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.hm} valueFormat="HHmm" displayFormat="HH时mm分" layout={['h', 'm']}/>
-      <span>{state.hm}</span>
-      <h4>时分秒</h4>
-      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.hms} valueFormat="HHmmss" displayFormat="HH时mm分ss秒"/>
-      <span>{state.hms}</span>
-      <h4>分秒</h4>
-      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.ms} valueFormat="mmss" displayFormat="mm分ss秒" layout={['m', 's']}/>
-      <span>{state.ms}</span>
-    </DemoRow>
-  </>;
-});
-
-
-export const demoNotEditable = designPage(() => {
-
-  const state = reactive({
-    value: '12:15:00',
-    start: '12:15:00',
-    end: '18:30:00',
-
-    disabled: true,
-    readonly: true,
-  });
-
-  return () => (
-    <DemoRow title="禁用只读">
-      <div>
-        <Checkbox v-model={state.disabled} label="禁用"/>
-        &nbsp;
-        <Checkbox v-model={state.readonly} label="只读"/>
-      </div>
-      <div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} disabled={state.disabled} readonly={state.readonly}/>
-        &nbsp;
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          disabled={state.disabled} readonly={state.readonly}
-          defaultStartTime="12:30:00"
-          defaultEndTime="18:30:00"
-          v-model:start={state.start} v-model:end={state.end}/>
-        &nbsp;
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoPlaceholder = designPage(() => {
-
-  const state = reactive({
-    value: null as any,
-    start: null as any,
-    end: null as any,
-
-  });
-
-  return () => (
-    <DemoRow title="空值占位符">
-      <div>max=12:12:12 min=04:04:04</div>
-      <div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} placeholder="配送时间"/>
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <div>defaultStartTime=12:30:00, defaultEndTime=18:30:0</div>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          startPlaceholder="下单时间"
-          endPlaceholder="送达时间"
-          defaultStartTime="12:30:00"
-          defaultEndTime="18:30:00"
-          v-model:start={state.start} v-model:end={state.end}/>
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoTimePickType = designPage(() => {
-
-  const state = reactive({
-    value: null as any,
-    start: null as any,
-    end: null as any,
-    type: 'single' as 'single' | 'range' | 'separate',
-  });
-
-  return () => (
-    <DemoRow title="类型切换">
-      <div>在使用v-if或者动态组件渲染内容的时候，如果此时刚好复用Time组件，但是类型（single，range，separate）不一致，即使不用设置key，Time依然能够正常工作，并且会销毁不用的popper</div>
-      <SegmentGroup v-model={state.type} style={{ marginBottom: '8px' }}>
-        <Segment label="single" val="single"/>
-        <Segment label="range" val="range"/>
-        <Segment label="separate" val="separate"/>
-      </SegmentGroup>
-      {state.type === 'single' && (
-        <div>
-          <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} placeholder="配送时间"/>
-          &nbsp;{state.value}
-        </div>
-      )}
-      {state.type === 'range' && (
-        <div>
-          <TimePicker
-            range
-            style={{ width: '400px', display: 'inline-flex' }}
-            startPlaceholder="下单时间"
-            endPlaceholder="送达时间"
-            defaultStartTime="12:30:00"
-            defaultEndTime="18:30:00"
-            v-model:start={state.start} v-model:end={state.end}/>
-          &nbsp;{state.start} / {state.end}
-        </div>
-      )}
-      {state.type === 'separate' && (
-        <div>
-          <TimePicker
-            range
-            style={{ width: '400px', display: 'inline-flex' }}
-            startPlaceholder="下单时间"
-            endPlaceholder="送达时间"
-            defaultStartTime="12:30:00"
-            defaultEndTime="18:30:00"
-            separate
-            v-model:start={state.start} v-model:end={state.end}/>
-          &nbsp;{state.start} / {state.end}
-        </div>
-      )}
-    </DemoRow>
-  );
-});
-
-export const demoCustom = designPage(() => {
-  const state = reactive({ val: null as any });
-
-  const custom = (layout: string, value: { hour: number, minute: number, second: number }): number[] => {
-
-    let five = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
-    let ten = [0, 10, 20, 30, 40, 50];
-
-    if (layout === 'h') {
-      return [8, 9, 10, 11, 13, 15, 17];
-    }
-    if (layout === 'm') {
-      if (!value) {
-        return [];
-      }
-      return value.hour > 12 ? ten : five;
-    }
-
-    return [];
-  };
-
-  return () => <>
-    <DemoRow title="自定义可选时间点">
-      <div>时只能选择 8, 9, 10, 11, 13, 15, 17</div>
-      <div>分依据时而定，如果时大于12，则可选项为 0, 10, 20, 30, 40, 50</div>
-      <div>否则可选项为 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55</div>
-      <TimePicker style={{ width: '200px' }} v-model={state.val} valueFormat="HHmm" displayFormat="HH时mm分" layout={['h', 'm']} custom={custom}/>
-      <span>value:{state.val}</span>
-    </DemoRow>
-  </>;
-});
-
-
-export const demoReference = designPage(() => {
-
-  const state = reactive({
-    value: '12:30:00',
-    start: '12:30:00',
-    end: '18:59:59',
-  });
-
-  return () => (
-    <DemoRow title="自定义触发元素">
-      <TimePicker v-model={state.value}>
-        <Button label={state.value || '选择时间'}/>
-      </TimePicker>
-      <TimePicker v-model:start={state.start} v-model:end={state.end} range>
-        <Button label={[state.start, state.end].filter(Boolean).join(',') || '选择时间'}/>
-      </TimePicker>
-    </DemoRow>
-  );
-});
+import {designPage, reactive} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {Button, Checkbox, Segment, SegmentGroup, TimePicker} from "../../../../packages";
+
+export const demo1 = designPage(() => {
+
+  const state = reactive({ value: '12:30:00' });
+
+  return () => (
+    <DemoRow title="基本用法">
+      <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value}/>
+      <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value}/>
+      {state.value}
+    </DemoRow>
+  );
+});
+
+export const demo2 = designPage(() => {
+
+  const state = reactive({ start: '12:30:00', end: '18:30:00' });
+
+  return () => (
+    <DemoRow title="时间范围">
+      <TimePicker
+        style={{ width: '400px' }}
+        range
+        v-model:start={state.start} v-model:end={state.end}
+        startPlaceholder="开始时间"
+        endPlaceholder="结束时间"
+      />
+      <TimePicker
+        style={{ width: '400px', display: 'flex', margin: '8px 0' }}
+        range
+        v-model:start={state.start} v-model:end={state.end}
+        startPlaceholder="开始时间"
+        endPlaceholder="结束时间"
+      />
+      {state.start} / {state.end}
+    </DemoRow>
+  );
+});
+
+export const demoSeparate = designPage(() => {
+
+  const state = reactive({ start: '12:30:00', end: '18:30:00' });
+
+  return () => (
+    <DemoRow title="时间范围分开选择">
+      <div>1、分开选择开始时间与结束时间</div>
+      <div>2、可以在input中清空某个时间，非separate模式下不可以清空某个时间，要么都清空，要么清空无效</div>
+      <div>3、选择时间的时候，不会自动补全另一个时间，非separate模式下，选中一个时间，另一个时间没有值得时候会以defaultTime的值作为默认值更新</div>
+      <div>4、这种模式下适用于设置筛选条件，比如对表格中的某个时间类型的字段进行筛选，那么此时可以没有开始时间或者没有结束时间</div>
+      <TimePicker
+        style={{ width: '400px' }}
+        separate
+        v-model:start={state.start} v-model:end={state.end}
+        startPlaceholder="开始时间"
+        endPlaceholder="结束时间"
+      />
+      <TimePicker
+        style={{ width: '400px', display: 'flex', margin: '8px 0' }}
+        separate
+        v-model:start={state.start} v-model:end={state.end}
+        startPlaceholder="开始时间"
+        endPlaceholder="结束时间"
+      />
+      {state.start} / {state.end}
+    </DemoRow>
+  );
+});
+
+
+export const demoFormatter = designPage(() => {
+
+  const state = reactive({
+    value: '121500',
+    start: '121500',
+    end: '183000',
+  });
+
+  return () => (
+    <DemoRow title="格式化值以及显示值">
+      <div>
+        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} displayFormat="HH时mm分ss秒" valueFormat="HHmmss"/>
+        {state.value}
+      </div>
+      <div style={{ margin: '8px 0' }}>
+        <TimePicker
+          range
+          style={{ width: '400px', display: 'inline-flex' }}
+          displayFormat="HH时mm分ss秒" valueFormat="HHmmss"
+          v-model:start={state.start} v-model:end={state.end}/>
+        {state.start} / {state.end}
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoFoot = designPage(() => {
+
+  const state = reactive({
+    value: '121500',
+    start: '121500',
+    end: '183000',
+  });
+
+  const setSingleValue = () => {
+    state.value = TimePicker.plainDate.today('HH::mm:ss', 'HHmmss').getValue();
+  };
+  const setRangeValue = () => {
+    state.start = '000000';
+    state.end = '235959';
+  };
+
+  return () => (
+    <DemoRow title="额外内容">
+      <div>
+        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} displayFormat="HH时mm分ss秒" valueFormat="HHmmss">
+          {{ foot: () => <><Button label="现在" onClick={setSingleValue} mode="text" size="mini"/></> }}
+        </TimePicker>
+        {state.value}
+      </div>
+      <div style={{ margin: '8px 0' }}>
+        <TimePicker
+          range
+          style={{ width: '400px', display: 'inline-flex' }}
+          displayFormat="HH时mm分ss秒" valueFormat="HHmmss"
+          v-model:start={state.start} v-model:end={state.end}>
+          {{ foot: () => <><Button label="今天" onClick={setRangeValue} mode="text" size="mini"/></> }}
+        </TimePicker>
+        {state.start} / {state.end}
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoDefaultTime = designPage(() => {
+
+  const state = reactive({
+    value: '12:15:00',
+    start: '12:15:00',
+    end: '18:30:00',
+  });
+
+  return () => (
+    <DemoRow title="格式化值以及显示值">
+      <div>
+        <div>defaultTime=12:30:00</div>
+        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} defaultTime="12:30:00"/>
+        {state.value}
+      </div>
+      <div style={{ margin: '8px 0' }}>
+        <div>defaultStartTime=12:30:00, defaultEndTime=18:30:0</div>
+        <TimePicker
+          range
+          style={{ width: '400px', display: 'inline-flex' }}
+          defaultStartTime="12:30:00"
+          defaultEndTime="18:30:00"
+          v-model:start={state.start} v-model:end={state.end}/>
+        {state.start} / {state.end}
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const demoMaxMin = designPage(() => {
+
+  const state = reactive({
+    value: '12:15:00',
+    start: '12:15:00',
+    end: '18:30:00',
+
+    max: '12:12:12',
+    min: '04:04:04',
+  });
+
+  return () => (
+    <DemoRow title="最大最小时间">
+      <div>max=12:12:12 min=04:04:04</div>
+      <div>
+        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} max={state.max} min={state.min}/>
+        {state.value}
+      </div>
+      <div style={{ margin: '8px 0' }}>
+        <div>defaultStartTime=12:30:00, defaultEndTime=18:30:0</div>
+        <TimePicker
+          range
+          style={{ width: '400px', display: 'inline-flex' }}
+          max={state.max} min={state.min}
+          defaultStartTime="12:30:00"
+          defaultEndTime="18:30:00"
+          v-model:start={state.start} v-model:end={state.end}/>
+        {state.start} / {state.end}
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoView = designPage(() => {
+  const state = reactive({
+    h: null as any,
+    hm: null as any,
+    hms: null as any,
+    ms: null as any,
+  });
+  return () => <>
+    <DemoRow title="视图类型">
+      <h4>时</h4>
+      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.h} valueFormat="HH" displayFormat="HH时" layout={['h']}/>
+      <span>{state.h}</span>
+      <h4>时分</h4>
+      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.hm} valueFormat="HHmm" displayFormat="HH时mm分" layout={['h', 'm']}/>
+      <span>{state.hm}</span>
+      <h4>时分秒</h4>
+      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.hms} valueFormat="HHmmss" displayFormat="HH时mm分ss秒"/>
+      <span>{state.hms}</span>
+      <h4>分秒</h4>
+      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.ms} valueFormat="mmss" displayFormat="mm分ss秒" layout={['m', 's']}/>
+      <span>{state.ms}</span>
+    </DemoRow>
+  </>;
+});
+
+
+export const demoNotEditable = designPage(() => {
+
+  const state = reactive({
+    value: '12:15:00',
+    start: '12:15:00',
+    end: '18:30:00',
+
+    disabled: true,
+    readonly: true,
+  });
+
+  return () => (
+    <DemoRow title="禁用只读">
+      <div>
+        <Checkbox v-model={state.disabled} label="禁用"/>
+        &nbsp;
+        <Checkbox v-model={state.readonly} label="只读"/>
+      </div>
+      <div>
+        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} disabled={state.disabled} readonly={state.readonly}/>
+        &nbsp;
+        {state.value}
+      </div>
+      <div style={{ margin: '8px 0' }}>
+        <TimePicker
+          range
+          style={{ width: '400px', display: 'inline-flex' }}
+          disabled={state.disabled} readonly={state.readonly}
+          defaultStartTime="12:30:00"
+          defaultEndTime="18:30:00"
+          v-model:start={state.start} v-model:end={state.end}/>
+        &nbsp;
+        {state.start} / {state.end}
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const demoPlaceholder = designPage(() => {
+
+  const state = reactive({
+    value: null as any,
+    start: null as any,
+    end: null as any,
+
+  });
+
+  return () => (
+    <DemoRow title="空值占位符">
+      <div>max=12:12:12 min=04:04:04</div>
+      <div>
+        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} placeholder="配送时间"/>
+        {state.value}
+      </div>
+      <div style={{ margin: '8px 0' }}>
+        <div>defaultStartTime=12:30:00, defaultEndTime=18:30:0</div>
+        <TimePicker
+          range
+          style={{ width: '400px', display: 'inline-flex' }}
+          startPlaceholder="下单时间"
+          endPlaceholder="送达时间"
+          defaultStartTime="12:30:00"
+          defaultEndTime="18:30:00"
+          v-model:start={state.start} v-model:end={state.end}/>
+        {state.start} / {state.end}
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const demoTimePickType = designPage(() => {
+
+  const state = reactive({
+    value: null as any,
+    start: null as any,
+    end: null as any,
+    type: 'single' as 'single' | 'range' | 'separate',
+  });
+
+  return () => (
+    <DemoRow title="类型切换">
+      <div>在使用v-if或者动态组件渲染内容的时候，如果此时刚好复用Time组件，但是类型（single，range，separate）不一致，即使不用设置key，Time依然能够正常工作，并且会销毁不用的popper</div>
+      <SegmentGroup v-model={state.type} style={{ marginBottom: '8px' }}>
+        <Segment label="single" val="single"/>
+        <Segment label="range" val="range"/>
+        <Segment label="separate" val="separate"/>
+      </SegmentGroup>
+      {state.type === 'single' && (
+        <div>
+          <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} placeholder="配送时间"/>
+          &nbsp;{state.value}
+        </div>
+      )}
+      {state.type === 'range' && (
+        <div>
+          <TimePicker
+            range
+            style={{ width: '400px', display: 'inline-flex' }}
+            startPlaceholder="下单时间"
+            endPlaceholder="送达时间"
+            defaultStartTime="12:30:00"
+            defaultEndTime="18:30:00"
+            v-model:start={state.start} v-model:end={state.end}/>
+          &nbsp;{state.start} / {state.end}
+        </div>
+      )}
+      {state.type === 'separate' && (
+        <div>
+          <TimePicker
+            range
+            style={{ width: '400px', display: 'inline-flex' }}
+            startPlaceholder="下单时间"
+            endPlaceholder="送达时间"
+            defaultStartTime="12:30:00"
+            defaultEndTime="18:30:00"
+            separate
+            v-model:start={state.start} v-model:end={state.end}/>
+          &nbsp;{state.start} / {state.end}
+        </div>
+      )}
+    </DemoRow>
+  );
+});
+
+export const demoCustom = designPage(() => {
+  const state = reactive({ val: null as any });
+
+  const custom = (layout: string, value: { hour: number, minute: number, second: number }): number[] => {
+
+    let five = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+    let ten = [0, 10, 20, 30, 40, 50];
+
+    if (layout === 'h') {
+      return [8, 9, 10, 11, 13, 15, 17];
+    }
+    if (layout === 'm') {
+      if (!value) {
+        return [];
+      }
+      return value.hour > 12 ? ten : five;
+    }
+
+    return [];
+  };
+
+  return () => <>
+    <DemoRow title="自定义可选时间点">
+      <div>时只能选择 8, 9, 10, 11, 13, 15, 17</div>
+      <div>分依据时而定，如果时大于12，则可选项为 0, 10, 20, 30, 40, 50</div>
+      <div>否则可选项为 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55</div>
+      <TimePicker style={{ width: '200px' }} v-model={state.val} valueFormat="HHmm" displayFormat="HH时mm分" layout={['h', 'm']} custom={custom}/>
+      <span>value:{state.val}</span>
+    </DemoRow>
+  </>;
+});
+
+
+export const demoReference = designPage(() => {
+
+  const state = reactive({
+    value: '12:30:00',
+    start: '12:30:00',
+    end: '18:59:59',
+  });
+
+  return () => (
+    <DemoRow title="自定义触发元素">
+      <TimePicker v-model={state.value}>
+        <Button label={state.value || '选择时间'}/>
+      </TimePicker>
+      <TimePicker v-model:start={state.start} v-model:end={state.end} range>
+        <Button label={[state.start, state.end].filter(Boolean).join(',') || '选择时间'}/>
+      </TimePicker>
+    </DemoRow>
+  );
+});