10 |
23 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
11 |
14 | 简洁至上
12 |通过标准JSON Schema & Ajv Validator生成复杂的动态表单及校验，快速、简洁、高效。
13 |
15 |
18 | 可复用性
16 |通过JSON的形式生成表单模板，一份表单简单修改即可多处复用！使您能够快速开发表单页面，相比编写传统的html form表单，使用JSON形式定义表单能够极大的提高了开发效率。
17 |
19 |
22 | Vue 驱动
20 |目前支持Vue 2.x & Ant Design of Vue v1，Vue 2.x和Vue 3.x的其他UI库（AntDv v3，ElementUI等）支持正在开发中。。。
21 |
10 |
23 |
--------------------------------------------------------------------------------
/src/examples/ant-design-vue.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import {
3 | Card,
4 | Button,
5 | FormModel,
6 | Tooltip,
7 | Icon,
8 | Input,
9 | Row,
10 | Col,
11 | Switch,
12 | AutoComplete,
13 | Select,
14 | Checkbox,
15 | DatePicker,
16 | InputNumber,
17 | Menu,
18 | Layout,
19 | Breadcrumb,
20 | TimePicker,
21 | Radio,
22 | Rate,
23 | Tag,
24 | Slider,
25 | Space,
26 | Divider,
27 | Spin,
28 | Upload,
29 | Cascader,
30 | } from "ant-design-vue";
31 |
32 | Vue.use(Card);
33 | Vue.use(Button);
34 | Vue.use(FormModel);
35 | Vue.use(Tooltip);
36 | Vue.use(Icon);
37 | Vue.use(Input);
38 | Vue.use(Row);
39 | Vue.use(Col);
40 | Vue.use(Switch);
41 | Vue.use(AutoComplete);
42 | Vue.use(Select);
43 | Vue.use(Checkbox);
44 | Vue.use(DatePicker);
45 | Vue.use(InputNumber);
46 | Vue.use(Menu);
47 | Vue.use(Layout);
48 | Vue.use(Breadcrumb);
49 | Vue.use(TimePicker);
50 | Vue.use(Radio);
51 | Vue.use(Slider);
52 | Vue.use(Rate);
53 | Vue.use(Tag);
54 | Vue.use(Spin);
55 | Vue.use(Space);
56 | Vue.use(Divider);
57 | Vue.use(Upload);
58 | Vue.use(Cascader);
59 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import { nodeResolve } from "@rollup/plugin-node-resolve";
3 | import vue from "rollup-plugin-vue";
4 | import babel from "@rollup/plugin-babel";
5 | import commonjs from "@rollup/plugin-commonjs";
6 | import alias from "@rollup/plugin-alias";
7 | import postcss from "rollup-plugin-postcss";
8 | import { uglify } from "rollup-plugin-uglify";
9 |
10 | const config = {
11 | input: "./src/formly.js",
12 | output: {
13 | file: "./lib/v-formly.umd.js",
14 | exports: "named",
15 | format: "umd",
16 | name: "v-formly",
17 | globals: {
18 | vue: "Vue",
19 | },
20 | },
21 | external: ["ajv", "vue", "core-js", "ant-design-vue", /@babel\/runtime/],
22 | plugins: [
23 | nodeResolve(),
24 | postcss(),
25 | vue(),
26 | alias({
27 | entries: {
28 | ["@"]: path.resolve(__dirname, "src"),
29 | },
30 | }),
31 | babel({
32 | exclude: "**/node_modules/**",
33 | babelHelpers: "runtime",
34 | }),
35 | commonjs(),
36 | uglify(),
37 | ],
38 | };
39 |
40 | export default config;
41 |
--------------------------------------------------------------------------------
/src/meta/object.meta.js:
--------------------------------------------------------------------------------
1 | class ObjectMeta {
2 | constructor(state, id, meta) {
3 | this.state = state;
4 | this.id = id;
5 | this.meta = meta;
6 | this.childMetaPairs = this.buildChildMetaPairs(id, meta);
7 |
8 | state.context.addContext(id, this);
9 | }
10 |
11 | set value(val) {
12 | this.childMetaPairs.forEach(({ key, propertyName }) => {
13 | const ctx = this.state.context.getContext(key);
14 | ctx.value = (val || {})[propertyName];
15 | });
16 | }
17 |
18 | /**
19 | * 构造结构数据给Object循环使用
20 | * @param {String} id 每个组件实例的唯一id，构造成json-schema中的`instancePath + '/' + params.missingProperty`
21 | * @param {Object} meta json-schema的某个层级的schema
22 | * @returns 返回构造后的数据给Object使用
23 | */
24 | buildChildMetaPairs(id, meta) {
25 | let results = [];
26 | for (let [key, value] of Object.entries(meta.properties || {})) {
27 | let keyVal = id === "/" ? `/${key}` : `${id}/${key}`;
28 | results.push({ key: keyVal, propertyName: key, meta: value });
29 | }
30 |
31 | return results;
32 | }
33 | }
34 |
35 | export { ObjectMeta };
36 |
--------------------------------------------------------------------------------
/src/examples/components/chk-input/ChkInput.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
14 | Simplicity First
12 |Generate complex dynamic forms and validations through standard JSON Schema & Ajv Validator, fast, concise and efficient.
13 |
15 |
18 | Reusability
16 |The form template is generated in the form of JSON, which can be reused in multiple places by simply modifying it! It enables you to quickly develop form pages. Compared with writing traditional html forms, using JSON defined forms can greatly improve development efficiency.
17 |
19 |
22 | Vue-Powered
20 |Currently support for Vue 2.x & Ant Design of Vue v1, other UI libraries (AntDv v3, ElementUI, etc.) support for Vue 2.x and Vue 3.x are under development. . .
21 |
14 |
17 |
18 |
3 |
7 | 水平
8 | 垂直
9 | 行内
10 |
11 |
12 |
13 |
14 |
56 |
57 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # v-formly
2 |
3 | [v-formly](https://kevinzhang19870314.github.io/v-formly/zh/) 是 vue 的动态（JSON 驱动）表单库。
4 |
5 | **Vue 3版本的请移步这里[v-formly-v3](https://github.com/KevinZhang19870314/v-formly-v3)**
6 |
7 |
8 |
21 |
22 | ## 快速开始
23 |
24 | ### 文档 & Demo
25 |
26 | [文档](https://kevinzhang19870314.github.io/v-formly/zh/)
27 |
28 | [Stackblitz](https://stackblitz.com/edit/github-gr9ozc?file=src%2FApp.vue&terminal=serve)
29 |
30 | [CodeSandbox](https://codesandbox.io/s/blazing-sun-gtvwwz)
31 |
32 | ### 安装
33 |
34 | 使用`yarn`安装`v-formly`：
35 |
36 | ```sh
37 | yarn add v-formly
38 | ```
39 |
40 | 或者使用`npm`安装它：
41 |
42 | ```sh
43 | npm i v-formly --save
44 | ```
45 |
46 | ### 使用
47 |
48 | ```js
49 | // 别忘了引入Ant Design of Vue 1.7.8，v-formly当前只支持这个版本。
50 |
51 | import VFormly from "v-formly";
52 |
53 | // ...
54 | Vue.use(VFormly);
55 | // ...
56 | ```
57 |
58 | ## 其他
59 |
60 | 不论是学习还是使用 v-formly，有任何问题可以添加 QQ 群：610930944，我们为你解答关于使用 v-formly 过程中的的任何疑难杂症！
61 |
62 | 暗号：v-formly
63 |
64 |
9 |
12 | 简洁至上
10 |通过标准JSON Schema & Ajv Validator生成复杂的动态表单及校验，快速、简洁、高效。
11 |
13 |
16 | 可复用性
14 |通过JSON的形式生成表单模板，一份表单简单修改即可多处复用！使您能够快速开发表单页面，相比编写传统的html form表单，使用JSON形式定义表单能够极大的提高了开发效率。
15 |
17 |
20 | Vue 驱动
18 |目前支持Vue 2.x & Ant Design of Vue v1，Vue 2.x和Vue 3.x的其他UI库（AntDv v3，ElementUI等）支持正在开发中。。。
19 |
65 |
66 | MIT Licensed | Copyright © 2022-present v-formly
67 |
--------------------------------------------------------------------------------
/src/examples/views/PasswordView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
11 |
62 |
63 |
--------------------------------------------------------------------------------
/src/components/Boolean.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 | 重置
6 | 提交
7 |
8 |
3 |
4 |
9 |
10 |
11 |
60 |
--------------------------------------------------------------------------------
/docs/guide/layout.md:
--------------------------------------------------------------------------------
1 | # 布局
2 |
3 | v-formly 表单支持三种布局，水平`horizontal`,垂直`vertical`,行内`inline`。
4 |
5 | ## 代码演示
6 |
7 | ::: demo
8 |
9 | ```vue
10 |
11 |
5 | 重置
6 | 提交
7 |
8 |
12 |
16 | 水平
17 | 垂直
18 | 行内
19 |
20 |
21 |
22 |
23 |
24 |
66 |
67 | ```
68 |
69 | :::
70 |
--------------------------------------------------------------------------------
/src/examples/views/HomeView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
11 |
66 |
67 |
--------------------------------------------------------------------------------
/src/components/Rate.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 | 重置
6 | 提交
7 |
8 |
3 |
4 |
9 |
10 |
11 |
65 |
66 |
--------------------------------------------------------------------------------
/src/components/Radio.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 | 重置
6 | 提交
7 |
8 |
3 |
4 |
9 |
10 |
11 |
69 |
70 |
--------------------------------------------------------------------------------
/src/components/Textarea.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 | 重置
6 | 提交
7 |
8 |
3 |
8 |
9 |
10 | {{ meta.title }}
11 |
12 |
13 |
14 |
25 |
26 |
27 |
57 |
62 |
--------------------------------------------------------------------------------
/src/meta/base.meta.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import { FORM_VALUE_CHANGE } from "@/utils/consts.js";
3 |
4 | class BaseMeta {
5 | constructor(state, id, meta) {
6 | if (this.constructor == BaseMeta) {
7 | throw new Error("Abstract classes can't be instantiated.");
8 | }
9 |
10 | this.id = id;
11 | this.state = state;
12 | this.meta = meta;
13 | this.type = (this.meta.ui && this.meta.ui.component) || this.meta.type;
14 | this.ui = Object.assign({}, this.state.ui, this.meta.ui);
15 |
16 | // TODO:可能需要一个getter/setter，setter需要判断是否有错误，有错误才设置上去
17 | this.error = undefined;
18 | state.context.addContext(id, this);
19 | this._value = undefined;
20 |
21 | this._initMetaValue = this.getInitMetaValue();
22 | this.initValue();
23 | }
24 |
25 | initValue() {
26 | if (this._initMetaValue) {
27 | this.value = this._initMetaValue;
28 | } else if (this.meta.default) {
29 | this.value = this.meta.default;
30 | }
31 | }
32 |
33 | setValue(val) {
34 | this._value = val || undefined;
35 | }
36 |
37 | get value() {
38 | return this._value;
39 | }
40 |
41 | set value(val) {
42 | if (this._value === val) return;
43 |
44 | this.setValue(val);
45 |
46 | Vue.bus.emit(`${FORM_VALUE_CHANGE}-${this.state._formId}`, {
47 | id: this.id,
48 | value: this._value,
49 | });
50 |
51 | this.state.updateObjProp(this.state.formData, this.id, this._value);
52 | this.state.validate.runValidationFormItem(this);
53 | }
54 |
55 | /**
56 | * v-formly 中通过v-model传入的组件初始值
57 | * @returns 组件初始值
58 | */
59 | getInitMetaValue() {
60 | const props = this.id.split("/").filter((f) => f);
61 | let curVal = "";
62 | props.reduce((acc, key, idx) => {
63 | if (idx === props.length - 1) {
64 | curVal = acc[key];
65 | }
66 |
67 | return acc[key] || {};
68 | }, this.state.formData);
69 |
70 | return curVal;
71 | }
72 | }
73 |
74 | // 注意：此类为基类，不能直接实例化
75 | export { BaseMeta };
76 |
--------------------------------------------------------------------------------
/src/components/String.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
11 |
77 |
78 |
--------------------------------------------------------------------------------
/src/components/Checkbox.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | 重置
7 | 提交
8 |
9 |
12 |
13 |
18 |
19 |
20 |
79 |
80 | ```
81 |
82 | :::
83 |
84 | ## API
85 |
86 | **我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档**
87 |
88 | 对象组件是一个包裹组件，包裹着诸如`string`，`number`等类型的组件，所以API请参考具体包裹组件即可。
89 |
--------------------------------------------------------------------------------
/src/components/Object.vue:
--------------------------------------------------------------------------------
1 |
2 |
14 | 重置
15 | 提交
16 |
17 |
3 |
4 |
5 |
10 |
11 |
12 |
80 |
81 |
--------------------------------------------------------------------------------
/src/examples/views/CustomValidatorView.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | change enum
7 | 提交
8 |
9 |
3 |
4 |
5 |
9 |
10 |
79 |
80 |
--------------------------------------------------------------------------------
/src/examples/views/DateView.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | 提交
7 |
8 |
3 |
4 |
5 |
8 |
13 |
14 |
86 |
87 |
--------------------------------------------------------------------------------
/src/utils/global.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import { UUID } from "@/utils/utils";
3 |
4 | class Global {
5 | constructor() {
6 | this._formId = UUID(4);
7 | this._context = null;
8 | this._layout = "horizontal";
9 | this._ajvOptions = {
10 | allErrors: true,
11 | strict: false,
12 | loopEnum: 50,
13 | };
14 | this._formData = null;
15 | this._meta = {};
16 | this._ui = {
17 | ingoreKeywords: ["type", "enum"],
18 | spanLabel: 5,
19 | spanControl: 19,
20 | grid: {
21 | gutter: 36,
22 | span: 24,
23 | },
24 | errors: {
25 | required: "必填项",
26 | },
27 | };
28 | this._validate = null;
29 | this._ignoreErrorIds = [];
30 |
31 | this._applyUseOptions();
32 | }
33 |
34 | get context() {
35 | return this._context;
36 | }
37 |
38 | set context(val) {
39 | this._context = val;
40 | }
41 |
42 | get layout() {
43 | return this._layout;
44 | }
45 |
46 | set layout(val) {
47 | this._layout = val;
48 | }
49 |
50 | get ajvOptions() {
51 | return this._ajvOptions;
52 | }
53 |
54 | set ajvOptions(val) {
55 | this._ajvOptions = val;
56 | }
57 |
58 | get formData() {
59 | return this._formData;
60 | }
61 |
62 | set formData(val) {
63 | this._formData = val;
64 | }
65 |
66 | get meta() {
67 | return this._meta;
68 | }
69 |
70 | set meta(val) {
71 | this._meta = val;
72 | }
73 |
74 | get ui() {
75 | return this._ui;
76 | }
77 |
78 | set ui(val) {
79 | this._ui = Object.assign({}, this._ui, val);
80 | }
81 |
82 | get validate() {
83 | return this._validate;
84 | }
85 |
86 | set validate(val) {
87 | this._validate = val;
88 | }
89 |
90 | updateObjProp(obj, propPath, value) {
91 | const [head, ...rest] = propPath.split("/").filter((f) => f);
92 |
93 | if (rest.length) {
94 | this.updateObjProp(obj[head], rest.join("/"), value);
95 | } else {
96 | if (obj) {
97 | obj[head] = value;
98 | }
99 | }
100 | }
101 |
102 | _applyUseOptions() {
103 | const options = Vue.prototype.$VFORMLY_OPTIONS;
104 | if (!options || typeof options !== "object") return;
105 |
106 | this.ui = options.ui;
107 | }
108 | }
109 |
110 | export { Global };
111 |
--------------------------------------------------------------------------------
/src/examples/views/CheckboxView.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 | 重置
10 | 提交
11 |
12 |
3 |
4 |
5 |
10 |
11 |
87 |
88 |
--------------------------------------------------------------------------------
/docs/zh/guide/terms.md:
--------------------------------------------------------------------------------
1 | # 名词解释
2 |
3 | ## meta
4 |
5 | `meta`在 v-formly 中代表的是标准的 JSON Schema 和嵌套的`ui`结合的结构。例如如下结构：
6 |
7 | ```json {9-11,19-21}
8 | {
9 | "type": "object",
10 | "properties": {
11 | "name": {
12 | "title": "姓名",
13 | "type": "string",
14 | "default": "kevin",
15 | "ui": {
16 | "showRequired": true
17 | }
18 | },
19 | "obj": {
20 | "type": "object",
21 | "properties": {
22 | "subObj": {
23 | "title": "test",
24 | "type": "string",
25 | "ui": {
26 | "showRequired": true
27 | }
28 | }
29 | },
30 | "required": ["subObj"]
31 | },
32 | "enable": {
33 | "title": "启用",
34 | "type": "boolean"
35 | }
36 | },
37 | "required": ["name"]
38 | }
39 | ```
40 |
41 | 这是一个标准的`meta`格式的数据结构，除了高亮的`ui`部分，它其实是一个标准的 JSON Schema 结构，我们把它传入 v-formly 中即可渲染出表单如下。
42 |
43 | ::: demo
44 |
45 | ```vue
46 |
47 |
6 | 重置
7 | 提交
8 |
9 |
3 |
9 |
10 |
13 |
14 |
15 |
90 |
91 |
--------------------------------------------------------------------------------
/src/examples/views/SubmitButtonView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | button = 'default' 显示默认的提交按钮
4 | button = 'custom' 自定义提交按钮，传入 default slot
12 |
19 |
20 |
28 | button = undefined 不需要提交按钮，完全由外部控制
29 |
35 |
36 |
37 |
97 |
98 |
--------------------------------------------------------------------------------
/src/examples/views/BooleanView.vue:
--------------------------------------------------------------------------------
1 |
2 |
21 | 自定义重置
22 |
23 | 自定义提交
24 |
25 |
26 |
27 |
31 | 重置
32 | 提交
33 |
34 |
3 |
4 |
5 |
6 |
12 |
17 |
18 |
19 |
103 |
104 |
--------------------------------------------------------------------------------
/src/components/Time.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 | 重置
14 | 提交
15 |
16 |
12 |
13 |
14 |
19 |
20 |
78 |
79 | ```
80 |
81 | :::
82 |
83 | ## API
84 |
85 | **我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档**
86 |
87 | ### meta 属性
88 |
89 | | 成员 | 说明 | 类型 | 默认值 |
90 | | -------------------- | ------------------------------------------------------- | --------- | ------ |
91 | | `[minimum]` | 最小值 | `number` | - |
92 | | `[exclusiveMinimum]` | 约束是否包括 `minimum` 值，`true` 表示排除 `minimum` 值 | `boolean` | - |
93 | | `[maximum]` | 最大值 | `number` | - |
94 | | `[exclusiveMaximum]` | 约束是否包括 `maximum` 值，`true` 表示排除 `maximum` 值 | `boolean` | - |
95 | | `[multipleOf]` | 倍数 | `number` | `1` |
96 |
97 | ### meta.ui 属性
98 |
99 | | 成员 | 说明 | 类型 | 默认值 |
100 | | --------- | -------- | ----------------------- | -------- | --- |
101 | | `@change` | 变化回调 | `Function(value: number | string)` | - |
102 |
--------------------------------------------------------------------------------
/src/components/Wrapper.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 | 重置
16 | 提交
17 |
18 |
33 | {{ error }}
34 |
35 |
3 |
4 |
5 |
8 |
12 |
13 |
14 |
109 |
110 |
--------------------------------------------------------------------------------
/docs/zh/components/tag.md:
--------------------------------------------------------------------------------
1 | # Tag 标签
2 |
3 | 进行标记和分类的小标签，注： 只支持 checkable 标签模式。
4 |
5 | ## 代码演示
6 |
7 | ::: demo
8 |
9 | ```vue
10 |
11 |
9 | 提交
10 |
11 |
12 |
13 |
14 |
19 |
20 |
21 |
89 | ```
90 |
91 | :::
92 |
93 | ## API
94 |
95 | **我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档**
96 |
97 | ### meta 属性
98 |
99 | | 成员 | 说明 | 类型 | 默认值 |
100 | | ----------- | -------- | --------- | --------------------- | --- |
101 | | `:enum` | 数据源 | `any[] | array<{value, label>` | - |
102 | | `:readOnly` | 禁用状态 | `boolean` | - |
103 |
104 | ### meta.ui 属性
105 |
106 | | 成员 | 说明 | 类型 | 默认值 |
107 | | ---------------- | ------------------------ | ------------------- | ------ |
108 | | `@change` | 点击标签时触发的回调 | `function(value)` | - |
109 | | `@checkedChange` | 设置标签的选中状态的回调 | `function(checked)` | - |
110 |
--------------------------------------------------------------------------------
/src/components/Date.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 | 修改标签
16 | 提交
17 |
18 |
12 |
13 |
14 |
17 |
22 |
23 |
95 |
96 | ```
97 |
98 | :::
99 |
100 | ## API
101 |
102 | **我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档**
103 |
104 | ### meta 属性
105 |
106 | | 成员 | 说明 | 类型 | 默认值 |
107 | | ----------- | -------- | --------- | ------ |
108 | | `:readOnly` | 禁用状态 | `boolean` | - |
109 |
110 | ### meta.ui 属性
111 |
112 | | 成员 | 说明 | 类型 | 默认值 |
113 | | ----------------------- | --------------------------------- | ----------------------------------------- | ------ |
114 | | `:slotNameOfSuffixIcon` | 自定义的选择框后缀图标，slot 名称 | `string` | - |
115 | | `@change` | 输入框内容变化时的回调 | `Function(checked:Boolean, event: Event)` | - |
116 |
--------------------------------------------------------------------------------
/src/examples/views/TextareaView.vue:
--------------------------------------------------------------------------------
1 |
2 |
18 | 重置
19 | 提交
20 |
21 |
3 |
4 |
5 |
9 |
10 |
11 |
100 |
101 |
--------------------------------------------------------------------------------
/docs/zh/components/checkbox.md:
--------------------------------------------------------------------------------
1 | # Checkbox 多选框
2 |
3 | 多选框
4 |
5 | ## 代码演示
6 |
7 | ::: demo
8 |
9 | ```vue
10 |
11 |
6 | 提交
7 |
8 |
12 |
13 |
14 |
19 |
20 |
88 |
89 | ```
90 |
91 | :::
92 |
93 | ## API
94 |
95 | **我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档**
96 |
97 | ### meta 属性
98 |
99 | | 成员 | 说明 | 类型 | 默认值 |
100 | | ----------- | ------------------------------------ | --------- | -------------------------------------------------------------------------------------------------------- | --- |
101 | | `:enum` | 数据源，当数据源存在于表示一组多选框 | `string[] | Array<{ label: string value: string disabled?: boolean, indeterminate?: boolean, onChange?: function }>` | - |
102 | | `:readOnly` | 禁用状态 | `boolean` | - |
103 |
104 | ### meta.ui 属性
105 |
106 | **参考 Checkbox Group 的属性**
107 |
108 | | 成员 | 说明 | 类型 | 默认值 |
109 | | --------- | -------------- | ------------------------ | ------ |
110 | | `@change` | 变化时回调函数 | `Function(checkedValue)` | - |
111 |
--------------------------------------------------------------------------------
/src/examples/views/TextView.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 | 重置
16 | 提交
17 |
18 |
3 |
4 |
5 |
8 |
12 |
13 |
14 |
114 |
115 |
--------------------------------------------------------------------------------
/src/examples/views/RadioView.vue:
--------------------------------------------------------------------------------
1 |
2 | slot 类型的 text
6 | 7 |
9 | 提交
10 |
11 |
3 |
4 |
5 |
11 |
12 |
113 |
114 |
--------------------------------------------------------------------------------
/docs/zh/guide/README.md:
--------------------------------------------------------------------------------
1 | # 介绍
2 |
3 | v-formly 是 vue 的动态（JSON 驱动）表单库。它通过[JSON Schema](https://json-schema.org/)和[Ajv Validator](https://ajv.js.org/)结合生成复杂的动态表单及校验，快速、简洁、高效。通过使用 v-formly 及对应的组件库即可快速构造一个 Form 表单，目前支持 Vue 2.x & [Ant Design of Vue v1](https://1x.antdv.com/docs/vue/introduce-cn/)，Vue 2.x 和 Vue 3.x 的其他 UI 库（AntDv v3，ElementUI 等）支持正在开发中。
4 |
5 | v-formly 内置封装了所有的在 Ant Design of Vue 中的`Data Entry`下面的组件，同时 v-formly 也支持[自定义封装组件](/zh/components/custom-components.html)，从而可以让你轻松构建复杂的动态表单。
6 |
7 | ## 一个简单示例
8 |
9 | ::: demo 一个简单的 v-formly 示例，请打开控制台查看表单提交结果
10 |
11 | ```vue
12 |
13 |
6 | 设置规格
7 | 重置
8 | 提交
9 |
10 |
14 |
15 |
20 |
21 |
22 |
71 | ```
72 |
73 | :::
74 |
75 | **针对上述示例我们做以下几点解释**：
76 |
77 | 1. v-formly 支持 v-model 双向绑定，可通过修改 data 来随时改变 form 表单数据；
78 |
79 | 2. 传入的 schema 是`JSON-Schema`结构 + 嵌套`ui`的组合，v-formly 使用 schema 来解析并渲染表单页面；
80 |
81 | 3. 以上表单包括两个`string`类型和一个`boolean`类型的内置`component`.
82 |
83 | a. 其中`name`为必填项（`required: ["name"]`体现出来），且默认内容为“kevin”，其中`ui.showRequired`为 true 会添加 label 前面的红色星号；
84 |
85 | b. `desc`非必填，默认内容为“Base on technical, but not limited on it!”，且提供了 change 事件，当输入改变时触发；
86 |
87 | c. `enable`为一个简单的 AntDv 的`Switch`组件。
88 |
89 | 通过上述简单的表单示例，我们大概了解了如何开始使用 v-formly，更多内容请查看[组件](/zh/components/)。
90 |
91 | ## 快速开始
92 |
93 | ### 安装
94 |
95 |
16 | 重置
17 | 提交
18 |
19 | 96 | 97 | 使用`yarn`安装`v-formly`： 98 | 99 | ```sh 100 | yarn add v-formly 101 | ``` 102 | 103 | 或者使用`npm`安装它： 104 | 105 | ```sh 106 | npm i v-formly --save 107 | ``` 108 | 109 | ### 使用 110 | 111 |
112 | 113 | ```js 114 | // 别忘了引入Ant Design of Vue 1.7.8，v-formly当前只支持这个版本。 115 | 116 | import VFormly from "v-formly"; 117 | 118 | // ... 119 | Vue.use(VFormly); 120 | // ... 121 | ``` 122 | 123 | ## 参考 124 | 125 | **v-formly 参考了以下文章及三方库**： 126 | 127 | 1. [Create a Vue.js component library](https://itnext.io/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751)； 128 | 129 | 2. [基于 Angular 的动态表单库@delon/form](https://ng-alain.com/form/getting-started/zh)； 130 | 131 | 3. [Ant Design of Vue 1.7.8](https://1x.antdv.com/docs/vue/introduce-cn/)； 132 | -------------------------------------------------------------------------------- /src/examples/layout/BasicLayout.vue: -------------------------------------------------------------------------------- 1 | 2 |
19 |
21 |
51 |
52 |
53 |
54 |
58 |
60 |
61 |
62 |
63 |
64 |
65 |
89 |
90 | ```
91 |
92 | :::
93 |
94 | 从上面的代码中，我们可以看到，我们这里的前缀使用了`slot`来传值，我们只需要在`meta`里面定义`slotNameOfPrefix`来标明它的`slot name`，然后在`v-formly`模板标签里面定义我们需要传递的模板内容，从而让表单知道我需要把这个`slot`模板传递到 AntDv 的输入框，这样就达到了`slot`的传递。
95 |
96 | ::: tip
97 | **v-formly 的每个表单项的属性中如果有需要传递`slot`的，必须保证`slot name`的唯一（比如这里的`slotNameOfPrefix`和`slotNameOfSuffix`的值必须不一样），否则无法识别或者识别错误。**
98 | :::
99 |
--------------------------------------------------------------------------------
/docs/zh/components/text.md:
--------------------------------------------------------------------------------
1 | # Text 文本
2 |
3 | 一般用于直接显示文本。
4 |
5 | ## 代码演示
6 |
7 | ::: demo
8 |
9 | ```vue
10 |
11 |
12 |
13 |
14 |
17 |
21 |
22 |
23 |
123 | ```
124 |
125 | :::
126 |
127 | ## API
128 |
129 | **我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档**
130 |
131 | ### meta.ui 属性
132 |
133 | | 成员 | 说明 | 类型 | 默认值 |
134 | | -------------------- | ------------- | -------- | ------------- | --- |
135 | | `:text` | 指定的 `text` | `string | () => string` | |
136 | | `:html` | 指定的 `html` | `HTML` | - |
137 | | `:slotNameOfDefault` | 指定的 `slot` | `string` | - |
138 |
139 | ::: tip 注意
140 | 文本显示的优先级：slot > html > text
141 | :::
142 |
--------------------------------------------------------------------------------
/src/components/Select.vue:
--------------------------------------------------------------------------------
1 |
2 | slot 类型的 text
15 | 16 |
18 | 提交
19 |
20 |
12 |
13 |
14 |
17 |
21 |
22 |
23 |
118 | ```
119 |
120 | :::
121 |
122 | ## API
123 |
124 | **我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档**
125 |
126 | ### meta 属性
127 |
128 | | 成员 | 说明 | 类型 | 默认值 |
129 | | ----------- | -------- | --------- | ------ |
130 | | `:maximum` | 总星数 | `number` | 5 |
131 | | `:readOnly` | 禁用状态 | `boolean` | - |
132 |
133 | ### meta.ui 属性
134 |
135 | | 成员 | 说明 | 类型 | 默认值 |
136 | | ---------------------- | ------------------------ | ------------------------- | ------- |
137 | | `:character` | 自定义字符 | `string` | - |
138 | | `:slotNameOfCharacter` | 自定义字符 slot | `string` | - |
139 | | `@change` | 选择时的回调 | `function(value: number)` | - |
140 | | `@hoverChange` | 鼠标经过时数值变化的回调 | `function(value: number)` | - |
141 |
--------------------------------------------------------------------------------
/src/examples/views/ArrayView.vue:
--------------------------------------------------------------------------------
1 |
2 |
18 | 提交
19 |
20 |
3 |
4 |
5 |
13 |
14 |
133 |
134 |
--------------------------------------------------------------------------------
/docs/zh/components/boolean.md:
--------------------------------------------------------------------------------
1 | # Boolean 开关
2 |
3 | 开关选择器。
4 |
5 | ## 代码演示
6 |
7 | ::: demo
8 |
9 | ```vue
10 |
11 |
6 | 设置名称0
7 | 提交
8 | add more
9 | add one
10 | clear
11 |
12 |
12 |
13 |
14 |
15 |
21 |
26 |
27 |
28 |
112 |
113 | ```
114 |
115 | :::
116 |
117 | ## API
118 |
119 | **我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档**
120 |
121 | ### meta 属性
122 |
123 | | 成员 | 说明 | 类型 | 默认值 |
124 | | ------------ | -------- | --------- | ------ |
125 | | `:readOnly` | 禁用状态 | `boolean` | - |
126 |
127 | ### meta.ui 属性
128 |
129 | | 成员 | 说明 | 类型 | 默认值 |
130 | | ------------------------------- | ------------------------------- | ----------------------------------------- | --------- |
131 | | `:checkedChildren` | 选中时的内容 | `string` | - |
132 | | `:slotNameOfCheckedChildren` | 选中时的内容，slot 名称 | `string` | - |
133 | | `:unCheckedChildren` | 非选中时的内容 | `string` | - |
134 | | `:slotNameOfUnCheckedChildren` | 非选中时的内容，slot 名称 | `string` | - |
135 | | `@change` | 输入框内容变化时的回调 | `Function(checked:Boolean, event: Event)` | - |
136 |
--------------------------------------------------------------------------------
/docs/zh/components/radio.md:
--------------------------------------------------------------------------------
1 | # Radio 单选框
2 |
3 | 单选框。
4 |
5 | ## 代码演示
6 |
7 | ::: demo
8 |
9 | ```vue
10 |
11 |
22 | 重置
23 | 提交
24 |
25 |
12 |
13 |
14 |
20 |
21 |
122 |
123 | ```
124 |
125 | :::
126 |
127 | ## API
128 |
129 | **我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档**
130 |
131 | ### meta 属性
132 |
133 | | 成员 | 说明 | 类型 | 默认值 |
134 | | ----------- | -------- | --------- | ------ |
135 | | `:readOnly` | 禁用状态 | `boolean` | - |
136 |
137 | ### meta.ui 属性
138 |
139 | 参考 RadioGroup 组件属性
140 |
141 | | 成员 | 说明 | 类型 | 默认值 |
142 | | --------------- | -------------------------------------------------- | ---------------------- | ------- |
143 | | `:component` | 指定组件为'radio' | `string` | `radio` |
144 | | `:direction` | 单选框展示方向，默认横向展示，`vertical`则竖向展示 | `string` | - |
145 | | `:showRequired` | 是否显示标签前的红色\*号 | `boolean` | false |
146 | | `@change` | 选项变化时的回调函数 | `Function(value: any)` | - |
147 |
--------------------------------------------------------------------------------
/docs/zh/components/textarea.md:
--------------------------------------------------------------------------------
1 | # Textarea 多行文本框
2 |
3 | 一般用于多行字符串。
4 |
5 | ## 代码演示
6 |
7 | ::: demo
8 |
9 | ```vue
10 |
11 |
15 | 设置规格
16 | 重置
17 | 提交
18 |
19 |
12 |
13 |
14 |
18 |
19 |
20 |
109 | ```
110 |
111 | :::
112 |
113 | ## API
114 |
115 | **我们只列出属性中不一致的或新添加的，一致的地方请参考 AntDv 文档**
116 |
117 | ### meta 属性
118 |
119 | | 成员 | 说明 | 类型 | 默认值 |
120 | | ------------ | -------- | --------- | ------ |
121 | | `:maxLength` | 最大长度 | `number` | - |
122 | | `:readOnly` | 禁用状态 | `boolean` | - |
123 |
124 | ### meta.ui 属性
125 |
126 | | 成员 | 说明 | 类型 | 默认值 |
127 | | -------------- | ----------------------------- | ---------------------------------------- | -------- | ------- | ---- |
128 | | `:autosize` | 自适应内容高度，可设置为`true | false`或对象：{ minRows: 2, maxRows: 6 } | `boolean | object` | true |
129 | | `:placeholder` | 默认文字 | `string` | - |
130 | | `:allowClear` | 可以点击清除图标删除内容 | `boolean` | - |
131 | | `@change` | 内容变更事件 | `function(value)` | - |
132 | | `@focus` | 焦点事件 | `function(e)` | - |
133 | | `@blur` | 失焦事件 | `function(e)` | - |
134 | | `@pressEnter` | 按下回车事件 | `function(e)` | - |
135 |
--------------------------------------------------------------------------------
/src/utils/validate.factory.js:
--------------------------------------------------------------------------------
1 | const Ajv = require("ajv");
2 | import Vue from "vue";
3 | import { FORM_ERROR_CHANGE } from "@/utils/consts.js";
4 |
5 | class ValidateFactory {
6 | constructor(state) {
7 | this.state = state;
8 | this._ajv = new Ajv(state.ajvOptions);
9 | this._validate = null;
10 | }
11 |
12 | // TODO 提交表单时，界面应该抛出所有错误
13 | async runValidateForm() {
14 | const { valid, errors } = this._isAjvValid();
15 | const contexts = this.state.context.getContexts();
16 | const instances = contexts.values();
17 | let isValid = true;
18 | for (const instance of instances) {
19 | isValid = (await this._validation(instance, valid, errors)) && isValid;
20 | }
21 |
22 | return isValid;
23 | }
24 |
25 | async runValidationFormItem(context) {
26 | const { valid, errors } = this._isAjvValid();
27 | let isValid = await this._validation(context, valid, errors);
28 | return isValid;
29 | }
30 |
31 | _ajvValidate(meta) {
32 | if (this._validate) return this._validate;
33 |
34 | this._validate = this._ajv.compile(meta);
35 | return this._validate;
36 | }
37 |
38 | _getAjvError(id, errors) {
39 | let _error = undefined;
40 | for (let i = 0; i < errors.length; i++) {
41 | const error = errors[i];
42 | const _id = this._getId(error);
43 | if (id === _id) {
44 | _error = error;
45 | break;
46 | }
47 | }
48 |
49 | return _error;
50 | }
51 |
52 | _isAjvValid() {
53 | const validate = this._ajvValidate(this.state.meta);
54 | const valid = validate(this.state.formData || {});
55 |
56 | return { valid, errors: validate.errors };
57 | }
58 |
59 | async _validation(context, valid, errs) {
60 | let errors = [];
61 | const ERROR_CHANGE = `${FORM_ERROR_CHANGE}-${this.state._formId}`;
62 | if (!valid) {
63 | const customErrors = this._getCustomError(context);
64 | const customAsyncErrors = await this._getCustomAsyncError(context);
65 | const cusErrors = [...customErrors, ...customAsyncErrors];
66 | this._replaceWithDefaultErrors(context, errs);
67 | this._replaceWithCustomErrors(context.id, errs, cusErrors);
68 | const ingoreKeywords = this.state.ui.ingoreKeywords || [];
69 | errors = errs.filter((f) => ingoreKeywords.indexOf(f.keyword) === -1);
70 | errors = this._removeIgnoreErrors(errors);
71 | const error = this._getAjvError(context.id, errors);
72 | Vue.bus.emit(ERROR_CHANGE, {
73 | id: context.id,
74 | error: error,
75 | });
76 |
77 | return error ? false : true;
78 | } else {
79 | Vue.bus.emit(ERROR_CHANGE, {
80 | id: context.id,
81 | error: undefined,
82 | });
83 |
84 | return true;
85 | }
86 | }
87 |
88 | _getCustomError(context) {
89 | const validator = context.meta.ui && context.meta.ui.validator;
90 | if (!validator) return [];
91 |
92 | return validator(context.value);
93 | }
94 |
95 | async _getCustomAsyncError(context) {
96 | const validatorAsync = context.meta.ui && context.meta.ui.validatorAsync;
97 | if (!validatorAsync) return [];
98 |
99 | return await validatorAsync(context.value);
100 | }
101 |
102 | _replaceWithDefaultErrors(context, errors) {
103 | if (!errors || errors.length === 0) return;
104 |
105 | const localErrors = (context.meta.ui && context.meta.ui.errors) || {};
106 | const globalErrors = Object.assign({}, this.state.ui.errors, localErrors);
107 | const keywords = Object.keys(globalErrors);
108 | if (keywords && keywords.length > 0) {
109 | errors.forEach((error) => {
110 | if (keywords.indexOf(error.keyword) > -1) {
111 | error.message = globalErrors[error.keyword];
112 | }
113 | });
114 | }
115 | }
116 |
117 | _replaceWithCustomErrors(id, errors, customErrors) {
118 | customErrors.forEach((err) => {
119 | let cur = errors.find(
120 | (f) => f.keyword === err.keyword && this._getId(f) === id
121 | );
122 | if (cur) {
123 | cur.message = err.message;
124 | }
125 | });
126 | }
127 |
128 | _removeIgnoreErrors(errors) {
129 | const ids = this.state._ignoreErrorIds;
130 | if (!ids || ids.length === 0) return errors;
131 |
132 | const errs = errors.filter((f) => ids.indexOf(this._getId(f)) === -1);
133 |
134 | return errs;
135 | }
136 |
137 | _getId(error) {
138 | const hasMissingProperty = error.params && error.params.missingProperty;
139 | if (hasMissingProperty) {
140 | return `${error.instancePath}/${error.params.missingProperty}`;
141 | }
142 |
143 | return `${error.instancePath}`;
144 | }
145 | }
146 |
147 | export { ValidateFactory };
148 |
--------------------------------------------------------------------------------
/docs/zh/guide/form.md:
--------------------------------------------------------------------------------
1 | # 表单
2 |
3 | ## 提交表单
4 |
5 | v-formly 提交表单的三种方式。
6 |
7 | 1. 使用默认的提交按钮，通过设置 `button='default'`。
8 | 2. 使用 slot 暴露出来的 `submit function`，通过设置 `button='custom'` 并传入 `name='button'` 的 slot。
9 | 3. 使用 ref 获取 form 实例，直接调用实例的 `validate function`，eg: `this.$refs.form.validate()`。
10 |
11 | ### 代码演示
12 |
13 | ::: demo
14 |
15 | ```vue
16 |
17 |
15 | 提交
16 |
17 |
18 | 1. 使用默认的提交按钮
19 | 2. 使用 slot
27 |
34 |
35 |
43 | 3. 使用 ref 获取 form 实例
44 |
52 |
53 |
116 | ```
117 |
118 | :::
119 |
120 | ### API
121 |
122 | | 参数 | 说明 | 类型 | 默认值 |
123 | | ----------------- | ---------------------------- | ---------------------------------------- | ------------------------------------ |
124 | | `:layout` | 表单布局 | `'horizontal' | 'vertical' | 'inline'` | `'horizontal'` |
125 | | `:button` | 提交按钮 | `'default' | 'custom'` | 默认不显示提交按钮 |
126 | | `:meta` | JSON Schema + UI Schema | - | - |
127 | | `:value(v-model)` | 表单绑定数据 | `object` | - |
128 | | `button` | 自定义提交按钮 | `slot` | `{ loading, clearForm, submitForm }` |
129 | | `@form-reset` | 重置数据后回调事件 | `function(data)` | - |
130 | | `@form-submit` | 数据验证成功或失败后回调事件 | `function({ valid, data })` | - |
131 |
132 | #### 组件方法
133 |
134 | | 名称 | 描述 |
135 | | ------------ | ------------------------------------------- |
136 | | `validate` | 校验表单 |
137 | | `clearForm` | 重置表单，触发 form-reset 事件 |
138 | | `submitForm` | 校验表单，在校验完成后触发 form-submit 事件 |
139 |
--------------------------------------------------------------------------------
/src/meta/array.meta.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import { UUID, deepClone } from "@/utils/utils";
3 | import { BaseMeta } from "./base.meta";
4 |
5 | class ArrayMeta extends BaseMeta {
6 | constructor(state, id, meta) {
7 | super(state, id, meta);
8 |
9 | this.ids = [];
10 | this.initValue();
11 | }
12 |
13 | initValue() {
14 | if (!this.ids) return;
15 | if (this._initMetaValue && this._initMetaValue.length > 0) {
16 | this.value = this._initMetaValue;
17 | } else if (this.meta.default && this.meta.default.length > 0) {
18 | const data = deepClone(this.meta.default);
19 | data.forEach(() => this.add(false));
20 | setTimeout(() => {
21 | data.forEach((item, index) => {
22 | const ctx = this.state.context.getContext(`${this.id}/${index}`);
23 | ctx.value = item;
24 | });
25 | });
26 | this.validate();
27 | }
28 | }
29 |
30 | get value() {
31 | return this.getPathValue(this.state.formData, this.id) || [];
32 | }
33 |
34 | set value(val) {
35 | // 避免重复校验
36 | if (this.value.length === 0 && val && val.length === 0) return;
37 | // 只允许设置 null / undefined / Array 类型的值
38 | if (!Array.isArray(val) && val != null) return;
39 | const newVal = deepClone(val);
40 | const len = this.ids.length;
41 | // 从后往前删除
42 | for (let i = 0; i < len; i++) {
43 | this.remove(len - i - 1, false);
44 | }
45 | if (newVal && newVal.length) {
46 | newVal.forEach(() => this.add(false));
47 |
48 | Vue.nextTick(() => {
49 | newVal.forEach((item, index) => {
50 | const ctx = this.state.context.getContext(`${this.id}/${index}`);
51 | ctx.value = item;
52 | });
53 | });
54 | }
55 |
56 | this.validate();
57 | }
58 |
59 | validate() {
60 | return this.state.validate.runValidationFormItem(this);
61 | }
62 |
63 | getPathValue(sourceData, path) {
64 | const props = path.split("/").filter((f) => f);
65 | let res = deepClone(sourceData);
66 | for (let i = 0; i < props.length; i++) {
67 | const key = props[i];
68 | res = res[key];
69 | }
70 | return res;
71 | }
72 |
73 | // 根据 itmes properties 生成空对象
74 | getEmptyData() {
75 | const obj = {};
76 | const properties = this.meta.items.properties;
77 | Object.keys(properties).forEach((key) => {
78 | const meta = properties[key];
79 | switch (meta.type) {
80 | case "object":
81 | obj[key] = {};
82 | break;
83 | case "array":
84 | obj[key] = [];
85 | break;
86 | default:
87 | obj[key] = undefined;
88 | break;
89 | }
90 | });
91 | return obj;
92 | }
93 |
94 | // 在数组尾添加一个空对象
95 | add(validate = true) {
96 | const id = `${this.id}/${this.ids.length}`;
97 | const value = this.getEmptyData();
98 | this.state.updateObjProp(this.state.formData, id, value);
99 | this.ids.push({ key: UUID() });
100 |
101 | validate && this.validate();
102 | return id;
103 | }
104 |
105 | remove(index, validate = true) {
106 | // update ids
107 | this.ids.splice(index, 1);
108 | // update formData
109 | const props = this.id.split("/").filter((f) => !!f);
110 | props.reduce((obj, key, idx) => {
111 | if (idx === props.length - 1) {
112 | obj[key].splice(index, 1);
113 | }
114 | return obj[key];
115 | }, this.state.formData);
116 | // update context
117 | const keys = [];
118 | for (const key of this.state.context._map.keys()) {
119 | if (new RegExp(`^/?${this.id}/`).test(key)) {
120 | keys.push(key);
121 | }
122 | }
123 | for (let i = index + 1; i < this.ids.length + 1; i++) {
124 | const regex = new RegExp(`^(/?${this.id}/)${i}`);
125 | keys
126 | .filter((key) => regex.test(key))
127 | .forEach((key) => {
128 | const ctx = this.state.context.getContext(key);
129 | const newKey = key.replace(regex, (match, p1) => {
130 | return `${p1}${i - 1}`;
131 | });
132 | ctx.id = newKey;
133 | // object 的 id 比较特殊,需要重新计算
134 | if (ctx.childMetaPairs) {
135 | const newChildMetaPairs = ctx.buildChildMetaPairs(newKey, ctx.meta);
136 | ctx.childMetaPairs.forEach((item, idx) => {
137 | item.key = newChildMetaPairs[idx].key;
138 | });
139 | }
140 | this.state.context.addContext(newKey, ctx);
141 | });
142 | }
143 | const regex = new RegExp(`^/?${this.id}/${this.ids.length}`);
144 | keys
145 | .filter((key) => regex.test(key))
146 | .forEach((key) => {
147 | this.state.context.removeContext(key);
148 | });
149 |
150 | validate && this.validate();
151 | }
152 | }
153 |
154 | export { ArrayMeta };
155 |
--------------------------------------------------------------------------------
/src/examples/views/AutoCompleteView.vue:
--------------------------------------------------------------------------------
1 |
2 |
36 | 重置
37 |
38 | 提交
39 |
40 |
41 |
42 |
46 | 重置
47 |
48 | 提交
49 |
50 |
51 |
3 |
4 |
5 |
6 | {{ email }}
7 |
8 |
9 |
10 |
11 | {{ email }}
12 |
13 |
14 |
15 |
16 | {{ email + "_test" }}
17 |
18 |
19 |
20 |
25 |
26 |
150 |
151 |
--------------------------------------------------------------------------------
/src/examples/layout/components/Menu/menu.js:
--------------------------------------------------------------------------------
1 | import Menu from "ant-design-vue/es/menu";
2 | import Icon from "ant-design-vue/es/icon";
3 |
4 | export default {
5 | name: "SMenu",
6 | props: {
7 | menu: {
8 | type: Array,
9 | required: true,
10 | },
11 | theme: {
12 | type: String,
13 | required: false,
14 | default: "light",
15 | },
16 | mode: {
17 | type: String,
18 | required: false,
19 | default: "inline",
20 | },
21 | collapsed: {
22 | type: Boolean,
23 | required: false,
24 | default: false,
25 | },
26 | },
27 | data() {
28 | return {
29 | openKeys: [],
30 | selectedKeys: [],
31 | cachedOpenKeys: [],
32 | };
33 | },
34 | computed: {
35 | rootSubmenuKeys: (vm) => {
36 | const keys = [];
37 | vm.menu.forEach((item) => keys.push(item.path));
38 | return keys;
39 | },
40 | },
41 | mounted() {
42 | this.updateMenu();
43 | },
44 | watch: {
45 | collapsed(val) {
46 | if (val) {
47 | this.cachedOpenKeys = this.openKeys.concat();
48 | this.openKeys = [];
49 | } else {
50 | this.openKeys = this.cachedOpenKeys;
51 | }
52 | },
53 | $route: function () {
54 | this.updateMenu();
55 | },
56 | },
57 | methods: {
58 | // select menu item
59 | onOpenChange(openKeys) {
60 | // 在水平模式下时执行，并且不再执行后续
61 | if (this.mode === "horizontal") {
62 | this.openKeys = openKeys;
63 | return;
64 | }
65 | // 非水平模式时
66 | const latestOpenKey = openKeys.find(
67 | (key) => !this.openKeys.includes(key)
68 | );
69 | if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
70 | this.openKeys = openKeys;
71 | } else {
72 | this.openKeys = latestOpenKey ? [latestOpenKey] : [];
73 | }
74 | },
75 | onSelect({ item, key, selectedKeys }) {
76 | this.selectedKeys = selectedKeys;
77 | this.$emit("select", { item, key, selectedKeys });
78 | },
79 | updateMenu() {
80 | const routes = this.$route.matched.concat();
81 | const { hidden } = this.$route.meta;
82 | if (routes.length >= 3 && hidden) {
83 | routes.pop();
84 | this.selectedKeys = [routes[routes.length - 1].path];
85 | } else {
86 | this.selectedKeys = [routes.pop().path];
87 | }
88 | const openKeys = [];
89 | if (this.mode === "inline") {
90 | routes.forEach((item) => {
91 | openKeys.push(item.path);
92 | });
93 | }
94 |
95 | this.collapsed
96 | ? (this.cachedOpenKeys = openKeys)
97 | : (this.openKeys = openKeys);
98 | },
99 |
100 | // render
101 | renderItem(menu) {
102 | if (!menu.hidden) {
103 | return menu.children && !menu.hideChildrenInMenu
104 | ? this.renderSubMenu(menu)
105 | : this.renderMenuItem(menu);
106 | }
107 | return null;
108 | },
109 | renderMenuItem(menu) {
110 | const target = menu.meta.target || null;
111 | const CustomTag = (target && "a") || "router-link";
112 | const props = { to: { name: menu.name } };
113 | const attrs = { href: menu.path, target: menu.meta.target };
114 |
115 | if (menu.children && menu.hideChildrenInMenu) {
116 | // 把有子菜单的 并且 父菜单是要隐藏子菜单的
117 | // 都给子菜单增加一个 hidden 属性
118 | // 用来给刷新页面时， selectedKeys 做控制用
119 | menu.children.forEach((item) => {
120 | item.meta = Object.assign(item.meta, { hidden: true });
121 | });
122 | }
123 |
124 | return (
125 |
21 | 重置
22 | 提交
23 |
24 | ',
121 | after: "