{"id":20920184,"url":"https://github.com/blryli/vue-form-layer","last_synced_at":"2025-05-13T13:32:12.134Z","repository":{"id":57395988,"uuid":"153394379","full_name":"blryli/vue-form-layer","owner":"blryli","description":"表单校验图层式解决方案 ","archived":false,"fork":false,"pushed_at":"2019-05-16T16:09:08.000Z","size":6899,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-22T22:00:39.830Z","etag":null,"topics":["form","layer","layout","validate","vue","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://blryli.github.io/vue-form-layer/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blryli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-17T04:14:26.000Z","updated_at":"2019-08-09T08:41:17.000Z","dependencies_parsed_at":"2022-09-09T16:00:52.351Z","dependency_job_id":null,"html_url":"https://github.com/blryli/vue-form-layer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blryli%2Fvue-form-layer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blryli%2Fvue-form-layer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blryli%2Fvue-form-layer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blryli%2Fvue-form-layer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blryli","download_url":"https://codeload.github.com/blryli/vue-form-layer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253950206,"owners_count":21989321,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","layer","layout","validate","vue","vuejs","vuejs2"],"created_at":"2024-11-18T18:09:09.892Z","updated_at":"2025-05-13T13:32:12.112Z","avatar_url":"https://github.com/blryli.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"### form-line 表单\n\n\u003e 解决：复杂布局、多重标记（前后端校验、标记信息等）方案。\n\u003e  特点：高度灵活性、可控性、扩展性。\n\n### 演示\n\n[github pages](https://blryli.github.io/vue-form-layer/)\n\n#### npm 安装\n\n```js\nnpm i vue-form-layer -S\n```\n\n#### 使用\n\n```js\nimport VueFormLayer from 'vue-form-layer'\nimport 'vue-form-layer/dist/vue-form-layer.css'\n\nVue.use(VueFormLayer)\n\n// 或者直接使用script导入\n\u003cscript src=\"https://unpkg.com/vue-form-layer/dist/vue-form-layer.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vue-form-layer/dist/vue-form-layer.css\"\u003e\u003c/script\u003e\n```\n\n#### 基本布局\n\n```html\n\u003cvue-form :model=\"form\"\u003e\n    \u003cvue-form-line \n    :cols=\"[{ label: '名字' },\n    { label: '年龄' }]\"\u003e\n        \u003cinput type=\"text\" v-model=\"form.name\"\u003e\n        \u003cinput type=\"text\" v-model=\"form.age\"\u003e\n    \u003c/vue-form-line\u003e\n\u003c/vue-form\u003e\n```\n\n#### 增加图层\n\n```html\n\u003cvue-form :model=\"form\" :layer=\"layer\"\u003e\n    \u003cvue-form-line \n    :cols=\"[{ label: '名字', prop: '/form/name' },\n            { label: '年龄', prop: '/form/age'}]\"\u003e\n        \u003cinput type=\"text\" v-model=\"form.name\"\u003e\n        \u003cinput type=\"text\" v-model=\"form.age\"\u003e\n    \u003c/vue-form-line\u003e\n\u003c/vue-form\u003e\n```\n\n```js\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      form: {},\n      layer: [\n        {\n          id: \"layer-1\",\n          show: true,\n          data: [\n            {\n              prop: \"/form/name\",\n              data: \"我是名字\"\n            },\n            {\n              prop: \"/form/age\",\n              data: \"我是年龄\"\n            }\n          ]\n        },\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n#### 自定义显示模板\n\n```html\n\u003cvue-form :model=\"form\" :layer=\"layer\"\u003e\n    \u003cvue-form-line \n    :cols=\"[{ label: '名字', prop: '/form/name' },\n            { label: '年龄', prop: '/form/age'}]\"\u003e\n        \u003cinput type=\"text\" v-model=\"form.name\"\u003e\n        \u003cinput type=\"text\" v-model=\"form.age\"\u003e\n    \u003c/vue-form-line\u003e\n\u003c/vue-form\u003e\n```\n\n```js\n\u003cscript\u003e\nexport default {\n  data () {\n    var templateFn = data =\u003e {\n      return \n        // your component\n        // vue1.0支持 this.$createElement(\"component\", { attrs: { data: data } });\n        \n        // vue2.0支持jsx\n        // 可以直接写 \u003ccomponent data={data}\u003e\u003c/component\u003e\n        // 或者写引入的组件\n        \n        // 不支持的可以\n            npm install\\\n            babel-plugin-syntax-jsx\\\n            babel-plugin-transform-vue-jsx\\\n            babel-helper-vue-jsx-merge-props\\\n            babel-preset-es2015\\\n          --save-dev\n        // .babelrc\n            {\n              \"presets\": [\"es2015\"],\n              \"plugins\": [\"transform-vue-jsx\"]\n            }\n        // 然后就可以愉快地写jsx了\n    };\n    return {\n      form: {},\n      layer: [\n        {\n          id: \"layer-1\",\n          show: true,\n          data: [\n            {\n              prop: \"/form/name\",\n              template: templateFn,\n              data: // your show data\n            },\n            {\n              prop: \"/form/age\",\n              data: \"我是年龄\"\n            }\n          ]\n        },\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\n#### 自定义校验\n\n```html\n\u003cvue-form :model=\"form\" ref=\"form\" :layer=\"layer\"\u003e\n    \u003cvue-form-line \n    :cols=\"[{ label: '名字', prop: '/form/name' },\n            { label: '年龄', prop: '/form/age'}]\"\u003e\n        \u003cinput type=\"text\" v-model=\"form.name\" @blur=\"recalculateField('/form/name')\"\u003e\n        \u003cinput type=\"text\" v-model=\"form.age\" @blur=\"recalculateField('/form/age')\"\u003e\n    \u003c/vue-form-line\u003e\n\u003c/vue-form\u003e\n```\n\n```js\n\u003cscript\u003e\nexport default {\n  data () {\n    const successValidate = {\n      disabled: true,\n      referenceBorderColor: \"#67c23a\"\n    };\n    const errorValidate = message =\u003e {\n      return {\n        message: message,\n        disabled: false,\n        referenceBorderColor: \"#F56C6C\"\n      };\n    };\n    const recalculateName = value =\u003e {\n      if (value === \"\") {\n        return errorValidate(\"name is required\");\n      } else {\n        return successValidate;\n      }\n    };\n    const recalculateAge = value =\u003e {\n      if (value === \"\") {\n        return errorValidate(\"age is required\");\n      } else if (value \u003c 18) {\n        return errorValidate(\"age not less then 18\");\n      } else {\n        return successValidate;\n      }\n    };\n    return {\n      form: {},\n      layer: [\n        {\n          id: \"layer-1\",\n          show: true,\n          view: {\n            disabled: true\n          },\n          data: [\n            {\n              prop: \"/form/name\",\n              recalculate: recalculateName,\n              data: \"\"\n            },\n            {\n              prop: \"/form/age\",\n              recalculate: recalculateAge,\n              data: \"\"\n            }\n          ]\n        },\n      ]\n    }\n  },\n  methods: {\n    recalculateField(prop) {\n      this.$refs['form'].recalculateField('layer-1', prop);\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### vue-form Attributes\n\n|    参数    |    说明      |   类型     |可选值  |默认值|\n| ---------  | ----------  | --------   |----  | ----- |\n| model      | form对象，用于重算及重置    | object/array     |-     | -     |\n| layer      | 图层数组    | array       |-     | -     |\n| mark      | 启用标记信息组件    | boolean       |-     | false   |\n| markContent      | (prop, show) =\u003e {}    | funtion       |-     | -   |\n| markEffect      | 用于设置标记组件主题，接受传入一个颜色值    | string       |light/dark    | light   |\n| label-width | 表单域标签的宽度 | string |-     | -   |\n| labelPosition | label的位置 | string  |left/right/top  | right    |\n| line-height | form-item 内label及content行高 | string |-  | '32px'    |\n| rowledge  | form-item 行距       | string   | -     |'24px'  |\n| item-gutter | form-item 之间的间隔 | number |-  | 0    |\n| response  | 表单响应式，只在手机端生效  | boolean   | -     |true  |\n\n### vue-form Methods\n\n|  方法名 |    说明                    |   参数      |\n|-------- |------                      |------       |\n|changeShow  |改变图层展示状态            |图层ID       |\n|recalculate |对整个表单进行重算的方法，参数id是进行重算的图层ID，第二个参数是回调函数|Function(id, callback: Function(boolean))|\n|recalculateField |对部分表单字段进行重算的方法，参数 (id: 图层id, prop: item prop)，不传参数则进行全局重算|id: string, prop: string|\n|clearCalculate |移除表单项的重算结果。参数 (id: 图层id, prop: 传入待移除的表单项的 prop 属性组成的数组，如不传则移除整个表单的重算结果)|id: string,props: array|\n|resetFields |对表单进行重置，将所有字段值重置为初始值并移除重算结果。参数 (id: 图层id, prop: 传入待移除的表单项的 prop 属性组成的数组，如不传则移除整个表单进行重置)|props: array|\n\n### vue-form Events\n\n|  事件名称 |    说明                    |   \t回调参数      |\n|--------  |------                      |------       |\n|show      |    显示时触发\t            |  prop       |\n|hide      |  隐藏时触发\t\t            |  prop       |\n\n### vue-form layer 图层 array\n\n|    参数    |    说明   |   类型   |  可选值  |默认值|\n| --------- | ---------| -------- | ------ | ----- |\n| id        | 图层id   | string   | -      |   -   |\n| show      | 图层是否展示| boolean | -     |  true   |\n| view      | 图层默认配置| object | -     |  -   |\n| data      | 图层item配置| object | -     |  -   |\n\n### layer view 图层默认配置 object\n\n|    参数    |    说明   |   类型   |  可选值  |默认值|\n| ---------  | ---------| -------- | ------ | ----- |\n| type       | layer 展示类型   | string   | popover/text  | popover    |\n| effect     | layer 主题或颜色，如果传入色值则主题颜色为该色值 | string  |  light/dark/info/error  | light   |\n| borderColor| layer 的border颜色 | string  |  -  | \"#ccc\"   |\n| referenceBorderColor| reference 的border颜色 | string  |  -  | -   |\n| recalculate| layer 默认重算规则 (value) =\u003e {return {effect: 主题颜色, disabled: 是否禁用, referenceBorderColor: reference边框颜色} | function  |  -  | -   |\n| placement  | layer 展示位置   | string   | top/right/bottom/left  | top    |\n| target    | layer 默认为default(传入form-line的dom)，target存在时会修改触发目标，(data) =\u003e {return 模板/组件 },多个图层同时指向default时，排列显示   | string/function   | why/warn  | default |\n| disabled    | layer 是否禁用  | boolean   | -  | false |\n| trigger    | layer 触发方式   | string   | hover/focus/click  | hover    |\n| hideDelay    | layer 隐藏延时   | number   | -  | 200    |\n| showAlways    | layer 是否总是显示  | boolean   | -  | false |\n| enterable    | layer为popover时，鼠标是否可移入  | boolean   | -  | false |\n| visible-arrow | layer为popover时，是否显示箭头  | boolean   | -  | true |\n| template   | 数据展示模板 (data, prop, show) =\u003e {return 模板/组件 }, 回调参数data是数据，回调参数prop是模板位置，回调读书show是模板所在图层展示状态 | function | -  | top    |\n\n### layer data 图层item配置 array\n\n|    参数    |    说明   |   类型   |  可选值  |默认值|\n| ---------  | ---------| -------- | ------ | ----- |\n| prop       | 使用该配置的prop字段，如不传则该配置不会作用于任何字段  | - | -  | -    |\n| data       | 展示数据，传入模板template则通过模板展示数据，object/array类型需要传模板 | string/object/array | -  | -   |\n| recalculate| 字段重算规则 (value) =\u003e {return {message: 展示文字，effect: 主题颜色, disabled: 是否禁用, borderColor: 边框颜色} | function  |  -  | -   |\n\n### vue-form-line Attributes\n\n|    参数    |    说明   |   类型   |默认值|\n| ---------  | ----------| -------- | ----- |\n| cols      | item布局配置  | array   | []    |\n| span      | form-line在一行分成24份中所占的份数  | number | 24 |\n| label-width | 表单域标签的宽度 | string | -     |\n| label | 子节点并排展示时使用，form-line设置label后，子节点设置的label将失效 | string | -     |\n| required | 子节点并排展示时使用 | boolean | false     |\n\n#### cols item布局配置\n\n|    参数    |    说明   |   类型   |默认值|\n| ---------  | ----------| -------- | ----- |\n| span      | item在form-line分成24份中所占的份数  | number | 24 |\n| label     | item label名  | number | - |\n| prop | 校验的字段，在需要校验时是必须的 | string | -     |\n| label-width | 表单域标签的宽度 | string | \"80px\"     |\n| required | 是否必填(只提供样式，校验规则要在图层定义) | boolean | false     |\n\n### 版本\n\n## 1.2.14\n\n2018-4-22\n\n- 迁移到 rollup，优化组件打包，支持esm格式。\n\n- form 增加 isTable 属性，以更少的node渲染 table，提高渲染性能。\n\n## 1.2.13\n\n2018-4-8\n\n- 图层使用懒加载，在鼠标移入reference或重算时加载，提高组件渲染性能。\n\n## 1.2.11\n\n2018-4-8\n\n- form增加line-height属性。\n\n[历史版本](https://github.com/blryli/vue-form-layer/blob/master/VERSIONS.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblryli%2Fvue-form-layer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblryli%2Fvue-form-layer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblryli%2Fvue-form-layer/lists"}