_cursor.ai/forms.doc/checkbox.doc/CCheckBox.doc.md
@@ -14,8 +14,12 @@ - `itemRes` (Object，必填)：表单数据资源对象，表单组件内部机制专用 - `options` (Array，可选)：选项列表，每个选项应包含 label 和 value 属性，默认为空数组 - `boxType` (String，可选)：勾选类型，可选值有 checkbox（多选）、radio（单选），默认为 checkbox - `displayType` (String，可选)：显示模式，可选值有 plane（直接显示）、dialog（弹窗选择），默认为 plane - `boxType` (String，可选)：勾选类型，默认为 checkbox - `checkbox`：多选模式 - `radio`：单选模式 - `displayType` (String，可选)：显示模式，默认为 plane - `plane`：直接显示模式 - `dialog`：弹窗选择模式 - `placeholder` (String，可选)：输入框占位提示文本 ## 使用示例 @@ -121,12 +125,13 @@ ## 注意事项 1. 组件支持两种选择类型： - `checkbox`：多选模式，可以选择多个选项，表单值为数组 - `radio`：单选模式，只能选择一个选项，表单值为单个值 - `checkbox`：多选模式，可以选择多个选项，表单值为数组 - `radio`：单选模式，只能选择一个选项，表单值为单个值 2. 组件支持两种显示模式： - `plane`：直接显示模式，选项直接显示在表单项下方 - `dialog`：弹窗选择模式，点击表单项后弹出选择弹窗 3. 当选项较多时，建议使用弹窗选择模式（`displayType="dialog"`） 4. 在多选模式下，表单值为选中项的 value 值组成的数组 5. 在单选模式下，表单值为选中项的 value 值 6. 组件会自动根据表单值显示已选项的文本，多个选项时用逗号分隔 6. 组件会自动根据表单值显示已选项的文本，多个选项时用逗号分隔 7. 使用单选模式时，确保传入的表单值如果为单个值而非数组，否则可能导致显示异常 _cursor.ai/forms.doc/chinaArea.doc/CChinaArea.doc.md
@@ -2,7 +2,7 @@ ## 功能说明 CChinaArea 是一个中国地区选择器组件，用于在表单中选择省市区地址。组件内置了完整的中国行政区划数据，支持省、市、区三级联动选择，并且可以设置默认值和只读模式。 CChinaArea 是一个中国地区选择器组件，用于在表单中选择省市区地址。组件内置了完整的中国行政区划数据，支持省、市、区(街道)多级联动选择，并且可以通过地理定位自动获取当前位置。 ## 引用方式 @@ -13,11 +13,11 @@ ## 组件参数 - `itemRes` (Object，必填)：表单数据资源对象，表单组件内部机制专用 - `level` (Number，可选)：选择层级，可选值为 1（省）、2（省市）、3（省市区），默认为 3 - `autoGeo` (Boolean，可选)：是否自动通过地理定位获取省市区，默认为 false - `level` (Number，可选)：联动级别，默认为 3 - `3`：省市区三级联动 - `4`：省市区街道四级联动 - `placeholder` (String，可选)：选择器占位提示文本 - `readOnly` (Boolean，可选)：只读模式，默认为 false - `separator` (String，可选)：地址文本分隔符，默认为空格 - `defaultCode` (String，可选)：默认选中的区域编码 ## 使用示例 @@ -47,12 +47,7 @@ data() { return { form: { address: { province: '', city: '', district: '', code: '' } address: [] } }; } @@ -60,30 +55,34 @@ </script> ``` ### 自定义配置 ### 四级联动 ```html <CFormItem name="region" label="配送区域"> <CFormItem name="region" label="详细区域"> <CChinaArea :level="2" separator="/" defaultCode="330100" placeholder="请选择配送区域" :level="4" placeholder="请选择所在区域" /> </CFormItem> ``` ### 自动获取地理位置 ```html <CFormItem name="location" label="当前位置"> <CChinaArea :autoGeo="true" placeholder="正在获取位置..." /> </CFormItem> ``` ## 注意事项 1. 组件返回的数据格式为对象，包含以下字段： - `province`：省份名称 - `city`：城市名称 - `district`：区县名称（仅在 level=3 时有值） - `code`：选中区域的行政区划代码 2. 可以通过 `defaultCode` 设置默认选中的区域 3. `level` 参数决定了选择的层级： - 1：仅选择省份 - 2：选择省份和城市 - 3：选择省份、城市和区县 4. 组件会根据当前选择自动联动更新下级选项 5. 在只读模式下，地址信息将以文本形式显示，使用 `separator` 分隔 1. 组件返回的数据格式为数组，包含选中的地区名称： - 三级联动：`['浙江省', '杭州市', '西湖区']` - 四级联动：`['浙江省', '杭州市', '西湖区', '文三路街道']` 2. 当启用地理定位功能（`autoGeo=true`）时，组件会尝试获取当前位置的省市区信息 3. 组件会根据当前选择自动联动更新下级选项 4. 地区数据源来自内置的中国行政区划数据 5. 位置信息在表单中显示时，地址各级之间会以 ` / ` 分隔 _cursor.ai/forms.doc/datePicker.doc/CDatePicker.doc.md
@@ -13,11 +13,17 @@ ## 组件参数 - `itemRes` (Object，必填)：表单数据资源对象，表单组件内部机制专用 - `mode` (String，可选)：日期时间选择器模式，可选值有 date、dateTime、dateRange，默认为 date - `mode` (String，可选)：日期时间选择器模式，默认为 date - `date`：选择单个日期，使用系统日期选择器 - `dateTime`：选择日期和时间，使用自定义的日期时间选择器 - `dateRange`：选择日期范围，使用自定义的日期范围选择器 - `placeholder` (String，可选)：输入框占位提示文本 - `limitStart` (String，可选)：可选日期的开始日期，格式为 YYYY-MM-DD - `limitEnd` (String，可选)：可选日期的结束日期，格式为 YYYY-MM-DD - `fields` (String，可选)：日期选择粒度，可选值有 year、month、day，默认为 day - `fields` (String，可选)：日期选择粒度，默认为 day - `year`：只选择年 - `month`：选择到月 - `day`：选择到日 - `readOnly` (Boolean，可选)：只读模式，默认为 false - `allowClear` (Boolean，可选)：是否允许清除已选值，默认为 false @@ -102,10 +108,7 @@ ## 注意事项 1. 不同的 `mode` 值对应不同的日期选择交互方式： - `date`：选择单个日期，使用系统日期选择器 - `dateTime`：选择日期和时间，使用自定义的日期时间选择器 - `dateRange`：选择日期范围，使用自定义的日期范围选择器 1. 不同的 `mode` 值对应不同的日期选择交互方式 2. 当设置 `allowClear` 为 true 时，已选择日期后会显示清除图标，点击可清除已选值 3. `limitStart` 和 `limitEnd` 参数仅在 `mode` 为 date 时生效 4. 组件默认的可选日期范围是当前年份的前后 30 年 _cursor.ai/forms.doc/form.doc/CForm.doc.md
@@ -13,16 +13,18 @@ ## 组件参数 - `formData` (Object，必填)：表单数据对象，用于存储表单各项的值 - `autoScrollToError` (String，可选)：是否自动滚动到错误位置，可选值有 on、off，默认为 off - `autoScrollToError` (String，可选)：是否自动滚动到错误位置，默认为 off - `on`：启用自动滚动 - `off`：禁用自动滚动 - `onChange` (Function，可选)：表单项变化的回调函数，参数为变化的表单项数据 - `onFinish` (Function，可选)：表单完成的回调函数，仅在提交且通过表单验证后调用，参数为整个表单数据 ## 实例方法 - `$submit`：手动触发表单提交，会执行表单验证 - `$preVerify`：提前验证指定的表单项，参数为表单项名称数组和回调函数 - `$setErrors`：直接设置表单错误，参数为错误对象，格式为 `{字段名: 错误信息}` - `$setScrollTop`：设置滚动位置，参数为滚动的 top 值 - `$preVerify(keys, callback)`：提前验证指定的表单项，参数为表单项名称数组和回调函数 - `$setErrors(errors)`：直接设置表单错误，参数为错误对象，格式为 `{字段名: 错误信息}` - `$setScrollTop(top)`：设置滚动位置，参数为滚动的 top 值 ## 使用示例 @@ -31,7 +33,7 @@ ```html <template> <CForm :form="form" :formData="form" :onFinish="handleFinish" > <CFormItem name="username" label="用户名" required> @@ -78,7 +80,7 @@ ```html <CForm :form="form" :formData="form" autoScrollToError="on" :onFinish="handleFinish" > @@ -98,11 +100,11 @@ ```html <CForm ref="form" :form="form" :formData="form" :onFinish="handleFinish" > <!-- 表单项 --> <button @tap="submitForm">提交</button> <button @tap="evt => submitForm()">提交</button> </CForm> ```
@@ -2,7 +2,7 @@ ## 功能说明 CImagePicker 是一个图片选择器组件，用于在表单中上传和管理图片。组件支持单张和多张图片上传，支持预览、删除等功能，并且可以限制上传图片的数量和大小。 CImagePicker 是一个图片选择器组件，用于在表单中上传和管理图片。组件支持单张和多张图片上传，支持预览、删除等功能，并且可以限制上传图片的数量和来源。 ## 引用方式 @@ -13,12 +13,16 @@ ## 组件参数 - `itemRes` (Object，必填)：表单数据资源对象，表单组件内部机制专用 - `maxCount` (Number，可选)：最大上传图片数量，默认为 9 - `maxSize` (Number，可选)：单张图片最大大小，单位为 MB，默认为 5 - `compress` (Boolean，可选)：是否压缩图片，默认为 true - `quality` (Number，可选)：图片压缩质量，取值范围 0-1，默认为 0.8 - `placeholder` (String，可选)：选择器占位提示文本 - `readOnly` (Boolean，可选)：只读模式，默认为 false - `count` (Number，可选)：最大图片张数，默认为 1 - `sourceType` (Array，可选)：图片来源，默认为 ['album', 'camera'] - `album`：从相册选择 - `camera`：使用相机 - `params` (Object，可选)：上传图片的附加参数，默认为空对象 - `needThumb` (Boolean，可选)：是否开启缩略图，默认为 false ## 实例方法 - `$uploadImage(callback)`：上传图片到服务器，参数为回调函数，回调函数接收两个参数：状态和结果 ## 使用示例 @@ -29,7 +33,7 @@ <CForm :form="form"> <CFormItem name="photos" label="图片上传"> <CImagePicker :maxCount="3" :count="3" placeholder="请上传图片" /> </CFormItem> @@ -57,24 +61,58 @@ </script> ``` ### 自定义配置 ### 限制图片来源 ```html <CFormItem name="certificate" label="证书照片"> <CFormItem name="idCard" label="身份证照片"> <CImagePicker :maxCount="1" :maxSize="2" :compress="true" :quality="0.6" placeholder="请上传证书照片" :count="1" :sourceType="['camera']" placeholder="请拍摄身份证照片" /> </CFormItem> ``` ### 使用上传方法 ```html <template> <CForm :form="form"> <CFormItem name="certificate" label="证书照片"> <CImagePicker ref="imagePicker" :count="1" :params="{type: 'certificate'}" :needThumb="true" placeholder="请上传证书照片" /> </CFormItem> <button @tap="evt => handleUpload()">上传图片</button> </CForm> </template> <script> export default { // ... methods: { handleUpload() { this.$refs.imagePicker.$uploadImage((state, result) => { if (state === 'success') { console.log('上传成功', result); } else { console.error('上传失败', result); } }); } } }; </script> ``` ## 注意事项 1. 组件会自动处理图片上传，支持压缩和预览功能 2. 上传的图片会被转换为 base64 格式存储在表单数据中 3. 当设置 `maxCount` 为 1 时，组件会以单图模式运行 4. 建议根据实际需求设置合适的 `maxSize` 和压缩参数 5. 在只读模式下，只能查看已上传的图片，无法进行上传和删除操作 1. 组件会自动过滤不支持的图片格式，只允许上传 gif、png、jpg、jpeg 格式的图片 2. 图片大小超过 1MB 的会自动进行压缩处理 3. 通过 `$uploadImage` 方法可以将图片上传到服务器，上传成功后会自动更新表单值 4. 如果设置了 `needThumb` 为 true，上传时会同时生成缩略图 5. 组件内部集成了图片预览功能，点击已上传的图片可以放大查看 _cursor.ai/forms.doc/input.doc/CInput.doc.md
@@ -13,7 +13,13 @@ ## 组件参数 - `itemRes` (Object，必填)：表单数据资源对象，表单组件内部机制专用 - `type` (String，可选)：输入框类型，可选值有 text、number、password、phone、idcard、digit - `type` (String，可选)：输入框类型 - `text`：文本输入 - `number`：数字输入 - `password`：密码输入 - `phone`：手机号输入 - `idcard`：身份证号输入 - `digit`：带小数点的数字输入 - `placeholder` (String，可选)：输入框占位提示文本 - `unit` (String，可选)：输入框单位，设置后会在输入框右侧显示单位文本 - `readOnly` (Boolean，可选)：只读模式，默认为 false _cursor.ai/forms.doc/numberStep.doc/CNumberStep.doc.md
@@ -16,7 +16,9 @@ - `placeholder` (String，可选)：输入框占位提示文本 - `range` (Array，可选)：取值范围，格式为 [最小值, 最大值]，默认为 [0, 100] - `step` (Number，可选)：步长，即每次点击增减按钮改变的数值，默认为 1 - `correct` (String，可选)：奇偶修正模式，可选值有 odd（奇数）、even（偶数），默认为空 - `correct` (String，可选)：奇偶修正模式，默认为空 - `odd`：只允许选择奇数 - `even`：只允许选择偶数 - `unit` (String，可选)：数值单位，显示在数字输入框右侧 ## 使用示例 _cursor.ai/forms.doc/select.doc/CSelect.doc.md
@@ -16,7 +16,9 @@ - `options` (Array，必填)：选择菜单选项数组，每个选项应包含 name 和 value/id 属性 - `placeholder` (String，可选)：输入框占位提示文本 - `readOnly` (Boolean，可选)：只读模式，默认为 false - `selectByPage` (String，可选)：开启选择菜单跳转选择页面模式，值为 'on' - `selectByPage` (String，可选)：选择菜单模式 - 不设置：下拉选择模式 - `on`：跳转页面选择模式 - `onOpenSelectorPage` (Function，可选)：页面跳转模式下，发起选择的回调函数 ## 使用示例 forms/checkbox/CCheckBox.vue
@@ -1,5 +1,8 @@ /** * CCheckBox * 复选框组件，用于在表单中提供多选或单选功能 * 支持两种显示模式：直接显示模式和弹窗选择模式 * 支持两种选择类型：多选和单选 * @author Tevin */ @@ -142,9 +145,8 @@ return; } const selectedIndex = this.options.findIndex( opt => opt.value === item opt => opt.value === item, ); console.log(item, selectedIndex); if (selectedIndex < 0) { return; } @@ -155,7 +157,7 @@ // 单选 else if (this.boxType === 'radio') { const next = evt[evt.length - 1]; const selectedIndex = this.options.find(opt => opt.value === item); const selectedIndex = this.options.findIndex(opt => opt.value === next); if (selectedIndex < 0) { this.itemRes.onChange(''); } else { forms/chinaArea/CChinaArea.vue
@@ -1,5 +1,8 @@ /** * CChinaArea - 表单项，中国地址三级联动 * 中国地区选择器组件，用于在表单中选择省市区地址 * 内置完整的中国行政区划数据，支持多级联动选择 * 支持自动通过地理定位获取省市区 * @author Tevin */
@@ -1,5 +1,8 @@ /** * CDatePicker - 选择日期范围操作 * 日期选择组件，用于在表单中选择日期或日期范围 * 支持三种选择模式：日期选择、日期时间选择和日期范围选择 * 可限制日期选择范围，支持清除功能和只读模式 * @author Tevin */
@@ -1,5 +1,8 @@ /** * CForm - 表单套装组件，套件的主体 * 表单容器组件，用于管理表单数据、处理表单验证和提交 * 支持自动滚动到错误位置，提供表单项变化回调和表单完成回调 * 提供手动提交、预验证和错误设置等功能 * @author Tevin */ @@ -142,7 +145,7 @@ Object.keys(errors).forEach(errorKey => { if (typeof this.validators[errorKey] !== 'undefined') { checklist.push( this.validators[errorKey]('setError', errors[errorKey]) this.validators[errorKey]('setError', errors[errorKey]), ); } else { unchecks.push(errors[errorKey]); forms/imagePicker/CImagePicker.vue
@@ -1,5 +1,8 @@ /** * CImagePicker * 图片选择器组件，用于在表单中上传和管理图片 * 支持单张和多张图片上传，并提供压缩、预览等功能 * 可限制上传图片的数量和来源（相册/相机） * @author Tevin */
@@ -1,5 +1,7 @@ /** * CInput - 表单项，文本输入框 * 用于在表单中收集用户的文本输入 * 支持多种输入类型，可以设置占位提示文本，并且支持显示单位标识 * @author Tevin */
@@ -1,5 +1,7 @@ /** * CNumberStep * 数字步进器组件，用于在表单中输入数字并通过步进按钮增减数值 * 支持设置数值范围、步长、奇偶修正和单位显示 * @author Tevin */
@@ -1,5 +1,8 @@ /** * CNumberValve * 数值滑块组件，用于在表单中通过滑块选择数值 * 提供了滑动条和增减按钮两种方式来调整数值 * 支持设置数值范围、步长和单位显示 * @author Tevin */ @@ -210,7 +213,7 @@ currentNext = Math.min(currentNext, this.range[1]); // 设置 const sliderLeft = Math.round( ((currentNext - this.range[0]) / (this.range[1] - this.range[0])) * 100 ((currentNext - this.range[0]) / (this.range[1] - this.range[0])) * 100, ); this.sliderLeft = sliderLeft; this.current = currentNext; forms/select/CSelect.vue
@@ -1,5 +1,8 @@ /** * CSelect * 下拉选择组件，用于在表单中提供选项选择功能 * 支持两种选择模式：下拉选择模式和跳转页面选择模式 * 可配置为只读模式，并支持自定义占位文本 * @author Tevin */
@@ -1,5 +1,8 @@ /** * CSwitch * 开关组件，用于在表单中提供开关选择功能 * 基于 AtSwitch 封装，支持只读模式 * 能够显示必填和错误状态 * @author Tevin */
@@ -1,5 +1,8 @@ /** * CTextArea * 多行文本输入组件，用于在表单中收集用户的多行文本输入 * 支持设置输入区域高度，可以通过行数或像素值来控制 * 支持只读模式和自动增高功能 * @author Tevin */
