tmt-form
v0.1.12
Published
tmt-form-->0.1.9版本
Downloads
15
Readme
欢迎使用tmt-form
简介
本插件基于Element进行二次封装form表单，只需简单的配置一下，就可以生成一个form表单，省去写html的时间
安装方式
1、npm install tmt-form
2、在main.js全局引入:
import Vue from 'vue'
import tmtForm from 'tmt-form';
Vue.use(tmtForm)标签属性说明
tmt-form| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ----------------------------------------------------- | --------------------------------------------------------------------------------------- | ------- | :-------------------: | :----: | | inline | 行内表单模式 | boolean | — | false | | label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置label-width | string | right/left/top | right | | label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 | string | — | — | | label-suffix | 表单域标签的后缀 | string | — | — | | hide-required-asterisk | 是否显示必填字段的标签旁边的红色星号 | boolean | — | false | | show-message | 是否显示校验错误信息 | boolean | — | true | | inline-message | 是否以行内形式展示校验信息 | boolean | — | false | | status-icon | 是否在输入框中显示校验结果反馈图标 | boolean | — | false | | size | 用于控制该表单内组件的尺寸 | string | medium / small / mini | — | | disabled | 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 | boolean | — | false |
配置说明
大体配置
| 配置项 | 说明 | 类型 |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| formType | 对应的组件 | String |
| name | 表单提交的字段 | String |
| label | 表单选项的表述文字 | String |
| validate | 表单校验规则 | Array |
| elProps | 添加对应Element组件的属性 | Object |
| filedChange | 监听表单内字段值的变化,参数说明：form 已经填写的表单字段setFiled 是一个函数，可以更改其他字段的值，例：setFiled('username','Jan') | Function(val,form,setFiled) |
细节配置
formType配置表单对应的组件| 配置项 | 说明 | | -------------- | -------------- | | tmtText | 文本输入框 | | tmtUpload | 文件上传组件 | | tmtSelect | 选择器组件 | | tmtRadio | 单选按钮 | | tmtSwitch | 开关 | | tmtColorPicker | 颜色选择器 | | tmtColorPicker | 颜色选择器 | | tmtTimePicker | 时间选择组件 | | tmtInputNumber | 数字输入框组件 | | tmtCheckBox | 复选框组件 | | tmtSilder | 滑块 | | tmtCascader | 多级联动 |
defaultValue表单默认值validate表单校验规则（Array）| 配置项 | 说明 | | --------- | ----------------------------------------------------------------------------------------------------------------------------- | | required | 是否为必填字段 | | message | 当为必填字段的时候的错误提示 | | trigger | 'blur'当输入框失去焦点时校验'change'当输入框值改变时校验 | | validator | 函数类型 rule：校验规则value：输入框的值callback：函数的回调（填写错误提示，校验正确时，也需要调用一下callback） |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------- | :----: | :-----: | | options | 配置项：[ { label:(文字), value:(选中时的值) } ] | Array | — | — | | disabled | 是否禁用 | boolean | — | false | | width | switch 的宽度（像素） | number | — | 40 | | active-icon-class | switch 打开时所显示图标的类名，设置此项会忽略 active-text | string | — | — | | inactive-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text | string | — | — | | active-text | switch 打开时的文字描述 | string | — | — | | inactive-text | switch 关闭时的文字描述 | string | — | — | | active-value | switch 打开时的值 | boolean / string / number | — | true | | inactive-value | switch 关闭时的值 | boolean / string / number | — | false | | active-color | switch 打开时的背景色 | string | — | #409EFF | | inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA | | name | switch 对应的 name 属性 | string | — | — | | validate-event | 改变 switch 状态时是否触发表单的校验 | boolean | - | true |
示例
validate:[{required:true,message:'输入框值不能为空',trigger: 'blur'}, { validator(rule,value,callback){ if(value.length<5){ callback(new Error('不能超过五个字符')) }else{ callback()// 验证通过必须调用回调 } }, trigger:'blur' } ]elProps添加相应组件的Element属性tmtText
| 属性 | 说明 | 类型 | 可选值 | 默认值 | | --------------- | ------------------------------------------------------------------------------------- | ---------------- | :-----------------------------------------: | :----: | | type | 类型 | string | text，textarea 和其他 原生 input 的 type 值 | text | | maxlength | 原生属性，最大输入长度 | number | — | — | | minlength | 原生属性，最小输入长度 | number | — | — | | show-word-limit | 是否显示输入字数统计，只在
type="text"或type="textarea"时有效 | boolean | — | false | | placeholder | 输入框占位文本 | string | — | — | | clearable | 是否可清空 | boolean | — | false | | show-password | 是否显示切换密码图标 | boolean | — | false | | disabled | 禁用 | boolean | — | false | | size | 输入框尺寸，只在 type!="textarea" 时有效 | string | medium/small/mini | — | | prefix-icon | 输入框头部图标 | string | — | — | | suffix-icon | 输入框尾部图标 | string | — | — | | rows | 输入框行数，只对 type="textarea" 有效 | number | — | 2 | | autosize | 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | — | false | | autocomplete | 原生属性，自动补全 | string | on, off | off | | readonly | 原生属性，是否只读 | boolean | — | false | | max | 原生属性，设置最大值 | — | — | — | | min | 原生属性，设置最小值 | — | — | — | | step | 原生属性，设置输入字段的合法数字间隔（type=number 时可用） | — | — | — |tmtUpload
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------- | :-----------------------: | :----: | | action | 必选参数，上传的地址 | string | — | — | | headers | 设置上传的请求头部 | object | — | — | | multiple | 是否支持多选文件 | boolean | — | — | | data | 上传时附带的额外参数 | object | — | — | | name | 上传的文件字段名 | string | — | file | | with-credentials | 支持发送 cookie 凭证信息 | boolean | — | false | | show-file-list | 是否显示已上传文件列表 | boolean | — | true | | drag | 是否启用拖拽上传 | boolean | — | false | | accept | 接受上传的文件类型（thumbnail-mode 模式下此参数无效） | string | — | — | | on-preview | 点击文件列表中已上传的文件时的钩子 | function(file) | — | — | | on-remove | 文件列表移除文件时的钩子 | function(file, fileList) | — | — | | on-success | 文件上传成功时的钩子 | function(response, file, fileList) | — | — | | on-error | 文件上传失败时的钩子 | function(err, file, fileList) | — | — | | on-progress | 文件上传时的钩子 function(event, file, fileList) | — | — | | on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — | | before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | — | | before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 | function(file, fileList) | — | — | | list-type | 文件列表的类型 | string | text/picture/picture-card | text | | auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true | | file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] | | http-request | 覆盖默认的上传行为，可以自定义上传的实现 | function | — | — | | disabled | 是否禁用 | boolean | — | false | | limit | 最大允许上传个数 | number | — | — | | on-exceed | 文件超出个数限制时的钩子 | function(files, fileList) | — | - |
tmtSelect
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------------------- | ------------------------------------------------------------------------------ | ------------ | :---------------: | :--------: | | group | 是否分组 | boolean | — | false | | multiple | 是否多选 | boolean | — | false | | disabled | 是否禁用 | boolean | — | false | | value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value | | size | 输入框尺寸 | string | medium/small/mini | — | | clearable | 是否可以清空选项 | boolean | — | false | | collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false | | multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 | | name | select input 的 name 属性 string — — | | placeholder | 占位符 | string | — | 请选择 | | filterable | 是否可搜索 | boolean | — | false | | allow-create | 是否允许用户创建新条目，需配合 filterable 使用 | boolean | — | false | | filter-method | 自定义搜索方法 | function | — | — | | remote | 是否为远程搜索 | boolean | — | false | | remote-method | 远程搜索方法 | function | — | — | | loading | 是否正在从远程获取数据 | boolean | — | false | | loading-text | 远程加载时显示的文字 | string | — | 加载中 | | no-match-text | 搜索条件无匹配时显示的文字，也可以使用slot="empty"设置 | string | — | 无匹配数据 | | no-data-text | 选项为空时显示的文字 | string | — | 无数据 | | popper-class | Select | 下拉框的类名 | string | — | — | | reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false | | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用 | boolean | - | false | | popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true | | automatic-dropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | - | false | | removeTag | 多选模式下移除tag时触发 | Function | - | - | | focus | 当 input 获得焦点时触发 | Function | - | - | | change | 选中值发生变化时触发 | Function | - | - | | blur | 当 input 失去焦点时触发 | Function | - | - | | visibleChange | 下拉框出现/隐藏时触发 | Function | - | - | | clear | 可清空的单选模式下用户点击清空按钮时触发 | Function | - | - |
tmtRate
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------------ | :----: | :------------------------------------------------------: | | max | 最大分值 | number | — | 5 | | disabled | 是否为只读 | boolean | — | false | | allow-half | 是否允许半选 | boolean | — | false | | low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 | | high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4 | | colors | icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色 | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] | | void-color | 未选中 icon 的颜色 | string | — | #C6D1DE | | disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7 | | icon-classes | icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名 | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] | | void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off | | disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on | | show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false | | show-score | 是否显示当前分数，show-score 和 show-text 不能同时为真 | boolean | — | false | | text-color | 辅助文字的颜色 | string | — | #1F2D3D | | texts | 辅助文字数组 | array | — | ['极差', '失望', '一般', '满意', '惊喜'] | | score-template | 分数显示模（需要设置默认值）板 | string | — | {value} |
tmtColorPicker
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------------- | ------------ | :-------------------: | :---------------------------------------------------: | | disabled | 是否禁用 | boolean | — | false | | size | 尺寸 | string | medium / small / mini | — | | show-alpha | 是否支持透明度选择 | boolean | — | false | | color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） | | popper-class | ColorPicker | 下拉框的类名 | string | — | — | | predefine | 预定义颜色 | array | — | — |
tmtRadio
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | ---------------------------------------------------------- | ------- | :-------------------: | :-----: | | size | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — | | disabled | 是否禁用 | boolean | — | false | | text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff | | fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF |
tmtRadio 单个选框的属性（配置在elProps中的options的单个对象中----attrs）
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ------------------------------------ | ---------------------------- | :----: | :----: | | label | Radio 的 value | string / number / boolean | — | — | | disabled | 是否禁用 | boolean | — | false | | border | 是否显示边框 | boolean | — | false | | size | Radio 的尺寸，仅在 border 为真时有效 | string medium / small / mini | — | — |
tmtSwitch
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------- | ----------------------------------------------------------- | ------------------------- | :----: | :-----: | | disabled | 是否禁用 | boolean | — | false | | width | switch 的宽度（像素） | number | — | 40 | | active-icon-class | switch 打开时所显示图标的类名，设置此项会忽略 active-text | string | — | — | | inactive-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text | string | — | — | | active-text | switch 打开时的文字描述 | string | — | — | | inactive-text | switch 关闭时的文字描述 | string | — | — | | active-value | switch 打开时的值 | boolean / string / number | — | true | | inactive-value | switch 关闭时的值 | boolean / string / number | — | false | | active-color | switch 打开时的背景色 | string | — | #409EFF | | inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA | | validate-event | 改变 switch 状态时是否触发表单的校验 | boolean | — | true | | change | switch 状态发生变化时的回调函数 | Function | — | — |
tmtCheckbox 整体配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | ---------------------------------------------------------------- | ------- | :-------------------: | :-----: | | size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | — | | disabled | 是否禁用 | boolean | — | false | | min | 可被勾选的 checkbox 的最小数量 | number | — | — | | max | 可被勾选的 checkbox 的最大数量 | number | — | — | | text-color | 按钮形式的 Checkbox 激活时的文本颜色 | string | — | #ffffff | | fill | 按钮形式的 Checkbox 激活时的填充色和边框色 | string | — | #409EFF |
tmtCheckbox 单个配置（配置在elProps中的options的单个对象中----attrs） | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ------------ | ------- | :----: | :----: | | disabled | 是否禁用 | boolean | — | false | | checked | 当前是否勾选 | boolean | — | false |
tmtTimePicker: 时间选择器(is-range为true时defaultValue为数组，具体看请看示例)
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | --------------------------------------------------------------------- | ------- | :-------------------------------------------------------------------------------: | :------------------: | | readonly | 完全只读 | boolean | — | false | | disabled | 禁用 | boolean | — | false | | editable | 文本框可输入 | boolean | — | true | | clearable | 是否显示清除按钮 | boolean | — | true | | size | 输入框尺寸 | string | medium / small / mini | — | | placeholder | 非范围选择时的占位内容 | string | — | — | | start-placeholder | 范围选择时开始日期的占位内容 | string | — | — | | end-placeholder | 范围选择时开始日期的占位内容 | string | — | — | | is-range | 是否为时间范围选择，仅对timeType为timePicker时有效 | boolean | — | false | | arrow-control | 是否使用箭头进行时间选择，仅对timeType为timePicker时有效 | boolean | — | false | | align | 对齐方式 | string | left / center / right | left | | popper-class | TimePicker 下拉框的类名 | string | — | — | | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} | | range-separator | 选择范围时的分隔符 | string | - | '-' | | value-format | 可选，仅tmtTimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | — | | prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time | | clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
picker-options的配置（timeType：timeSelect）
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------- | ------------------------------------ | ------ | :----: | :----: | | start | 开始时间 | string | — | 09:00 | | end | 结束时间 | string | — | 18:00 | | step | 间隔时间 | string | — | 00:30 | | minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 | | maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | — |
picker-options的配置（timeType：timePicker）
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------------- | ----------------------------------------------------------------------------------------------- | -------------- | :-------------------------------: | :--------: | | selectableRange | 可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] | string / array | — | — | | format | 时间格式化(TimePicker) | string | 小时：HH，分：mm，秒：ss，AM/PM A | 'HH:mm:ss' |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ---------------------------------------------- | ------------ | :-------------------------------------------------------------------------------------------------------------------------: | :------------------: | | readonly | 完全只读 | boolean | — | false | | disabled | 禁用 | boolean | — | false | | editable | 文本框可输入 | boolean | — | true | | clearable | 是否显示清除按钮 | boolean | — | true | | size | 输入框尺寸 | string | large, small, mini | — | | placeholder | 非范围选择时的占位内容 | string | — | — | | start-placeholder | 范围选择时开始日期的占位内容 | string | — | — | | end-placeholder | 范围选择时结束日期的占位内容 | string | — | — | | type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange | date | | format | 显示在输入框中的格式 | string | 见日期格式 | yyyy-MM-dd | | align | 对齐方式 | string | left, center, right | left | | popper-class | DatePicker | 下拉框的类名 | string | — | — | | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} | | range-separator | 选择范围时的分隔符 | string | — | '-' | | default-value | 可选，选择器打开时默认显示的时间 | Date | 可被new Date()解析 | — | | default-time | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00 | — | | value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | — | | name | 原生属性 | string | — | — | | unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false | | prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date | | clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close | | validate-event | 输入时是否触发表单的校验 | boolean | - | true |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ----------------------------------------------------------------- | ------------------------------ | :------: | :----: | | shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — | | disabledDate | 设置禁用状态，参数为当前日期，要求返回 | Boolean | Function | — | — | | cellClassName | 设置日期的 className | Function(Date) | — | — | | firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 | | onPick | 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效 | Function({ maxDate, minDate }) | — | — |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------- | ------------------------------------------------------------------------------------- | --------------- | :---------------------------: | :----: | | min | 最小值 | number | — | 0 | | max | 最大值 | number | — | 100 | | disabled | 是否禁用 | boolean | — | false | | step | 步长 | number | — | 1 | | show-input | 是否显示输入框，仅在非范围选择时有效 | boolean | — | false | | show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — true | | input-size | 输入框的尺寸 | string | large / medium / small / mini | small | | show-stops | 是否显示间断点 | boolean | — | false | | show-tooltip | 是否显示 tooltip | boolean | — | true | | format-tooltip | 格式化 tooltip message | function(value) | — | — | | range | 是否为范围选择 | boolean | — | false | | vertical | 是否竖向模式 | boolean | — | false | | height | Slider 高度，竖向模式时必填 | string | — | — | | label | 屏幕阅读器标签 | string | — | — | | debounce | 输入时的去抖延迟，毫秒，仅在show-input等于true时有效 | number | — | 300 | | tooltip-class | tooltip 的自定义类名 | string | — | — | | marks | 标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式 | object | — | — |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ------------------------------- | ------- | :----------: | :-------: | | min | 设置计数器允许的最小值 | number | — | -Infinity | | max | 设置计数器允许的最大值 | number | — | Infinity | | step | 计数器步长 | number | — 1 | | step-strictly | 是否只能输入 step 的倍数 | boolean | — | false | | precision | 数值精度 | number | — | — | | size | 计数器尺寸 | string | large, small | — | | disabled | 是否禁用计数器 | boolean | — | false | | controls | 是否使用控制按钮 boolean — true | | controls-position | 控制按钮位置 | string | right | - | | label | 输入框关联的label文字 | string | — | — | | placeholder | 输入框默认 placeholder | string | - | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------------- | ----------------------------------------------------------------------------------------------- | ----------------------- | :-------------------: | :---------: | | options | 可选项数据源，键名可通过 Props 属性配置 | array | — | — | | props | 配置选项，具体见下表 | object | — | — | | size | 尺寸 | string | medium / small / mini | — | | placeholder | 输入框占位文本 | string | — | 请选择 | | disabled | 是否禁用 | boolean | — | false | | clearable | 是否支持清空选项 | boolean | — | false | | show-all-levels | 输入框中是否显示选中值的完整路径 | boolean | — | true | | collapse-tags | 多选模式下是否折叠Tag | boolean | - | false | | separator | 选项分隔符 | string | — | 斜杠 ' / ' | | filterable | 是否可搜索选项 | boolean | — | — | | filter-method | 自定义搜索逻辑，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中 | function(node, keyword) | - | - | | debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 | | before-filter | 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | — | — | | popper-class | 自定义浮层类名 | string | — | — | change| 当选中节点变化时触发（回调参数：选中节点的值） expand-change| 当展开节点发生变化时触发（回调参数：各父级选项值组成的数组） blur| 当失去焦点时触发（回调参数：(event: Event)） focus |当获得焦点时触发（回调参数：(event: Event)） visible-change| 下拉框出现/隐藏时触发（回调参数：出现则为 true，隐藏则为 false） remove-tag| 在多选模式下，移除Tag时触发（回调参数：移除的Tag对应的节点的值）
示例
HTML：
<tmt-form
ref="tmtForm"
@submit="submit"
label-width="auto"
:fields="formSet"
label-suffix="："
:status-icon="true"
>
</tmt-form>JS：
export default {
name: "App",
data() {
return {
password: "",
sexArr: [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
],
cityArr: [
{ label: "厦门市", value: 1 },
{ label: "漳州市", value: 2 },
],
groupCity: [
{
label: "热门城市",
options: [
{ label: "北京市", value: 1 },
{ label: "厦门市", value: 2 },
],
},
{
label: "城市名",
options: [
{ label: "上海市", value: 3 },
{ label: "南充市", value: 4 },
],
],
selectLoading: false,
};
},
created() {
this.$nextTick(() => {
let tmtForm = this.$refs.tmtForm;
tmtForm.setField("username", 123);
});
},
computed: {
formSet() {
let self = this;
return [
{
formType: "tmtText",
name: "username",
label: "用户名",
defaultValue: "西红柿炒番茄",
elProps: {
"prefix-icon": "el-icon-user-solid",
},
validate: [
{ required: true, message: "用户名不能为空", trigger: "blur" },
],
},
{
formType: "tmtText",
name: "password",
label: "密码",
defaultValue: "123123",
elProps: {
type: "password",
},
filedChange(val) {
console.log(val);
self.password = val;
},
validate: [
{ required: true, message: "密码不能为空", trigger: "blur" },
],
},
{
formType: "tmtText",
name: "password2",
label: "确认密码",
defaultValue: "123123",
elProps: {
type: "password",
},
validate: [
{ required: true, message: "用户名不能为空", trigger: "blur" },
{
validator(rule, value, callback) {
if (value != self.password) {
callback(new Error("两次密码不一致"));
} else {
callback(); // 验证通过必须调用回调
}
},
trigger: "blur",
},
],
},
{
formType: "tmtText",
name: "instr",
label: "简介",
defaultValue:'CTR+C，CTR+V工程师',
elProps: {
type: "textarea",
autosize: { minRows: 2, maxRows: 16 },
},
},
{
formType: "tmtText",
name: "numberInput",
label: "数字输入",
elProps: {
type: "number",
step: 3,
},
},
{
formType: "tmtUpload",
name: "file",
label: "图片上传",
elProps: {
fileList: [
{
name: "food.jpeg",
url:
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
},
{
name: "food2.jpeg",
url:
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
},
],
},
},
{
formType: "tmtSelect",
name: "groupSelect",
label: "分组选择",
defaultValue: 1,
elProps: {
options: self.groupCity,
group: true,
},
},
{
formType: "tmtSelect",
name: "diySelect",
label: "自定义远程搜索",
defaultValue: [1],
elProps: {
placeholder: "请选择",
options: self.cityArr,
loading: self.selectLoading,
filterable: true,
remote: true,
diyRender: true,
multiple: true,
clearable: true,
"allow-create": true,
"default-first-option": true,
render: function (row) {
return (
<div>
<span>{row.label}</span>
<span>{"-------->"}</span>
<span>{row.value}</span>
</div>
);
},
removeTag: function () {
console.log("标签移除");
},
focus: function () {
console.log("获取焦点");
},
change: function (val) {
console.log("选中值发生改变", val);
},
blur: function () {
console.log("失去焦点");
},
visibleChange: function () {
console.log("下拉框显示隐藏");
},
clear: function () {
console.log("清空选项");
},
"remote-method": function (query) {
console.log(query);
self.selectLoading = true;
setTimeout(() => {
self.selectLoading = false;
self.cityArr = [
{ label: "南充市", value: 3 },
{ label: "成都", value: 4 },
];
}, 1500);
},
},
},
{
formType: "tmtRate",
name: "rate",
label: "评分",
defaultValue: 4,
elProps: {
"show-score": true,
"text-color": "#ff9900",
"show-text": true,
},
},
{
defaultValue: "#000",
formType: "tmtColorPicker",
name: "color",
label: "颜色选择",
},
{
formType: "tmtRadio",
name: "sex",
label: "性别",
defaultValue:1,
elProps: {
fill: "#ff00ff",
"text-color": "#000000",
options: [
{
label: "男",
value: 1,
attrs: {
border: true,
},
},
{ label: "女", value: 2 },
],
},
},
{
formType: "tmtSwitch",
name: "switch",
label: "开关",
elProps: {
change: function (val) {
console.log("开关值改变", val);
},
},
},
{
formType: "tmtCheckBox",
name: "checkbox",
label: "复选框",
defaultValue:[2],
elProps: {
// checkBoxType: "button",
fill:'#000',
options: [
{
label: "复选框1",
value: 1,
attrs: {
disabled: true,
},
},
{
label: "复选框2",
value: 2,
attrs: {
// "true-label": "选中复选框",
},
},
{
label: "带边框复选框3",
value: 3,
attrs: {
border: true,
},
},
{
label: "默认选中5",
value: 5,
attrs: {
checked: true,
},
},
],
},
},
{
formType: "tmtTimePicker",
name: "timePicker1",
label: "时间选择",
defaultValue:[new Date(2021, 1, 25, 8, 40,30), new Date(2021, 1, 25, 9, 40,30)],
elProps: {
timeType:'timePicker',
placeholder: "请选择时间",
editable:false,
size:'mini',
'is-range':true,
'start-placeholder':'开始时间',
'end-placeholder':'结束时间',
'arrow-control':true,
'range-separator':'~',
"picker-options": {
selectableRange: "18:29:00 - 20:30:00",
format: 'hh:mm:ss'
},
},
},
{
formType: "tmtTimePicker",
defaultValue:'10:20',
name: "timePicker2",
label: "时间选择",
elProps: {
timeType: "timeSelect",
placeholder: "请选择时间",
"picker-options": {
start: '10:00',
end: '11:00',
step: '00:01'
},
},
},
{
formType:'tmtDate',
name:'date',
label:"日期选择带禁用",
defaultValue:new Date(),
elProps:{
placeholder:'请选择日期',
'value-format':'yyyy-MM-dd',
'picker-options':{
disabledDate(time){
//禁选大于今天的日期
return time>new Date()
}
}
}
},
{
formType:'tmtDate',
name:'daterange',
label:"日期选择带快捷项",
defaultValue:'2020-01-01',
elProps:{
'unlink-panels':true,
type:'daterange',
'picker-options':{
firstDayOfWeek:1,
shortcuts:[
{
text:'本月',
onClick(picker) {
let start = new Date()
picker.$emit('pick', [new Date(start.getFullYear(),start.getMonth(),1), new Date(start.getFullYear(),start.getMonth()+1,0)]);
}
},
{
text:'上个月',
onClick(picker) {
let start = new Date()
picker.$emit('pick', [new Date(start.getFullYear(),start.getMonth()-1,1), new Date(start.getFullYear(),start.getMonth(),0)]);
}
},
],
onPick({ maxDate, minDate }){
console.log(maxDate,minDate)
}
},
'start-placeholder':'起始时间',
'end-placeholder':'结束时间',
'value-format':'yyyy-MM-dd'
}
},
{
formType:'tmtDate',
name:'week',
label:"周选择",
elProps:{
type:'week',
size:'small',
placeholder:'请选择日期',
format:"yyyy 第 WW 周",
'value-format':'yyyy-MM-dd'
},
filedChange(val){
console.log('filedChange',val)
}
},
{
formType:'tmtDate',
name:'datetime',
label:'日期时间选择',
defaultValue:new Date(),
elProps:{
type:'datetime',
placeholder:'日期时间选择'
}
},
{
formType:'tmtDate',
name:'datetimerange',
label:'范围性日期时间',
defaultValue:['2020-12-31 10:30:30','2021-01-29 16:58:30'],
elProps:{
'start-placeholder':'起始日期时间',
'end-placeholder':'终止日期时间',
type:'datetimerange',
'value-format':'yyyy-MM-dd HH:mm:ss',
placeholder:'日期时间选择'
}
},
{
formType:'tmtDate',
name:'dates',
label:"多个日期选择",
elProps:{
placeholder:'请选择日期',
type:'dates',
size:'mini',
}
},
{
formType: "tmtSilder",
name: "slider",
label: "滑块",
defaultValue: 27,
elProps: {
"show-input": true,
"show-input-controls": true,
"input-size": "mini",
},
},
{
formType: "tmtSilder",
name: "sliderRange",
label: "范围性滑块",
defaultValue: [23,30],
elProps: {
'format-tooltip':function(value){
return value+'℃'
},
"show-input": true,
'show-stops':true,
"min":20,
"max":35,
marks:{
20:'20℃',
25:'25℃',
30:{
style:{
color:'#f59b78'
},
label:this.$createElement('strong','30℃')
},
35:{
style:{
color:'red'
},
label:this.$createElement('strong','35℃')
},
},
range:true,
"show-input-controls": true,
"input-size": "mini",
},
},
{
formType: "tmtInputNumber",
name: "number",
label: "数字输入框",
elProps: {
min: -1,
max: 20,
},
},
{
formType: "tmtCascader",
name: "cascader",
label: "多级联动",
filedChange(val){
console.log(val)
},
elProps: {
expandChange:function(){
console.log('展开节点')
},
props:{
lazy: true,
lazyLoad (node, resolve) {
const { value } = node;
setTimeout(() => {
let nodes = []
if(value==1){
nodes = [
{
label:'1-1',
value:'1-1',
leaf:true,
disabled:true
},
]
}else if(value==2){
nodes = [
{
label:'2-1',
value:'2-1',
leaf:true
},
{
label:'2-2',
value:'2-2',
leaf:true
},
]
}
resolve(nodes);
}, 1000);
}
},
clearable: true,
options: [
{
label: "一级",
value: 1,
children:[{
label:'选项一',
value:'选项一',
leaf:true
}]
},
{
label: "二级",
value: 2,
children:[{
label:'选项二',
value:'选项二',
leaf:true
}]
},
],
},
},
];
},
},
methods: {
submit(form) {
console.log(form);
},
},
};