benyuanzhang
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(date-picker): [date-picker] optimize date-picker docs (#1320) 

* docs(date-picker): [date-picker] optimize the width of date editor

* docs(date-picker): [date-picker] optimize api docs
This commit is contained in:
Kagol 2024-01-24 15:54:35 +08:00 committed by GitHub
parent 9ef209ffbd
commit 8e87781f46
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 179 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
View File

@ -1,16 +1,16 @@
<template>
<div>
<p>默认显示清除按钮</p>
<p>默认显示清除按钮：</p>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value"></tiny-date-picker>
</div>
<p>隐藏清除按钮</p>
<p>隐藏清除按钮：</p>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value" :clearable="false"></tiny-date-picker>
</div>
<p>自定义清除图标</p>
<p>自定义清除图标：</p>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value" :clear-icon="IconClose"></tiny-date-picker>
</div>

6
examples/sites/demos/pc/app/date-picker/clear.vue
View File

@ -1,16 +1,16 @@
<template>
<div>
<p>默认显示清除按钮</p>
<p>默认显示清除按钮：</p>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value"></tiny-date-picker>
</div>
<p>隐藏清除按钮</p>
<p>隐藏清除按钮：</p>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value" :clearable="false"></tiny-date-picker>
</div>
<p>自定义清除图标</p>
<p>自定义清除图标：</p>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value" :clear-icon="IconClose"></tiny-date-picker>
</div>

36
examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue
View File

@ -1,9 +1,33 @@
<template>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
<tiny-date-picker v-model="dateTimeValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
<tiny-date-picker v-model="monthValue" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份" range-separator="至"></tiny-date-picker>
<tiny-date-picker v-model="yearValue" type="yearrange" start-placeholder="开始年份" end-placeholder="结束年份" range-separator="至"></tiny-date-picker>
<tiny-date-picker
v-model="value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
range-separator="至"
></tiny-date-picker>
<tiny-date-picker
v-model="dateTimeValue"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
range-separator="至"
></tiny-date-picker>
<tiny-date-picker
v-model="monthValue"
type="monthrange"
start-placeholder="开始月份"
end-placeholder="结束月份"
range-separator="至"
></tiny-date-picker>
<tiny-date-picker
v-model="yearValue"
type="yearrange"
start-placeholder="开始年份"
end-placeholder="结束年份"
range-separator="至"
></tiny-date-picker>
</div>
</template>
@ -21,6 +45,10 @@ const yearValue = ref('')
.demo-date-picker-wrap {
width: 350px;
:deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
width: 350px;
}
& > * {
margin-top: 12px;
}

36
examples/sites/demos/pc/app/date-picker/date-range.vue
View File

@ -1,9 +1,33 @@
<template>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
<tiny-date-picker v-model="dateTimeValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
<tiny-date-picker v-model="monthValue" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份" range-separator="至"></tiny-date-picker>
<tiny-date-picker v-model="yearValue" type="yearrange" start-placeholder="开始年份" end-placeholder="结束年份" range-separator="至"></tiny-date-picker>
<tiny-date-picker
v-model="value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
range-separator="至"
></tiny-date-picker>
<tiny-date-picker
v-model="dateTimeValue"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
range-separator="至"
></tiny-date-picker>
<tiny-date-picker
v-model="monthValue"
type="monthrange"
start-placeholder="开始月份"
end-placeholder="结束月份"
range-separator="至"
></tiny-date-picker>
<tiny-date-picker
v-model="yearValue"
type="yearrange"
start-placeholder="开始年份"
end-placeholder="结束年份"
range-separator="至"
></tiny-date-picker>
</div>
</template>
@ -29,6 +53,10 @@ export default {
.demo-date-picker-wrap {
width: 350px;
:deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
width: 350px;
}
& > * {
margin-top: 12px;
}

14
examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
View File

@ -1,13 +1,17 @@
<template>
<div>
<p>打开日期面板，默认显示的日期</p>
<p>打开日期面板，默认显示的日期：</p>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value" :default-value="defaultDate"></tiny-date-picker>
</div>
<p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
<p>日期时间(范围)，选择日期之后默认显示的时间(范围)：</p>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="dateTimeValue" type="datetime" :default-time="defaultTime"></tiny-date-picker>
<tiny-date-picker v-model="dateTimeRangeValue" type="datetimerange" :default-time="defaultTimeRange"></tiny-date-picker>
<tiny-date-picker
v-model="dateTimeRangeValue"
type="datetimerange"
:default-time="defaultTimeRange"
></tiny-date-picker>
</div>
</div>
</template>
@ -28,6 +32,10 @@ const defaultTimeRange = ref(['09:00:00', '18:00:00'])
.demo-date-picker-wrap {
width: 280px;
:deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
width: 280px;
}
& > * {
margin-top: 12px;
}

14
examples/sites/demos/pc/app/date-picker/default-value.vue
View File

@ -1,13 +1,17 @@
<template>
<div>
<p>打开日期面板，默认显示的日期</p>
<p>打开日期面板，默认显示的日期：</p>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value" :default-value="defaultDate"></tiny-date-picker>
</div>
<p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
<p>日期时间(范围)，选择日期之后默认显示的时间(范围)：</p>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="dateTimeValue" type="datetime" :default-time="defaultTime"></tiny-date-picker>
<tiny-date-picker v-model="dateTimeRangeValue" type="datetimerange" :default-time="defaultTimeRange"></tiny-date-picker>
<tiny-date-picker
v-model="dateTimeRangeValue"
type="datetimerange"
:default-time="defaultTimeRange"
></tiny-date-picker>
</div>
</div>
</template>
@ -36,6 +40,10 @@ export default {
.demo-date-picker-wrap {
width: 280px;
:deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
width: 280px;
}
& > * {
margin-top: 12px;
}

4
examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
View File

@ -52,6 +52,10 @@ const pickerOptions = {
.demo-date-picker-wrap {
width: 280px;
:deep(.tiny-date-editor--daterange.tiny-input__inner) {
width: 280px;
}
& > * {
margin-top: 12px;
}

4
examples/sites/demos/pc/app/date-picker/disabled.vue
View File

@ -59,6 +59,10 @@ export default {
.demo-date-picker-wrap {
width: 280px;
:deep(.tiny-date-editor--daterange.tiny-input__inner) {
width: 280px;
}
& > * {
margin-top: 12px;
}

4
examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
View File

@ -17,6 +17,10 @@ const dateRangeValue = ref([])
.demo-date-picker-wrap {
width: 280px;
:deep(.tiny-date-editor--daterange.tiny-input__inner) {
width: 280px;
}
& > * {
margin-top: 12px;
}

4
examples/sites/demos/pc/app/date-picker/label-inside.vue
View File

@ -25,6 +25,10 @@ export default {
.demo-date-picker-wrap {
width: 280px;
:deep(.tiny-date-editor--daterange.tiny-input__inner) {
width: 280px;
}
& > * {
margin-top: 12px;
}

26
examples/sites/demos/pc/app/date-picker/size-composition-api.vue
View File

@ -8,11 +8,27 @@
</tiny-radio-group>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
<tiny-date-picker v-model="dateTimeValue" type="datetime" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
<tiny-date-picker
v-model="dateTimeValue"
type="datetime"
:size="radioValue"
placeholder="请选择日期"
></tiny-date-picker>
<tiny-date-picker v-model="weekValue" type="week" :size="radioValue" placeholder="请选择周"></tiny-date-picker>
<tiny-date-picker v-model="monthValue" type="month" :size="radioValue" placeholder="请选择月份"></tiny-date-picker>
<tiny-date-picker
v-model="monthValue"
type="month"
:size="radioValue"
placeholder="请选择月份"
></tiny-date-picker>
<tiny-date-picker v-model="yearValue" type="year" :size="radioValue" placeholder="请选择年份"></tiny-date-picker>
<tiny-date-picker v-model="rangeValue" type="daterange" :size="radioValue" start-placeholder="开始日期" end-placeholder="结束日期"></tiny-date-picker>
<tiny-date-picker
v-model="rangeValue"
type="daterange"
:size="radioValue"
start-placeholder="开始日期"
end-placeholder="结束日期"
></tiny-date-picker>
</div>
</div>
</template>
@ -38,6 +54,10 @@ const radioValue = ref('default')
.demo-date-picker-wrap {
width: 280px;
:deep(.tiny-date-editor--daterange.tiny-input__inner) {
width: 280px;
}
& > * {
margin-top: 12px;
}

32
examples/sites/demos/pc/app/date-picker/size.vue
View File

@ -8,21 +8,33 @@
</tiny-radio-group>
<div class="demo-date-picker-wrap">
<tiny-date-picker v-model="value" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
<tiny-date-picker v-model="dateTimeValue" type="datetime" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
<tiny-date-picker
v-model="dateTimeValue"
type="datetime"
:size="radioValue"
placeholder="请选择日期"
></tiny-date-picker>
<tiny-date-picker v-model="weekValue" type="week" :size="radioValue" placeholder="请选择周"></tiny-date-picker>
<tiny-date-picker v-model="monthValue" type="month" :size="radioValue" placeholder="请选择月份"></tiny-date-picker>
<tiny-date-picker
v-model="monthValue"
type="month"
:size="radioValue"
placeholder="请选择月份"
></tiny-date-picker>
<tiny-date-picker v-model="yearValue" type="year" :size="radioValue" placeholder="请选择年份"></tiny-date-picker>
<tiny-date-picker v-model="rangeValue" type="daterange" :size="radioValue" start-placeholder="开始日期" end-placeholder="结束日期"></tiny-date-picker>
<tiny-date-picker
v-model="rangeValue"
type="daterange"
:size="radioValue"
start-placeholder="开始日期"
end-placeholder="结束日期"
></tiny-date-picker>
</div>
</div>
</template>
<script>
import {
DatePicker,
RadioGroup,
RadioButton
} from '@opentiny/vue'
import { DatePicker, RadioGroup, RadioButton } from '@opentiny/vue'
export default {
components: {
@ -48,6 +60,10 @@ export default {
.demo-date-picker-wrap {
width: 280px;
:deep(.tiny-date-editor--daterange.tiny-input__inner) {
width: 280px;
}
& > * {
margin-top: 12px;
}

16
examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
View File

@ -14,11 +14,7 @@
></tiny-date-picker>
</tiny-form-item>
<tiny-form-item prop="date2">
<tiny-time-picker
:validate-event="false"
placeholder="选择时间"
v-model="ruleForm.date2"
></tiny-time-picker>
<tiny-time-picker :validate-event="false" placeholder="选择时间" v-model="ruleForm.date2"></tiny-time-picker>
</tiny-form-item>
</tiny-form-item>
<tiny-form-item>
@ -72,9 +68,9 @@ const rules = ref({
function submitForm() {
ruleFormRef.value.validate((valid) => {
if (valid) {
Modal.message('Submitted successfully !')
Modal.message({ message: 'Submitted successfully !', status: 'success' })
} else {
Modal.message('Data verification failed !')
Modal.message({ message: 'Data verification failed !', status: 'error' })
return false
}
@ -86,8 +82,12 @@ function resetForm() {
}
</script>
<style scoped>
<style scoped lang="less">
.demo-date-picker-wrap {
width: 400px;
:deep(.tiny-form-item .tiny-form-item) {
margin-bottom: 8px;
}
}
</style>

16
examples/sites/demos/pc/app/date-picker/validate-event.vue
View File

@ -14,11 +14,7 @@
></tiny-date-picker>
</tiny-form-item>
<tiny-form-item prop="date2">
<tiny-time-picker
:validate-event="false"
placeholder="选择时间"
v-model="ruleForm.date2"
></tiny-time-picker>
<tiny-time-picker :validate-event="false" placeholder="选择时间" v-model="ruleForm.date2"></tiny-time-picker>
</tiny-form-item>
</tiny-form-item>
<tiny-form-item>
@ -75,9 +71,9 @@ export default {
submitForm() {
this.$refs.ruleFormRef.validate((valid) => {
if (valid) {
Modal.message('Submitted successfully !')
Modal.message({ message: 'Submitted successfully !', status: 'success' })
} else {
Modal.message('Data verification failed !')
Modal.message({ message: 'Data verification failed !', status: 'error' })
return false
}
@ -90,8 +86,12 @@ export default {
}
</script>
<style scoped>
<style scoped lang="less">
.demo-date-picker-wrap {
width: 400px;
:deep(.tiny-form-item .tiny-form-item) {
margin-bottom: 8px;
}
}
</style>

12
examples/sites/demos/pc/app/date-picker/webdoc/date-picker.js
View File

@ -333,7 +333,7 @@ export default {
},
{
'name': 'clear-icon',
'type': 'object',
'type': 'Component',
'defaultValue': 'IconOperationfaild',
'desc': {
'zh-CN': '自定义清空图标',
@ -397,7 +397,7 @@ export default {
{
'name': 'format',
'type': 'string',
'defaultValue': 'yyyy-MM-dd',
'defaultValue': "'yyyy-MM-dd'",
'desc': {
'zh-CN': '显示在输入框中的格式',
'en-US': 'Display format in the text box'
@ -555,8 +555,8 @@ export default {
},
{
'name': 'size',
'type': "'medium' | 'small' | '' | 'mini'",
'defaultValue': "''",
'type': "'medium' | 'small' | 'mini'",
'defaultValue': '--',
'desc': {
'zh-CN': '输入框尺寸',
'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
@ -587,7 +587,7 @@ export default {
},
{
'name': 'suffix-icon',
'type': 'object',
'type': 'Component',
'defaultValue': 'IconCalendar',
'desc': {
'zh-CN': '自定义选择器的后置图标',
@ -663,7 +663,7 @@ export default {
{
'name': 'value-format',
'type': 'string',
'defaultValue': 'Date 对象',
'defaultValue': '--',
'desc': {
'zh-CN': '指定绑定值的格式，不指定则绑定值为 Date 对象',
'en-US':