# tmt-form
> tmt-form-->0.1.9版本
Latest version **0.1.12** (published 2021-02-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install tmt-form
pnpm add tmt-form
yarn add tmt-form
bun add tmt-form
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.12 |
| Published | 2021-02-03 |
| First published | 2020-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 4.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | tomato |
| Maintainers | xihongshiwidthtomato |
## Links
- npm: https://www.npmjs.com/package/tmt-form
- npm.io page: https://npm.io/package/tmt-form
## Dependencies (3)
- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [element-ui](https://npm.io/package/element-ui.md) ^2.13.2
## Recent versions
- 0.1.12 (latest) — 2021-02-03
- 0.1.11 — 2021-02-03
- 0.1.10 — 2021-02-03
- 0.1.9 — 2020-11-17
- 0.1.8 — 2020-11-02
- 0.1.7 — 2020-10-31
- 0.1.6 — 2020-10-28
- 0.1.3 — 2020-10-24
- 0.1.2 — 2020-10-23
- 0.1.1 — 2020-10-23
- 0.1.0 — 2020-10-23
## README
# 欢迎使用tmt-form
## 简介
本插件基于[Element](https://element.eleme.cn/#/zh-CN/component/input)进行二次封装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](https://element.eleme.cn/#/zh-CN/component/input)组件的属性 | `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 |
- ## 示例
- ```js
validate:[{required:true,message:'输入框值不能为空',trigger: 'blur'},
{
validator(rule,value,callback){
if(value.length<5){
callback(new Error('不能超过五个字符'))
}else{
callback()// 验证通过必须调用回调
}
},
trigger:'blur'
}
]
```
- `elProps` 添加相应组件的[Element](https://element.eleme.cn/#/zh-CN/component/input)属性
* 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 | [见日期格式](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
| 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：
```html
```
JS：
```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 (
{row.label}
{"-------->"}
{row.value}
);
},
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);
},
},
};
```
---
_Source: https://npm.io/package/tmt-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._