Skip to content

Commit

Permalink
docs: 预设快捷时间选择示例
Browse files Browse the repository at this point in the history
  • Loading branch information
@liweijie0812
liweijie0812 committed Dec 1, 2023
1 parent 3f14811 commit 9bb1936
Show file tree
Hide file tree
Showing 3 changed files with 190 additions and 0 deletions.
26 changes: 26 additions & 0 deletions src/time-picker/_example/presets.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<t-space direction="vertical">
<t-time-picker v-model="time1" class="demos" :presets="{ 上午十一点: '11:00:00' }" />
<t-time-range-picker
v-model="time2"
class="demos"
clearable
format="HH:mm:ss"
allow-input
:presets="{ 下午: ['13:00:00', '18:00:00'] }"
/>
</t-space>
</template>

<script setup>
import { ref } from 'vue';
const time1 = ref('20:22');
const time2 = ref(['00:00:00', '23:59:59']);
</script>

<style scoped>
.demos {
margin-top: 20px;
}
</style>
162 changes: 162 additions & 0 deletions test/unit/snap/__snapshots__/csr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172749,6 +172749,168 @@ exports[`csr snapshot test > csr test ./src/time-picker/_example/panel.vue 1`] =
<!---->


</div>
`;

exports[`csr snapshot test > csr test ./src/time-picker/_example/presets.vue 1`] = `
<div
class="t-space t-space-vertical"
data-v-501dfc6c=""
style="gap: 16px;"
>


<div
class="t-space-item"
>
<div
class="t-time-picker demos"
data-v-501dfc6c=""
>
<div
class="t-time-picker__group,[object Object]"
>

<div
class="t-input__wrap"
>
<div
class="t-input t-is-readonly t-input--suffix"
>
<!---->
<!---->
<input
class="t-input__inner"
placeholder=""
readonly=""
type="text"
unselectable="on"
/>
<!---->
<!---->
<!---->
<span
class="t-input__suffix t-input__suffix-icon"
>
<svg
class="t-icon t-icon-time"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z"
fill="currentColor"
/>
</svg>
</span>
</div>
<!---->
</div>
<!---->

<!---->
</div>
</div>
</div>
<!---->


<div
class="t-space-item"
>
<div
class="t-time-range-picker demos"
data-v-501dfc6c=""
>
<div
class="t-range-input-popup"
>


<div
class="t-time-range-picker__group t-range-input t-range-input--suffix"
>
<div
class="t-range-input__inner"
>
<!---->
<!---->
<div
class="t-input__wrap t-range-input__inner-left"
>
<div
class="t-input"
>
<!---->
<!---->
<input
class="t-input__inner"
placeholder="选择时间"
type="text"
/>
<!---->
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<div
class="t-range-input__inner-separator"
>
-
</div>
<div
class="t-input__wrap t-range-input__inner-right"
>
<div
class="t-input"
>
<!---->
<!---->
<input
class="t-input__inner"
placeholder="选择时间"
type="text"
/>
<!---->
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
<span
class="t-range-input__suffix t-range-input__suffix-icon"
>
<svg
class="t-icon t-icon-time"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z"
fill="currentColor"
/>
</svg>
</span>
</div>
</div>
<!---->

<!---->

</div>
</div>
</div>
<!---->


</div>
`;

Expand Down
2 changes: 2 additions & 0 deletions test/unit/snap/__snapshots__/ssr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1250,6 +1250,8 @@ exports[`ssr snapshot test > ssr test ./src/time-picker/_example/keyboard.vue 1`

exports[`ssr snapshot test > ssr test ./src/time-picker/_example/panel.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><!--[--><label class=\\"t-radio-button t-is-checked\\" tabindex=\\"0\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" name checked value=\\"single\\" tabindex=\\"-1\\" data-value=\\"&#39;single&#39;\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"><!--[--><!--[-->单独使用面板<!--]--><!--]--></span></label><label class=\\"t-radio-button\\" tabindex=\\"0\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" name value=\\"combine\\" tabindex=\\"-1\\" data-value=\\"&#39;combine&#39;\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"><!--[--><!--[-->组合其他组件使用<!--]--><!--]--></span></label><!--]--><div style=\\"width:0px;height:0px;left:0px;top:0px;\\" class=\\"t-radio-group__bg-block\\"></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-time-picker__panel\\"><div class=\\"t-time-picker__panel-section-body\\"><div class=\\"t-time-picker__panel-body\\" isfocus=\\"false\\" isfooterdisplay=\\"false\\"><div class=\\"t-time-picker__panel-body-active-mask\\"><!--[--><!--]--></div><!--[--><!--]--></div></div><!----></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/time-picker/_example/presets.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\" data-v-501dfc6c><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-time-picker demos\\" data-v-501dfc6c><div class=\\"t-select-input\\"><!--[--><div class=\\"t-input__wrap\\" style=\\"\\"><div class=\\"t-input t-is-readonly t-input--suffix\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder type=\\"text\\" unselectable=\\"on\\" value=\\"20:22\\"><!----><!----><!----><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div><!----></div><!----><!--]--><!----></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-time-range-picker demos\\" data-v-501dfc6c><div class=\\"t-range-input-popup\\"><!--[--><!--[--><div class=\\"t-time-range-picker__group t-range-input t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><!----><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"选择时间\\" type=\\"text\\" value=\\"00:00:00\\"><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\">-</div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"选择时间\\" type=\\"text\\" value=\\"23:59:59\\"><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div></div><!----><!--]--><!----><!--]--></div></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/time-picker/_example/range.vue 1`] = `"<div class=\\"t-time-range-picker demos\\"><div class=\\"t-range-input-popup\\"><!--[--><!--[--><div class=\\"t-time-range-picker__group t-range-input t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><!----><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"选择时间\\" type=\\"text\\" value=\\"00:00:00\\"><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\">-</div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input\\"><!----><!----><input class=\\"t-input__inner\\" placeholder=\\"选择时间\\" type=\\"text\\" value=\\"23:59:59\\"><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div></div><!----><!--]--><!----><!--]--></div></div>"`;

exports[`ssr snapshot test > ssr test ./src/time-picker/_example/show-steps.vue 1`] = `"<div class=\\"t-time-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><!--[--><div class=\\"t-input__wrap\\" style=\\"\\"><div class=\\"t-input t-is-readonly t-input--suffix\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"选择时间\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div><!----></div><!----><!--]--><!----></div></div>"`;
Expand Down

0 comments on commit 9bb1936

Please sign in to comment.