|
|
@@ -1,37 +1,43 @@
|
|
|
# 组件说明文档
|
|
|
+#### form.vue
|
|
|
+##### props
|
|
|
+###### fields
|
|
|
+>Array类型 必填
|
|
|
+>>
|
|
|
+|参数|类型|默认值|是否必填|说明|
|
|
|
+|:-:|:-:|:-:|:-:|:-:|
|
|
|
+|label|String|`-`|是|显示的字段中文|
|
|
|
+|type|String|input|否|这个字段要用什么类型来输出 input的基本类型+date,datetime|
|
|
|
+|required|Boolean|`-`|否|是否必须输入|
|
|
|
+|model|String|`-`|是|字段名|
|
|
|
+|placeholder|String|`-`|否|占位,正常用,只是个透传|
|
|
|
+|options|object|`-`|否|标签的属性设置,例如:textarea 需要显示剩余字数,或者input限制长度,都往这里写,key-value形式(键值对,json的基本了解,不知道百度,具体属性看你具体用那个组件,那个组件有什么属性,瞎写不一定好使)|
|
|
|
|
|
|
-* form.vue:
|
|
|
- * props: {
|
|
|
- * fields:字段列表
|
|
|
- |参数|类型|默认值|说明|
|
|
|
- |:-:|:-:||:-:||:-:|
|
|
|
- |label|string|null|显示的字段中文
|
|
|
- * label: String 显示的字段中文
|
|
|
- * type: String 这个字段要用什么类型来输出 input的基本类型+date,datetime(需要安装vantUI)
|
|
|
- * required: Boolean 是否必须输入
|
|
|
- * model: 必填 String 字段名
|
|
|
- * placeholder: String 占位,正常用,只是个透传
|
|
|
- * options: Object 标签的属性设置,例如:textarea 需要显示剩余字数,或者input限制长度,都往这里写,key-value形式(键值对,json的基本了解,不知道百度,具体属性看你具体用那个组件,那个组件有什么属性,瞎写不一定好使)
|
|
|
- * custom: Boolean 是否自定义
|
|
|
- * list: Array 我定义这个属性一般不是直接写在 data语块 中的,而是下面有方法处理过后合并进fields的指定的object中,用来给选择提供选项,必须是{name:XX,value:xxx}形式
|
|
|
- * rules: Object 规则 不会找el-form的例子,不过使用的async-validator这个依赖为基础,会写这个也可以(那就厉害了,反正我是不行)
|
|
|
- * isNew: Boolean default=*true 用来看是不是修改,不过现在还没做修改部分,还没用呢
|
|
|
- * data: null,什么类型都行,原数据
|
|
|
- }
|
|
|
- slot: {
|
|
|
- type为
|
|
|
- * select => 选项统一写在options插槽中,多个select的情况需要区分是谁的options
|
|
|
- * radio => 选项统一写在radios插槽中,多个则需要区分
|
|
|
- * checkbox => 统一写在checkboxs插槽中,多个需要区分
|
|
|
- * custom => 自定义插槽,完全自己去写
|
|
|
+###### rules
|
|
|
+> object类型 非必填 校验规则,不会找el-form的例子,不过使用的async-validator这个依赖为基础,会写这个也可以(那就厉害了,反正我是不行)
|
|
|
|
|
|
- }
|
|
|
+###### isNew
|
|
|
+> Boolean类型 default=>true 用来看是不是修改
|
|
|
|
|
|
- * 关于自定义的用法:
|
|
|
- * 在fields中,custom:true的情况即需要自定义,写法如下
|
|
|
- * `<template #custom="{ item, form, fieldChange }"> ... </template>`
|
|
|
- 其中
|
|
|
- * item:fields循环的每一项
|
|
|
- * form:组件内部表单的数据空间(挺抽象的,不过就是随便调用form.[props]可以用你输入过的值来判断什么的.具体怎么形容我也不太会,谁要是看到了可以告诉我下,或者我给谁讲讲到时候再整理下这个地方)
|
|
|
- * fieldChange:改了,改完了将数据整理成{model:XXX,value:XXX}的形式传回去更新,应该需要吧
|
|
|
- * 如果有多处需要自定义,那就在这个template中再加入template,去判断你怎么显示
|
|
|
+###### data
|
|
|
+> 任意类型 原数据
|
|
|
+
|
|
|
+##### slot
|
|
|
+>
|
|
|
+|插槽名|说明|
|
|
|
+|:-:|:-:|
|
|
|
+|options|fields中type为select的,选项都写在这个插槽中,多个select则需要区分options所属问题|
|
|
|
+|radios|fields中type为radio的,选项都写在这个插槽中,多个radio则需要区分radios所属问题|
|
|
|
+|checkbox|fields中type为checkbox的,选项都写在这个插槽中,多个checkbox则需要区分checkboxs所属问题|
|
|
|
+|custom|自定义插槽,完全自己去写|
|
|
|
+>>关于自定义的用法:
|
|
|
+>>在fields中,custom:true的情况即需要自定义,写法如下
|
|
|
+
|
|
|
+>>`<template #custom="{ item, form, fieldChange }"> ... </template>`
|
|
|
+>>
|
|
|
+|参数名|说明|
|
|
|
+|:-:|:-:|
|
|
|
+|item|fields循环出来的每一项|
|
|
|
+|form|组件内部的表单|
|
|
|
+|fieldChange|组件内部的修改方法|
|
|
|
+**如果有多处需要自定义,请区分开去写**
|
