vue-form-craft 2.0.12 → 2.0.13
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/dist/{add-DP90UVIr.mjs → add-EoHoyHmQ.mjs} +1 -1
- package/dist/{alert-dXRwEshc.mjs → alert-k2rZ-pm2.mjs} +1 -1
- package/dist/{button-_ea1bKI-.mjs → button-9A6flrTc.mjs} +1 -1
- package/dist/{card-yqA3xOH3.mjs → card-l2TDXmyi.mjs} +1 -1
- package/dist/{cascader-64_XE1Lr.mjs → cascader-f8QsYkto.mjs} +1 -1
- package/dist/{checkbox-gWZDjKeV.mjs → checkbox-QUwlzHGM.mjs} +1 -1
- package/dist/{colorPicker-rIpgEj3r.mjs → colorPicker-x6N46_O2.mjs} +1 -1
- package/dist/{datePicker-Q4ZeH_td.mjs → datePicker-j8yNXBHs.mjs} +1 -1
- package/dist/{delete-2mJI3hAo.mjs → delete-xBVATMBo.mjs} +1 -1
- package/dist/{design-EpzhR7_F.mjs → design-x1NREnN9.mjs} +1 -1
- package/dist/{document-94IKbUdb.mjs → document-O73HbdUh.mjs} +1 -1
- package/dist/{formList-rTw2sM4s.mjs → formList-hPtEP4Ky.mjs} +1 -1
- package/dist/{github-IsPpXQFt.mjs → github-KoINobLU.mjs} +1 -1
- package/dist/{help-2yLjTQqg.mjs → help-749fhL2P.mjs} +1 -1
- package/dist/{index-UrnrR3LP.mjs → index-2tOJGL07.mjs} +1 -1
- package/dist/{index-VlMmUuCd.mjs → index-4wIoK2RV.mjs} +1 -1
- package/dist/{index-vV-nNQ5Z.mjs → index-M2pAYnZp.mjs} +1 -1
- package/dist/{index--00zTRxz.mjs → index-NVqZrKkn.mjs} +1 -1
- package/dist/{index-N5xQVnK7.mjs → index-VLqU2s7k.mjs} +1 -1
- package/dist/{index-zsI9yLU1.mjs → index-WbISJBFk.mjs} +1 -1
- package/dist/{index-viFI6uMN.mjs → index-bbmdPhh5.mjs} +1 -1
- package/dist/{index-27FNR-pw.mjs → index-hlA8jpbU.mjs} +1 -1
- package/dist/{index-eEMEq1Um.mjs → index-k-kmrmDd.mjs} +1 -1
- package/dist/{index-dQn2XzP9.mjs → index-n44sZXuD.mjs} +1 -1
- package/dist/{index-h78POgKw.mjs → index-p8r3iIzE.mjs} +1 -1
- package/dist/{index-0DXEHH9S.mjs → index-tLyNcnK8.mjs} +1 -1
- package/dist/{index-QCpUMg_h.mjs → index-xJCbZsUA.mjs} +1 -1
- package/dist/{inline-0hoXOTnR.mjs → inline-LgsKoZk8.mjs} +1 -1
- package/dist/{input-_mf6Q_v6.mjs → input-w22Mgu7d.mjs} +1 -1
- package/dist/{inputNumber-bNhWbz6Z.mjs → inputNumber-P71Xzdju.mjs} +1 -1
- package/dist/{itemGroup-UW9QklIk.mjs → itemGroup-F537CR5s.mjs} +1 -1
- package/dist/{jsonEdit-lIjTRdAG.mjs → jsonEdit-SFTAL9sz.mjs} +1 -1
- package/dist/{library-o6AXVDQ4.mjs → library-um2AxRlt.mjs} +1 -1
- package/dist/{markdown-SVqthGTN.mjs → markdown-WScJtLZn.mjs} +1 -1
- package/dist/md/FormDesignDoc.md +44 -0
- package/dist/md/globalConfig.md +22 -0
- package/dist/md/linkage.md +4 -3
- package/dist/md/lowCode.md +24 -0
- package/dist/md/schemaFormDoc.md +37 -104
- package/dist/{move-s3eziYhq.mjs → move-xFoKuPa4.mjs} +1 -1
- package/dist/{password-2h4fyt8J.mjs → password-smRUbj5j.mjs} +1 -1
- package/dist/{radio-bjUv5GbA.mjs → radio-i8Osy06n.mjs} +1 -1
- package/dist/{reduce-_ahjaCik.mjs → reduce-_8z_bJSl.mjs} +1 -1
- package/dist/{release-UfwBPR82.mjs → release-S-TGj6yv.mjs} +775 -771
- package/dist/{select-xhbLU7OH.mjs → select-6cxe4XOq.mjs} +1 -1
- package/dist/{switch-y3c6Skcf.mjs → switch-hPyM9jf5.mjs} +1 -1
- package/dist/{textarea-ZdcVvu5b.mjs → textarea-5BvvBb9l.mjs} +1 -1
- package/dist/vue-form-craft.mjs +1 -1
- package/dist/vue-form-craft.umd.js +10 -10
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { E as P, C as G, s as g, t as Q, b as _, g as k, d as E, L as U, i as z, j as q, f as A, k as F, a as C, I, e as N, N as L, n as x } from "./release-
|
|
1
|
+
import { E as P, C as G, s as g, t as Q, b as _, g as k, d as E, L as U, i as z, j as q, f as A, k as F, a as C, I, e as N, N as L, n as x } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const D = 1, Z = 201, u = 202, H = 203, m = 204, J = 205, B = 206, M = 207, K = 2, OO = 208, rO = 209, aO = 3, iO = 210, QO = 211, eO = 4, SO = 212, oO = 213, xO = 5, sO = 214, tO = 26, TO = 27, nO = 51, PO = 52, lO = 57, pO = 58, qO = 59, $O = 61, XO = 62, wO = 63, YO = 64, cO = 65, mO = 67, fO = 251, dO = 74, bO = 270, yO = 115, ZO = 133, uO = 154, WO = 155, VO = 158, t = 10, T = 13, Y = 32, l = 9, c = 35, RO = 40, vO = 46, f = 123, W = 39, V = 34, jO = 92, hO = /* @__PURE__ */ new Set([
|
|
4
4
|
TO,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { C as Z, E as k, s as N, t as $, b as Y, L as A, i as I, f as j, o as U, a as z, g as q } from "./release-
|
|
1
|
+
import { C as Z, E as k, s as N, t as $, b as Y, L as A, i as I, f as j, o as U, a as z, g as q } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const v = 1, D = 2, M = 3, B = 4, F = 5, J = 35, H = 36, L = 37, K = 11, ee = 13;
|
|
4
4
|
function te(e) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { i as J, c as ee, f as te, s as ae, t as i, L as re, a as ne, E as ie, b as se, d as oe, e as le, g as ce } from "./release-
|
|
1
|
+
import { i as J, c as ee, f as te, s as ae, t as i, L as re, a as ne, E as ie, b as se, d as oe, e as le, g as ce } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const de = 36, B = 1, me = 2, k = 3, C = 4, ue = 5, fe = 6, pe = 7, ge = 8, he = 9, _e = 10, be = 11, ve = 12, ye = 13, ke = 14, xe = 15, Oe = 16, we = 17, X = 18, Qe = 19, V = 20, $ = 21, R = 22, Se = 23, Ce = 24;
|
|
4
4
|
function q(t) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { s as P, t as r, r as i, L as q, a as g, b as c, m as R, p as l, E as p } from "./release-
|
|
1
|
+
import { s as P, t as r, r as i, L as q, a as g, b as c, m as R, p as l, E as p } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const b = 1, $ = 33, m = 34, v = 35, x = 36, W = /* @__PURE__ */ new p((O) => {
|
|
4
4
|
let e = O.pos;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { E as R, C as z, s as G, t as $, b as w, L as q, f as v, k as b, i as p, c as u, l as E, a as C } from "./release-
|
|
1
|
+
import { E as R, C as z, s as G, t as $, b as w, L as q, f as v, k as b, i as p, c as u, l as E, a as C } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const Y = 148, X = 149, V = 150, N = 1, F = 2, T = 3, I = 151, D = 152, k = 4, L = 5, K = 153, Z = 154, _ = 155, P = 156, h = 6, U = 7, A = 8, B = 9, c = 0, o = [
|
|
4
4
|
9,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { E as a, s as o, t as Q, b as Z, L as _, i as q, c as r, f as l, k as w, a as V } from "./release-
|
|
1
|
+
import { E as a, s as o, t as Q, b as Z, L as _, i as q, c as r, f as l, k as w, a as V } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const R = 1, g = 2, b = 3, y = 4, T = 5, s = 98, c = 101, v = 102, t = 114, p = 69, X = 48, W = 46, d = 43, f = 45, Y = 35, z = 34, x = 124, U = 60, h = 62;
|
|
4
4
|
function n(O) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { s as p, t as e, L as u, a as l, b as m, q as r, m as b, p as n, r as S } from "./release-
|
|
1
|
+
import { s as p, t as e, L as u, a as l, b as m, q as r, m as b, p as n, r as S } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const c = /* @__PURE__ */ m.deserialize({
|
|
4
4
|
version: 14,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { L as O, i as r, j as b, f as s, k as a, s as t, t as e, a as P, b as n } from "./release-
|
|
1
|
+
import { L as O, i as r, j as b, f as s, k as a, s as t, t as e, a as P, b as n } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const S = { __proto__: null, anyref: 34, dataref: 34, eqref: 34, externref: 34, i31ref: 34, funcref: 34, i8: 34, i16: 34, i32: 34, i64: 34, f32: 34, f64: 34 }, i = /* @__PURE__ */ n.deserialize({
|
|
4
4
|
version: 14,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { s as X, t as O, b as e, L as r, i as s, c as $, h as S, j as l, f as Z, k as Y, a as t } from "./release-
|
|
1
|
+
import { s as X, t as O, b as e, L as r, i as s, c as $, h as S, j as l, f as Z, k as Y, a as t } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const n = X({
|
|
4
4
|
null: O.null,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { s as r, t as O, L as i, i as n, c as $, f as y, k as P, l as X, a as m, b as c, E as S } from "./release-
|
|
1
|
+
import { s as r, t as O, L as i, i as n, c as $, f as y, k as P, l as X, a as m, b as c, E as S } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const s = 110, l = 1, f = 2, t = [
|
|
4
4
|
9,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { E as Y, s as S, t as Q, b as l, L as o, i as n, c as i, h as s, j as W, f as c, k as f, a as x } from "./release-
|
|
1
|
+
import { E as Y, s as S, t as Q, b as l, L as o, i as n, c as i, h as s, j as W, f as c, k as f, a as x } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const r = 1, Z = 2, V = 3, u = 82, p = 76, w = 117, q = 85, T = 97, y = 122, z = 65, b = 90, j = 95, a = 48, P = 34, v = 40, U = 41, d = 32, t = 62, _ = new Y((O) => {
|
|
4
4
|
if (O.next == p || O.next == q ? O.advance() : O.next == w && (O.advance(), O.next == a + 8 && O.advance()), O.next != u || (O.advance(), O.next != P))
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { E as S, s as o, t as $, b as t, L as l, i as x, c as W, j as R, f as V, k as r, m as U, a as v, p as u } from "./release-
|
|
1
|
+
import { E as S, s as o, t as $, b as t, L as l, i as x, c as W, j as R, f as V, k as r, m as U, a as v, p as u } from "./release-S-TGj6yv.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
const b = 1, m = 2, p = 263, k = 3, c = 264, s = 265, Y = 266, Z = 4, w = 5, _ = 6, h = 7, X = 8, j = 9, f = 10, G = 11, g = 12, E = 13, I = 14, N = 15, F = 16, C = 17, L = 18, A = 19, H = 20, K = 21, D = 22, B = 23, M = 24, J = 25, OO = 26, $O = 27, QO = 28, iO = 29, yO = 30, aO = 31, zO = 32, SO = 33, PO = 34, WO = 35, eO = 36, TO = 37, sO = 38, XO = 39, dO = 40, nO = 41, qO = 42, oO = 43, tO = 44, lO = 45, xO = 46, RO = 47, VO = 48, rO = 49, UO = 50, vO = 51, uO = 52, bO = 53, mO = 54, pO = 55, kO = 56, cO = 57, YO = 58, ZO = 59, wO = 60, _O = 61, e = 62, hO = 63, jO = 64, fO = 65, GO = {
|
|
4
4
|
abstract: Z,
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
## 简介
|
|
2
|
+
|
|
3
|
+
FormDesign 是 vue-form-craft 的可视化表单设计器组件。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
```vue
|
|
7
|
+
<template>
|
|
8
|
+
<form-design v-model="schema" @onSave="onSave" />
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script setup>
|
|
12
|
+
import { ref } from 'vue'
|
|
13
|
+
|
|
14
|
+
const schema = ref({
|
|
15
|
+
labelWidth: 150,
|
|
16
|
+
labelAlign: 'right',
|
|
17
|
+
size: 'default',
|
|
18
|
+
items: []
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
const onSave = () => {
|
|
22
|
+
console.log(schema.value)
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Props
|
|
29
|
+
|
|
30
|
+
| 参数名 | 类型 | 默认值 | 是否必传 | 描述 |
|
|
31
|
+
| -------------------- | ---------- | ------- | -------- | ----------------------------------------------------------- |
|
|
32
|
+
| v-model | object ref | ref({}) | No | 设计器的Schema，双向绑定 |
|
|
33
|
+
| previewSchemaContext | object | {} | No | **表单预览** 的自定义联动变量 |
|
|
34
|
+
| style | any | ——— | No | 设计器的style |
|
|
35
|
+
| class | any | ——— | No | 设计器的class |
|
|
36
|
+
| schemaId | String | ——— | No | 设计器会根据这个id，远程获取schema。需提前配置getSchema方法 |
|
|
37
|
+
|
|
38
|
+
## Events
|
|
39
|
+
|
|
40
|
+
| 事件名 | 类型 | 描述 |
|
|
41
|
+
| ------ | ------------ | ------------------ |
|
|
42
|
+
| onSave | schema=>void | 点击保存按钮时触发 |
|
|
43
|
+
|
|
44
|
+
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
## 全局配置
|
|
2
|
+
|
|
3
|
+
`vue-form-craft` 全局挂载的同时，可以传入一些全局配置
|
|
4
|
+
|
|
5
|
+
```vue
|
|
6
|
+
import { createApp } from 'vue'
|
|
7
|
+
import App from './App.vue'
|
|
8
|
+
import VueFormCraft from 'vue-form-craft'
|
|
9
|
+
import { request } from '@/utils'
|
|
10
|
+
|
|
11
|
+
const app = createApp(App)
|
|
12
|
+
|
|
13
|
+
app.use(VueFormCraft, { request }) //第二个参数为options
|
|
14
|
+
app.mount('#app')
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
可选的全局配置如下：
|
|
18
|
+
|
|
19
|
+
| 参数名 | 类型 | 默认值 | 是否必传 | 描述 |
|
|
20
|
+
| --------- | --------------------- | ------ | -------- | ------------------------------------------------------------------------------- |
|
|
21
|
+
| request | Function | axios | No | 所有组件请求接口的api方法，推荐传入二次封装后的axios实例 |
|
|
22
|
+
| getSchema | schemaId => `Promise` | ——— | No | 当`FormDesign`或`SchemaForm` 传入schemaId时，会调用此方法来尝试获取远程的schema |
|
package/dist/md/linkage.md
CHANGED
|
@@ -6,13 +6,14 @@
|
|
|
6
6
|
|
|
7
7
|
插值表达式为字符串格式，以双花括号 {{ ... }}为语法特征，对于简单的联动提供一种简洁的配置方式。
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
被双花括号包裹的字符串一律会被解析为 **js表达式并返回结果**，且只能使用联动变量。这种联动方式基本能应对百分之80以上的联动场景😎
|
|
10
|
+
|
|
11
|
+
例如：控制字段禁用、隐藏、文案提示等交互。
|
|
10
12
|
|
|
11
13
|
**Schema 所有协议字段都支持插值表达式。**
|
|
12
14
|
|
|
13
|
-
例如：控制字段禁用、隐藏、文案提示等交互。
|
|
14
15
|
|
|
15
|
-
> Schema插值表达式
|
|
16
|
+
> Schema插值表达式 可以使用的联动变量：
|
|
16
17
|
|
|
17
18
|
| 变量名 | 类型 | 描述 |
|
|
18
19
|
| ----------- | ------ | ------------------------------- |
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
## 低代码开发方案
|
|
2
|
+
|
|
3
|
+
将 `vue-form-craft` 接入vue3项目后，推荐两种高效率的低代码开发方案。
|
|
4
|
+
|
|
5
|
+
### 方案一
|
|
6
|
+
|
|
7
|
+
这种属于轻量级使用方案，就是前端使用 `FormDesign` 做一个 **表单设计器** 的页面，对内开放，专门用来设计表单。
|
|
8
|
+
|
|
9
|
+
```vue
|
|
10
|
+
//FormDesign.vue
|
|
11
|
+
<template>
|
|
12
|
+
<form-design />
|
|
13
|
+
</template>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
遇到表单的需求，前端开发的同学就来到这个页面拖拉拽搞出一个表单，然后导出json写到代码中，最后再用 `SchemaForm` 组件渲染出来就可以了。
|
|
17
|
+
|
|
18
|
+
### 方案二
|
|
19
|
+
|
|
20
|
+
这是作者比较推荐的一个方案。表单管理模式，需要后端同学配合，数据库建一张表用于存储前端的所有表单。
|
|
21
|
+
|
|
22
|
+
前端开发一套 **表单管理 + 表单设计** 页面。表单管理页面具有增删改查的功能，新增或修改表单就跳转到表单设计页面，直接在线修改即可，无需再改前端代码和部署发版什么的，非常方便。
|
|
23
|
+
|
|
24
|
+
使用表单也非常方便。 `SchemaForm` 和 `FormDesign`都支持配置一个schemaId参数，组件会根据`schemaId`再调用全局`getSchema`方法，去向后端查询表单。做到真正的低代码
|
package/dist/md/schemaFormDoc.md
CHANGED
|
@@ -2,43 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
SchemaForm 是 vue-form-craft 的渲染组件。
|
|
4
4
|
|
|
5
|
-
## Props
|
|
6
|
-
|
|
7
|
-
| 参数名 | 类型 | 默认值 | 是否必传 | 描述 |
|
|
8
|
-
| ------------- | ---------- | ------- | -------- | -------------------------------------- |
|
|
9
|
-
| schema | object | -- | Yes | 表单JSON配置，用于描述表单结构 |
|
|
10
|
-
| v-model | object ref | ref({}) | No | 表单数据对象，用于控制表单值，双向绑定 |
|
|
11
|
-
| schemaContext | object | {} | No | 自定义的上下文对象，用于表单联动 |
|
|
12
|
-
| disabled | Boolean | false | No | 禁用所有表单项 |
|
|
13
|
-
|
|
14
|
-
## Events
|
|
15
|
-
|
|
16
|
-
| 事件名 | 类型 | 描述 |
|
|
17
|
-
| -------- | ------------ | ---------------- |
|
|
18
|
-
| onSubmit | values=>void | 表单提交时触发 |
|
|
19
|
-
| onChange | values=>void | 表单值改变时触发 |
|
|
20
|
-
|
|
21
|
-
## Exposes
|
|
22
|
-
|
|
23
|
-
>组件暴露出的方法，通过ref调用
|
|
24
|
-
|
|
25
|
-
| 名称 | 类型 | 描述 |
|
|
26
|
-
| ------------- | --------------------- | -------------------------------------- |
|
|
27
|
-
| submit | ()=>Promise\<values\> | 提交表单，会先触发校验 |
|
|
28
|
-
| validate | ()=>Promise | 校验表单 |
|
|
29
|
-
| reset | ()=>void | 重置表单 |
|
|
30
|
-
| getFormValues | ()=>void | 获取表单值 |
|
|
31
|
-
| setFormValues | (values)=>void | 修改表单值，常用于表单回显 |
|
|
32
|
-
| selectData | Array | 选择类型的组件，已选项对应的数据源集合 |
|
|
33
|
-
| context | {} | 表单上下文集合 |
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
## 示例
|
|
37
|
-
|
|
38
|
-
### 读写表单数据 两种
|
|
39
|
-
|
|
40
|
-
>示例一：传递v-model，然后对表单值的读写直接修改它即可，这种更容易理解
|
|
41
|
-
|
|
42
5
|
```vue
|
|
43
6
|
<template>
|
|
44
7
|
<schema-form v-model="formValues" :schema="schema" ref="formRef" />
|
|
@@ -46,11 +9,14 @@ SchemaForm 是 vue-form-craft 的渲染组件。
|
|
|
46
9
|
</template>
|
|
47
10
|
|
|
48
11
|
<script setup>
|
|
49
|
-
import {
|
|
12
|
+
import { ref } from 'vue'
|
|
50
13
|
|
|
51
14
|
const formRef = ref()
|
|
52
15
|
|
|
53
|
-
const formValues = ref({
|
|
16
|
+
const formValues = ref({
|
|
17
|
+
title: 'test',
|
|
18
|
+
desc: '这是一个简单基本的描述'
|
|
19
|
+
})
|
|
54
20
|
|
|
55
21
|
const schema = {
|
|
56
22
|
labelWidth: 150,
|
|
@@ -65,7 +31,7 @@ const schema = {
|
|
|
65
31
|
},
|
|
66
32
|
onlyId: 'form-eNR0',
|
|
67
33
|
name: 'title',
|
|
68
|
-
|
|
34
|
+
required: true
|
|
69
35
|
},
|
|
70
36
|
{
|
|
71
37
|
label: '描述',
|
|
@@ -74,19 +40,11 @@ const schema = {
|
|
|
74
40
|
placeholder: '请输入描述'
|
|
75
41
|
},
|
|
76
42
|
onlyId: 'form-D1x7',
|
|
77
|
-
name: 'desc'
|
|
78
|
-
required: true
|
|
43
|
+
name: 'desc'
|
|
79
44
|
}
|
|
80
45
|
]
|
|
81
46
|
}
|
|
82
47
|
|
|
83
|
-
onMounted(() => {
|
|
84
|
-
//模拟表单值回显
|
|
85
|
-
setTimeout(() => {
|
|
86
|
-
formValues.value = { ...form.value, title: '测试标题', desc: '这是一个描述' }
|
|
87
|
-
}, 1000)
|
|
88
|
-
})
|
|
89
|
-
|
|
90
48
|
const handleSubmit = () => {
|
|
91
49
|
formRef.value
|
|
92
50
|
.submit()
|
|
@@ -96,73 +54,48 @@ const handleSubmit = () => {
|
|
|
96
54
|
.catch((e) => console.log(e))
|
|
97
55
|
}
|
|
98
56
|
</script>
|
|
99
|
-
|
|
100
57
|
```
|
|
101
58
|
|
|
102
|
-
|
|
59
|
+
## Props
|
|
103
60
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
61
|
+
| 参数名 | 类型 | 默认值 | 是否必传 | 描述 |
|
|
62
|
+
| ------------- | ---------- | ------- | -------- | ----------------------------------------------------------- |
|
|
63
|
+
| schema | object | -- | No | 表单Schema配置，纯JSON，用于描述表单结构 |
|
|
64
|
+
| v-model | object ref | ref({}) | No | 表单数据对象，用于控制表单值，双向绑定 |
|
|
65
|
+
| schemaContext | object | {} | No | 自定义的联动变量 |
|
|
66
|
+
| disabled | Boolean | false | No | 禁用所有表单项 |
|
|
67
|
+
| style | any | ——— | No | 渲染器的style |
|
|
68
|
+
| class | any | ——— | No | 渲染器的class |
|
|
69
|
+
| schemaId | String | ——— | No | 渲染器会根据这个id，远程获取schema。需提前配置getSchema方法 |
|
|
109
70
|
|
|
110
|
-
<script setup>
|
|
111
|
-
import { onMounted, ref } from 'vue'
|
|
112
71
|
|
|
113
|
-
|
|
72
|
+
## Events
|
|
114
73
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
items: [
|
|
120
|
-
{
|
|
121
|
-
label: '标题',
|
|
122
|
-
component: 'input',
|
|
123
|
-
props: {
|
|
124
|
-
placeholder: '请输入标题'
|
|
125
|
-
},
|
|
126
|
-
onlyId: 'form-eNR0',
|
|
127
|
-
name: 'title',
|
|
128
|
-
initialValue: 10
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
label: '描述',
|
|
132
|
-
component: 'textarea',
|
|
133
|
-
props: {
|
|
134
|
-
placeholder: '请输入描述'
|
|
135
|
-
},
|
|
136
|
-
onlyId: 'form-D1x7',
|
|
137
|
-
name: 'desc',
|
|
138
|
-
required: true
|
|
139
|
-
}
|
|
140
|
-
]
|
|
141
|
-
}
|
|
74
|
+
| 事件名 | 类型 | 描述 |
|
|
75
|
+
| -------- | ------------ | ---------------- |
|
|
76
|
+
| onSubmit | values=>void | 表单提交时触发 |
|
|
77
|
+
| onChange | values=>void | 表单值改变时触发 |
|
|
142
78
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
79
|
+
## Exposes
|
|
80
|
+
|
|
81
|
+
>组件暴露出的方法，通过ref调用
|
|
82
|
+
|
|
83
|
+
| 名称 | 类型 | 描述 |
|
|
84
|
+
| ------------- | --------------------- | -------------------------------------- |
|
|
85
|
+
| submit | ()=>Promise\<values\> | 提交表单，会先触发校验 |
|
|
86
|
+
| validate | ()=>Promise | 校验表单 |
|
|
87
|
+
| reset | ()=>void | 重置表单 |
|
|
88
|
+
| getFormValues | ()=>void | 获取表单值 |
|
|
89
|
+
| setFormValues | (values)=>void | 修改表单值，常用于表单回显 |
|
|
90
|
+
| selectData | Array | 选择类型的组件，已选项对应的数据源集合 |
|
|
91
|
+
| context | {} | 表单的联动变量 |
|
|
149
92
|
|
|
150
|
-
const handleSubmit = () => {
|
|
151
|
-
formRef.value
|
|
152
|
-
.submit()
|
|
153
|
-
.then((values) => {
|
|
154
|
-
alert(JSON.stringify(values))
|
|
155
|
-
})
|
|
156
|
-
.catch((e) => console.log(e))
|
|
157
|
-
}
|
|
158
|
-
</script>
|
|
159
93
|
|
|
160
|
-
```
|
|
161
94
|
|
|
162
95
|
|
|
163
|
-
|
|
96
|
+
## 提交表单
|
|
164
97
|
|
|
165
|
-
|
|
98
|
+
提交表单，会先触发表单的校验，校验通过才会执行onSubmit回调。下面是两个示例：
|
|
166
99
|
|
|
167
100
|
>示例一：通过ref去调用组件暴露的submit方法，好处是可以让你指定任何元素去触发表单提交
|
|
168
101
|
```vue
|