Skip to content

docs(time-select): 更新文档，示例更友好 #1328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 11, 2022
Merged

docs(time-select): 更新文档，示例更友好 #1328

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
92aa662
test(switch): test color prop
qinwencheng Aug 24, 2022
0f28136
Merge branch 'DevCloudFE:dev' into dev
qinwencheng Aug 25, 2022
5304644
test(checkbox): 增加对颜色属性的测试
qinwencheng Aug 25, 2022
be6c691
Merge branch 'DevCloudFE:dev' into dev
qinwencheng Aug 30, 2022
548fd40
Merge branch 'DevCloudFE:dev' into dev
qinwencheng Sep 5, 2022
ef9af6e
Merge branch 'DevCloudFE:dev' into dev
qinwencheng Sep 7, 2022
6d2467a
docs(time-select): 更新文档，示例更友好
qinwencheng Sep 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 85 additions & 32 deletions packages/devui-vue/docs/components/time-select/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,11 @@
<div class="mb-0">step</div>
<d-time-select class="mb-2" v-model="time01" step="00:10" />

<div class="mb-0">min-time、max-time</div>
<d-time-select class="mb-2" v-model="time02" min-time="02:20" max-time="18:30" />

<div class="mb-0">min-time、max-time、start、end</div>
<d-time-select class="mb-2" v-model="time03" min-time="09:30" max-time="18:30" start="09:00" end="16:30" />

<div class="mb-0">disabled</div>
<d-time-select class="mb-2" v-model="time04" disabled />
<d-time-select class="mb-2" v-model="time02" disabled />

<div class="mb-0">不可清除</div>
<d-time-select class="mb-2" v-model="time04" :clearable="false" />
<d-time-select class="mb-2" v-model="time03" :clearable="false" />
</div>
</template>

Expand All @@ -39,15 +33,13 @@ export default defineComponent({
setup(props, ctx) {
let time00 = ref('');
let time01 = ref('');
let time02 = ref('03:30');
let time02 = ref('09:30');
let time03 = ref('09:30');
let time04 = ref('09:30');
return {
time00,
time01,
time02,
time03,
time04,
};
},
});
Expand All @@ -62,31 +54,92 @@ export default defineComponent({

:::

### 固定时间范围
### 尺寸

:::demo

```vue
<template>
<div>
<div class="mb-0">lg</div>
<d-time-select class="mb-2" v-model="time05" size="lg" placeholder="间隔为1小时" step="01:00" />

<div class="mb-0">md</div>
<d-time-select class="mb-2" v-model="time05" size="md" placeholder="间隔为30分钟" step="00:30" />

<div class="mb-0">sm</div>
<d-time-select class="mb-2" v-model="time05" size="sm" placeholder="间隔为1分钟" step="00:01" />
</div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';
export default defineComponent({
setup(props, ctx) {
let time00 = ref('');
let time01 = ref('');
let time02 = ref('');
return {
time00,
time01,
time02,
};
},
});
</script>

<style>
.my-10 {
margin: 10px 0px;
}
</style>
```

:::

### 时间段

:::demo

```vue
<template>
<div>
<d-row :gutter="5">
<d-col>
<d-time-select v-model="startTime" />
</d-col>
<d-col>
<d-time-select v-model="endTime" :min-time="startTime" />
</d-col>
</d-row>
<div class="mb-0">min-time、max-time</div>
<d-time-select class="mb-2" v-model="time01" min-time="02:20" max-time="18:30" placeholder="控制时间的可选范围" />

<div class="mb-0">start、end</div>
<d-time-select class="mb-2" v-model="time02" start="09:00" end="18:30" placeholder="控制时间的显示范围" />

<div class="mb-0">min-time、max-time、start、end</div>
<d-time-select class="mb-2" v-model="time03" min-time="09:30" max-time="18:30" start="09:00" end="16:30" />

<div class="mb-0">固定时间范围</div>
<div>
<d-row :gutter="5">
<d-col>
<d-time-select v-model="startTime" />
</d-col>
<d-col>
<d-time-select v-model="endTime" :min-time="startTime" />
</d-col>
</d-row>
</div>
</div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';
export default defineComponent({
setup(props, ctx) {
let time01 = ref('');
let time02 = ref('');
let time03 = ref('09:30');
let startTime = ref('');
let endTime = ref('');
return {
time01,
time02,
time03,
startTime,
endTime,
};
Expand Down Expand Up @@ -148,18 +201,18 @@ export default defineComponent({

### TimeSelect 参数

| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
| ----------- | --------------------------- | ------------ | ---------------- | --------------------- |
| v-model | string | -- | 选中项绑定值 | [基本用法](#基本用法) |
| disabled | boolean | false | 禁用状态 | [基本用法](#基本用法) |
| size | [ITimeSelect](#itimeselect) | md | 输入框尺寸 | -- |
| placeholder | string | '请选择时间' | 占位内容 | [基本用法](#基本用法) |
| min-time | string | '00:00' | 可选，最早时间点 | [基本用法](#基本用法) |
| max-time | string | '24:00' | 可选，最晚时间点 | [基本用法](#基本用法) |
| start | string | '00:00' | 可选，开始时间 | [基本用法](#基本用法) |
| end | string | '24:00' | 可选，结束时间 | [基本用法](#基本用法) |
| step | string | '00:30' | 可选，间隔时间 | [基本用法](#基本用法) |
| clearable | boolean | true | 可选，是否可清除 | [基本用法](#基本用法) |
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
| ----------- | --------------------------- | ------------ | ----------------------------------------- | --------------------- |
| v-model | string | -- | 选中项绑定值 | [基本用法](#基本用法) |
| disabled | boolean | false | 禁用状态 | [基本用法](#基本用法) |
| size | [ITimeSelect](#itimeselect) | md | 输入框尺寸 | [尺寸](#尺寸) |
| placeholder | string | '请选择时间' | 占位内容 | [占位内容](#尺寸) |
| min-time | string | '00:00' | 可选，最早时间点，早于该值的时间段将被禁用 | [时间段](#时间段) |
| max-time | string | '24:00' | 可选，最晚时间点，晚于该值的时间段将被禁用 | [时间段](#时间段) |
| start | string | '00:00' | 可选，开始时间 | [时间段](#时间段) |
| end | string | '24:00' | 可选，结束时间 | [时间段](#时间段) |
| step | string | '00:30' | 可选，间隔时间 | [基本用法](#基本用法) |
| clearable | boolean | true | 可选，是否可清除 | [基本用法](#基本用法) |

### TimeSelect 事件

Expand Down