@tongfun/tf-widget 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -27
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,18 +4,18 @@
|
|
|
4
4
|
|
|
5
5
|
## 1. TfInput
|
|
6
6
|
|
|
7
|
-
此组件为ElementUi 组件二次封装，支持ElementUi
|
|
8
|
-
|
|
9
|
-
组件默认在el-form表单中使用，也可以在表单之外使用
|
|
7
|
+
- 此组件为ElementUi 组件二次封装，支持ElementUi控件所有属性
|
|
8
|
+
- 包含除了基础资料外的常见基本组件，提供统一的样式，和统一入口，基本配置
|
|
9
|
+
- 组件默认在el-form表单中使用，也可以在表单之外使用[需传入not-form属性]
|
|
10
10
|
|
|
11
11
|
### 1.1 基本使用
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
|
-
<el-form :model=
|
|
14
|
+
<el-form :model="form">
|
|
15
15
|
<!-- 文本输入框 -->
|
|
16
|
-
<TfInput v-model="form.
|
|
16
|
+
<TfInput v-model="form.test1" title="输入框" type="input" />
|
|
17
17
|
<!-- 文本输入框 input可以省略 -->
|
|
18
|
-
<TfInput v-model="form.
|
|
18
|
+
<TfInput v-model="form.test1" title="输入框" />
|
|
19
19
|
|
|
20
20
|
<!-- 文本域输入 -->
|
|
21
21
|
<TfInput v-model="form.test2" title="文本" type="textarea" />
|
|
@@ -29,27 +29,32 @@
|
|
|
29
29
|
<TfInput v-model="form.test5" title="整数" type="integer" />
|
|
30
30
|
<TfInput v-model="form.test6" title="小数" type="decimal" :percision='4' />
|
|
31
31
|
|
|
32
|
-
<!--
|
|
33
|
-
<!-- enumType/id 是获取选项的参数 可查看租户管理枚举配置中获取(或者联系后端) -->
|
|
32
|
+
<!-- enumType/id 是获取下拉选项的参数 可从租户管理枚举配置中获取(或者联系后端) -->
|
|
34
33
|
<TfInput v-model="form.test7" title="下拉选择框" type="select" enumType='UP_DOWN' />
|
|
35
34
|
<TfInput v-model="form.test7" title="下拉选择框" type="select" id='2022523' />
|
|
35
|
+
<!-- 下拉选择框 默认绑定的对象是 { name: null, id: null } 格式-->
|
|
36
|
+
<!-- 可以通过传入showFields修改格式 -->
|
|
37
|
+
<TfInput v-model="form.test7" title="下拉选择框" type="select" :show-fields="{ value: 'id', label: 'label' }" />
|
|
38
|
+
<!-- 支持自定义传入下拉数组options -->
|
|
39
|
+
<TfInput v-model="form.test7" title="下拉选择框" type="select" :options="optionList" />
|
|
36
40
|
|
|
37
|
-
|
|
38
|
-
<TfInput v-model="form.
|
|
41
|
+
<!--基础资料，需要提供code-->
|
|
42
|
+
<TfInput v-model="form.test8" title="基础资料" type="basicData" code="20220506141102" />
|
|
43
|
+
<!-- 基础资料遇见弹框嵌套问题时，传入append-to-body属性 -->
|
|
44
|
+
<TfInput v-model="form.test8" title="基础资料" type="basicData" code="20220506141102" append-to-body />
|
|
39
45
|
|
|
40
|
-
<!--基础资料展示字段
|
|
41
|
-
<TfInput v-model="form.
|
|
46
|
+
<!--基础资料展示字段 用于创建人，创建时间等永远不会被更改的基础资料字段，可以节省性能和内存-->
|
|
47
|
+
<TfInput v-model="form.test9" title="基础资料展示字段" type="basicDisplay" />
|
|
42
48
|
</el-form>
|
|
43
49
|
```
|
|
44
50
|
|
|
45
51
|
### 1.2 在表单中加入校验
|
|
46
52
|
|
|
47
|
-
|
|
53
|
+
使用方式与Element一致（添加prop属性）
|
|
48
54
|
|
|
49
55
|
```html
|
|
50
|
-
|
|
51
56
|
<el-form model="form" :rules="formRules">
|
|
52
|
-
<TfInput v-model="form.
|
|
57
|
+
<TfInput v-model="form.test1" title="输入框" prop="test" type="input"/>
|
|
53
58
|
<TfInput v-model="form.test2" title="文本" prop="test2" type="text"/>
|
|
54
59
|
<TfInput v-model="form.test3" title="日期" type="date"/>
|
|
55
60
|
<TfInput v-model="form.test4" title="日期时间" type="datetime"/>
|
|
@@ -58,13 +63,21 @@
|
|
|
58
63
|
</el-form>
|
|
59
64
|
```
|
|
60
65
|
|
|
61
|
-
### 1.3
|
|
66
|
+
### 1.3 Props
|
|
62
67
|
|
|
63
68
|
| 属性 | 作用 | 类型 | 默认值 |
|
|
64
69
|
| ---- | ---- | ---- | ---- |
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
70
|
+
| type | 控件类型 | input / select / integer / decimal / date /<br> datetime / basicData / basicDataDisplay | input |
|
|
71
|
+
| title | 表单模式下的label | string | |
|
|
72
|
+
| prop | 表单模式下校验绑定的字段 | string | |
|
|
73
|
+
| id | 用于type为select时获取下拉数组的参数 | string | |
|
|
74
|
+
| enumType | 用于type为select时获取下拉数组的参数 | string | |
|
|
75
|
+
| options | 用于type为select时自定义的下拉数组 | array | |
|
|
76
|
+
| show-fields | 用于type为select时自定义的下拉数据格式 | { value: string, label: string } | |
|
|
77
|
+
| append-to-body | 用于解决type为basicData引起的弹窗嵌套问题 | boolean | false |
|
|
78
|
+
| notForm | 为true时表示不在表单中使用，仅仅是使用控件，忽略prop title等属性 | boolean | false |
|
|
79
|
+
| labelWidth | elform中的label宽度 | string | 150px |
|
|
80
|
+
| fullBorder | 为true时表示input的边框完全显示，而非只显示下边框 | boolean | false |
|
|
68
81
|
|
|
69
82
|
### 1.4 其他说明
|
|
70
83
|
|
|
@@ -184,17 +197,21 @@ export default {
|
|
|
184
197
|
| showMessage | 编辑列的自定义显示值的方法 | Function | |
|
|
185
198
|
|
|
186
199
|
<br>
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
方式一：(限定范围，name = li 的数据)
|
|
200
|
+
|
|
201
|
+
#### limitation属性特别说明：
|
|
202
|
+
表体一行数据中，有省和市两个基础资料，选择了省后，市就只能选择该省下的所有的市
|
|
203
|
+
使用limitation的方式就是，首先市这个基础资料一定有一个字段，叫省，然后传入以下两种方式之一：
|
|
192
204
|
|
|
193
|
-
|
|
205
|
+
- 方式一：(province = '江苏' 的数据)
|
|
194
206
|
|
|
195
|
-
|
|
207
|
+
```
|
|
208
|
+
[{ field: 'province', type:'value', value:'江苏' }]
|
|
209
|
+
```
|
|
196
210
|
|
|
197
|
-
|
|
211
|
+
- 方式二：(取字段值，province = scope.row.province)
|
|
212
|
+
```
|
|
213
|
+
[{ field: 'province', type:'field', value:'province' }]
|
|
214
|
+
```
|
|
198
215
|
|
|
199
216
|
### 3.2 Event
|
|
200
217
|
| 方法名 | 作用 |
|