Commit 7b8018fb authored by 刘子康's avatar 刘子康

fix README.md

parent e7a6587c
# way-view-form # way-view-form
基于 iview 封装的 JSON To Form 表单组件,支持 Search 和 Form 两种模式 基于 iview 封装的 JSON To Form 表单组件,支持 Search 和 Form 两种模式
## Props ## Install
```bash
# 请先配置内网 npm 源 http://192.168.9.197:4873/
npm install way-view-form --save
```
## Usage
```js
// main.js
// ...引入vue和iview之后
// 引入组件库
import WayViewForm from 'way-view-form'
import 'way-view-form/dist/way-view-form.css'
Vue.use(WayViewForm)
```
## 参数说明
### Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------- | :---------------- | | :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------- | :---------------- |
...@@ -20,7 +40,7 @@ ...@@ -20,7 +40,7 @@
| action | 表单操作按钮配置选项 该属性用于定义表单操作按钮。可以包含 'submit' 提交按钮,'reset' 重置按钮以及其他自定义按钮。默认只包含一个 'submit' 提交按钮。 顺序敏感可调整按钮顺序 | Array | ['submit'] | - | | action | 表单操作按钮配置选项 该属性用于定义表单操作按钮。可以包含 'submit' 提交按钮,'reset' 重置按钮以及其他自定义按钮。默认只包含一个 'submit' 提交按钮。 顺序敏感可调整按钮顺序 | Array | ['submit'] | - |
| actionProps | 该属性用于定义表单操作按钮的配置。可以设置按钮的类型、大小、图标、文字等。默认为一个空对象。 | Object | {} | - | | actionProps | 该属性用于定义表单操作按钮的配置。可以设置按钮的类型、大小、图标、文字等。默认为一个空对象。 | Object | {} | - |
### form <Array> #### form <Array>
| 参数名称 | 类型 | 是否必选 | 说明 | | 参数名称 | 类型 | 是否必选 | 说明 |
| :--------------- | :------ | :------- | :----------------------------------------------------- | | :--------------- | :------ | :------- | :----------------------------------------------------- |
...@@ -37,7 +57,7 @@ ...@@ -37,7 +57,7 @@
| showName | object | | 显示在选项中的名称的键名 | | showName | object | | 显示在选项中的名称的键名 |
| showValue | object | | 选项值的键名 | | showValue | object | | 选项值的键名 |
#### rules <Array> ##### rules <Array>
| 参数名称 | 类型 | 是否必选 | 说明 | | 参数名称 | 类型 | 是否必选 | 说明 |
| :-------- | :------- | :------- | :----------------------------------------------------------------------------- | | :-------- | :------- | :------- | :----------------------------------------------------------------------------- |
...@@ -66,7 +86,7 @@ ...@@ -66,7 +86,7 @@
``` ```
#### source <Object> ##### source <Object>
| 参数名称 | 类型 | 是否必选 | 说明 | | 参数名称 | 类型 | 是否必选 | 说明 |
| :------- | :------- | :------- | :------------------------------------------- | | :------- | :------- | :------- | :------------------------------------------- |
...@@ -75,7 +95,7 @@ ...@@ -75,7 +95,7 @@
| handle | function | | 数据源的处理函数,第一个参数为接口返回的数据 | | handle | function | | 数据源的处理函数,第一个参数为接口返回的数据 |
| data | array | | 手动设置的数据源的数据 | | data | array | | 手动设置的数据源的数据 |
##### data <Array> ###### data <Array>
| 参数名称 | 类型 | 是否必选 | 说明 | | 参数名称 | 类型 | 是否必选 | 说明 |
| :------- | :----- | :------- | :---------------------- | | :------- | :----- | :------- | :---------------------- |
...@@ -98,7 +118,7 @@ ...@@ -98,7 +118,7 @@
]; ];
``` ```
### actionProps <Object> #### actionProps <Object>
| 参数名称 | 类型 | 是否必选 | 说明 | | 参数名称 | 类型 | 是否必选 | 说明 |
| :--------------- | :----- | :------- | :-------------------------------------------------- | | :--------------- | :----- | :------- | :-------------------------------------------------- |
...@@ -148,36 +168,36 @@ actionProps: { ...@@ -148,36 +168,36 @@ actionProps: {
}, },
``` ```
### formProps <Object> #### formProps <Object>
iview form 的全量配置 iview form 的全量配置
参考链接:https://v4.iviewui.com/components/form 参考链接:https://v4.iviewui.com/components/form
### formItemProps <Object> #### formItemProps <Object>
iview form-item 的全量配置 iview form-item 的全量配置
参考链接:https://v4.iviewui.com/components/form 参考链接:https://v4.iviewui.com/components/form
### footerRowProps <Object> #### footerRowProps <Object>
iview row 的全量配置 iview row 的全量配置
参考链接:https://v4.iviewui.com/components/grid 参考链接:https://v4.iviewui.com/components/grid
## 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
| :------- | :----------- | :------- | | :------- | :----------- | :------- |
| submit | 表单提交事件 | formData | | submit | 表单提交事件 | formData |
| reset | 表单重置事件 | | | reset | 表单重置事件 | |
### formData 参数 #### formData 参数
| 参数名称 | 说明 | 类型 | | 参数名称 | 说明 | 类型 |
| :--------- | :----------- | :------ | | :--------- | :----------- | :------ |
| valid | 是否通过校验 | boolean | | valid | 是否通过校验 | boolean |
| formvalues | 表单对象 | object | | formvalues | 表单对象 | object |
## 方法 ### 方法
| 方法名称 | 说明 | 参数 | 返回值 | | 方法名称 | 说明 | 参数 | 返回值 |
| :------------ | :----------- | :----------- | :----- | | :------------ | :----------- | :----------- | :----- |
...@@ -188,7 +208,7 @@ iview row 的全量配置 ...@@ -188,7 +208,7 @@ iview row 的全量配置
| updateSources | 更新数据源 | [key] | | | updateSources | 更新数据源 | [key] | |
| formRef | 获取表单实例 | | | | formRef | 获取表单实例 | | |
## 场景一:联动查询 ### 场景一:联动查询
```js ```js
...@@ -280,3 +300,8 @@ getDevices() { ...@@ -280,3 +300,8 @@ getDevices() {
this.$refs.queryForm.updateSources('equipmentId') this.$refs.queryForm.updateSources('equipmentId')
}, },
``` ```
## Feature
- [x] 抽离请求方法,支持配置source的getMethod/移除getMapData、getBusinessData内置依赖;
- [x] 剔除老旧项目中的css fix样式移到项目中;
\ No newline at end of file
<!doctype html><meta charset="utf-8"><title>way-view-form demo</title><script src="./way-view-form.umd.js"></script><link rel="stylesheet" href="./way-view-form.css"><script>console.log(way-view-form)</script>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
.my-custom-form{position:relative}.my-custom-form .ivu-form{padding:0}.my-custom-form .ivu-form-inline .ivu-form-item{width:200px!important}.my-custom-form .ivu-cascader{line-height:inherit}.my-custom-form .ivu-input-number-input-wrap{height:25px!important}.my-custom-form .ivu-input-number-handler-wrap{height:22px!important;top:2px}.my-custom-form .ivu-input-number{width:100%!important;background:none;border:0!important;border-radius:0!important;height:26px!important;line-height:24px!important}.my-custom-form .ivu-input-number-handler{height:11px}.my-custom-form .ivu-select-input{background-color:#041538!important;height:30px!important;color:#fff!important}.my-custom-form .ivu-input-word-count{background:none}.my-custom-form .ivu-input-type-textarea .ivu-input{height:auto!important}.my-custom-form-footer .ivu-btn{margin:0 5px}.my-form-spin-icon-load{animation:ani-form-spin 1s linear infinite}@keyframes ani-form-spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.my-custom-form-hide-label .ivu-form-item-label{display:none}.my-custom-search .ivu-form-item{margin-bottom:0}.my-custom-search .ivu-form-item-error .ivu-select-arrow{color:#808695}.my-custom-search .ivu-form-item-error-tip{display:none}.my-custom-form-buttons .ivu-btn{margin-right:10px}
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment