From fdeb869c386da95150a087bc22bcebc4e57d0f76 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 18 Mar 2025 18:16:32 +0800
Subject: [PATCH] 更新所有表单组件文档和头注释
---
forms/datePicker/CDatePicker.vue | 102 +++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 95 insertions(+), 7 deletions(-)
diff --git a/forms/datePicker/CDatePicker.vue b/forms/datePicker/CDatePicker.vue
index 8521004..dd2c173 100644
--- a/forms/datePicker/CDatePicker.vue
+++ b/forms/datePicker/CDatePicker.vue
@@ -1,42 +1,95 @@
/**
* CDatePicker - 选择日期范围操作
+ * 日期选择组件，用于在表单中选择日期或日期范围
+ * 支持三种选择模式：日期选择、日期时间选择和日期范围选择
+ * 可限制日期选择范围，支持清除功能和只读模式
* @author Tevin
*/
<template>
- <view class="c-date-picker">
+ <view
+ class="c-date-picker"
+ :class="readOnly?'read-only':''"
+ >
<CDateRangeAction
v-if="mode==='dateRange'"
:value="itemRes.formData[itemRes.name]"
:onChange="evt=>handleChange(evt)"
+ :placeholder="placeholder"
>
<AtInput
- ref="input"
:name="itemRes.name"
:title="itemRes.label"
:required="itemRes.required"
:error="itemRes.error"
:value="itemRes.formData[itemRes.name]"
+ :placeholder="placeholder"
>
- <view class="at-icon at-icon-chevron-right" />
+ <view
+ v-show="!readOnly && !showClear"
+ class="at-icon at-icon-chevron-right"
+ />
+ <view
+ v-show="!readOnly && showClear"
+ class="at-icon at-icon-close"
+ @tap.stop="evt => handleClear()"
+ ></view>
</AtInput>
</CDateRangeAction>
<CDateTimeAction
v-else-if="mode==='dateTime'"
:value="itemRes.formData[itemRes.name]"
:onChange="evt=>handleChange(evt)"
+ :placeholder="placeholder"
>
<AtInput
- ref="input"
:name="itemRes.name"
:title="itemRes.label"
:required="itemRes.required"
:error="itemRes.error"
:value="itemRes.formData[itemRes.name]"
+ :placeholder="placeholder"
>
- <view class="at-icon at-icon-chevron-right" />
+ <view
+ v-show="!readOnly && !showClear"
+ class="at-icon at-icon-chevron-right"
+ />
+ <view
+ v-show="!readOnly && showClear"
+ class="at-icon at-icon-close"
+ @tap.stop="evt => handleClear()"
+ ></view>
</AtInput>
</CDateTimeAction>
+ <view v-else-if="mode==='date'">
+ <picker
+ mode="date"
+ :start="limitStart || pickerStart"
+ :end="limitEnd || pickerEnd"
+ :fields="fields"
+ :value="itemRes.formData[itemRes.name]"
+ @change="evt=>handleChange(evt.detail.value)"
+ >
+ <AtInput
+ :name="itemRes.name"
+ :title="itemRes.label"
+ :required="itemRes.required"
+ :error="itemRes.error"
+ :value="itemRes.formData[itemRes.name]"
+ :placeholder="placeholder"
+ >
+ <view
+ v-show="!readOnly && !showClear"
+ class="at-icon at-icon-chevron-right"
+ />
+ <view
+ v-show="!readOnly && showClear"
+ class="at-icon at-icon-close"
+ @tap.stop="evt => handleClear()"
+ ></view>
+ </AtInput>
+ </picker>
+ </view>
</view>
</template>
@@ -63,15 +116,50 @@
type: String,
default: 'date',
},
+ // 占位提示
+ placeholder: String,
+ // 开始日期
+ limitStart: String,
+ // 结束日期
+ limitEnd: String,
+ // 日期选择粒度 year、month、day
+ fields: {
+ type: String,
+ default: 'day',
+ },
+ // 是否只读
+ readOnly: {
+ type: Boolean,
+ default: false,
+ },
+ // 允许清除
+ allowClear: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
- return {};
+ const year = new Date().getFullYear();
+ return {
+ pickerStart: year - 30 + '-01-01',
+ pickerEnd: year + 30 + '-12-31',
+ };
},
- computed: {},
+ computed: {
+ showClear() {
+ if (!this.allowClear) {
+ return false;
+ }
+ return !!this.itemRes.formData[this.itemRes.name];
+ },
+ },
methods: {
handleChange(val) {
this.itemRes.onChange(val);
},
+ handleClear() {
+ this.itemRes.onChange('');
+ },
},
mounted() {},
};
--
Gitblit v1.9.1