├── .babelrc
├── .gitignore
├── src
├── index.js
└── components
│ ├── VueFormMaker.js
│ └── utils.js
├── webpack.config.js
├── demo.md
├── package.json
├── LICENSE
├── demo
├── time.html
├── inputNumber.html
├── colorPicker.html
├── rate.html
├── slider.html
├── upload.html
├── checkbox.html
├── date.html
├── button.html
├── radio.html
├── switch.html
├── select.html
├── 栅格系统.html
├── cascader.html
├── input.html
└── form.html
├── README.md
├── dist
├── vue-form-maker.js
├── cityData2Level.js
└── vue-form-maker.js.map
└── doc.md
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env"],
3 | "plugins": ["transform-object-rest-spread"]
4 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log*
4 | yarn-debug.log*
5 | yarn-error.log*
6 |
7 | # Editor directories and files
8 | .idea
9 | .vscode
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import VueFormMaker from './components/VueFormMaker'
2 |
3 | const install = function(Vue, opts = {}) {
4 | Vue.component('VueFormMaker', VueFormMaker)
5 | }
6 |
7 | const API = {
8 | install,
9 | version: '1.0.4',
10 | }
11 |
12 | if (typeof window !== 'undefined' && window.Vue) {
13 | install(window.Vue)
14 | }
15 |
16 | export default API
17 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
3 |
4 | module.exports = {
5 | entry: './src/index.js',
6 | plugins: [
7 | new UglifyJSPlugin({
8 | sourceMap: true
9 | })
10 | ],
11 | devtool: 'source-map',
12 | module: {
13 | rules: [
14 | {
15 | test: /\.js$/,
16 | exclude: /node_modules/,
17 | use: {
18 | loader: 'babel-loader',
19 | options: {
20 | presets: ['env']
21 | }
22 | }
23 | }
24 | ]
25 | },
26 | output: {
27 | filename: 'vue-form-maker.js',
28 | path: path.resolve(__dirname, 'dist'),
29 | library: 'VueFormMaker',
30 | libraryTarget: 'umd'
31 | }
32 | }
--------------------------------------------------------------------------------
/demo.md:
--------------------------------------------------------------------------------
1 | # DEMO
2 |
3 | 如果在线DEMO打不开 请将项目克隆到本地 打开DEMO文件夹里的HTML文件 即可在本地查看DEMO
4 |
5 | * [form](https://jsrun.net/yJXKp/edit)
6 | * [表单联动DEMO](http://jsrun.net/bk2Kp/edit)
7 | * [栅格系统DEMO](https://jsrun.net/GxXKp/edit)
8 | * [input](https://jsrun.net/qxXKp/edit)
9 | * [radio](https://jsrun.net/XHXKp/edit)
10 | * [checkbox](https://jsrun.net/VHXKp/edit)
11 | * [switch](https://jsrun.net/8HXKp/edit)
12 | * [select](https://jsrun.net/THXKp/edit)
13 | * [slider](https://jsrun.net/UHXKp/edit)
14 | * [datePicker](https://jsrun.net/dHXKp/edit)
15 | * [timePicker](https://jsrun.net/FHXKp/edit)
16 | * [cascader](https://jsrun.net/xHXKp/edit)
17 | * [inputNumber](https://jsrun.net/GHXKp/edit)
18 | * [rate](https://jsrun.net/HHXKp/edit)
19 | * [upload](https://jsrun.net/5HXKp/edit)
20 | * [colorPicker](https://jsrun.net/jGXKp/edit)
21 | * [button](https://jsrun.net/nHXKp/edit)
22 |
23 | 注意：iView上传组件最后的例子实现不了
24 |
25 | 更多例子请查看[iView](https://www.iviewui.com/components/input)
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-form-maker",
3 | "version": "1.0.4",
4 | "description": "Vue动态生成表单",
5 | "main": "dist/vue-form-maker.js",
6 | "scripts": {
7 | "build": "webpack --config webpack.config.js --mode production"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/woai3c/vue-form-maker.git"
12 | },
13 | "keywords": [
14 | "vue-form-maker",
15 | "vue",
16 | "form",
17 | "iview"
18 | ],
19 | "author": "bin",
20 | "license": "MIT",
21 | "bugs": {
22 | "url": "https://github.com/woai3c/vue-form-maker/issues"
23 | },
24 | "homepage": "https://github.com/woai3c/vue-form-maker#readme",
25 | "dependencies": {
26 | "view-design": "^4.0.2"
27 | },
28 | "devDependencies": {
29 | "babel-core": "^6.26.3",
30 | "babel-loader": "^7.1.5",
31 | "babel-plugin-transform-object-rest-spread": "^6.26.0",
32 | "babel-preset-env": "^1.7.0",
33 | "uglifyjs-webpack-plugin": "^2.2.0",
34 | "webpack": "^4.27.1",
35 | "webpack-cli": "^3.1.2"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 bin
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/demo/time.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | time-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
45 |
46 |
--------------------------------------------------------------------------------
/demo/inputNumber.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | inputNumber-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
41 |
42 |
--------------------------------------------------------------------------------
/demo/colorPicker.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | colorPicker-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
51 |
52 |
--------------------------------------------------------------------------------
/demo/rate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | rate-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
50 |
51 |
--------------------------------------------------------------------------------
/demo/slider.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | slider-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
56 |
57 |
--------------------------------------------------------------------------------
/demo/upload.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | upload-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
51 |
52 |
--------------------------------------------------------------------------------
/demo/checkbox.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | checkbox-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
60 |
61 |
--------------------------------------------------------------------------------
/demo/date.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | slider-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
60 |
61 |
--------------------------------------------------------------------------------
/src/components/VueFormMaker.js:
--------------------------------------------------------------------------------
1 | import componentObj from './utils'
2 |
3 | export default {
4 | props: {
5 | options: {
6 | type: Object,
7 | required: true
8 | }
9 | },
10 | render(h) {
11 | const options = this.options
12 | const formData = options.formData
13 | if (!options.formItem) {
14 | return h('div')
15 | }
16 |
17 | const components = options.formItem.map(item => {
18 | let func = componentObj[item.type]
19 | let subComponent = func? func.call(this, h, formData, item, this) : null
20 | let component = componentObj.formItem(h, item, subComponent)
21 |
22 | return componentObj.col(h, item, component)
23 | })
24 |
25 | if (options.submit) {
26 | processSubmitOrReset(components, h, formData, options.submit, this, 'submit')
27 | }
28 |
29 | if (options.reset) {
30 | processSubmitOrReset(components, h, formData, options.reset, this, 'reset')
31 | }
32 |
33 | return h('Form', {
34 | ref: 'form',
35 | props: {
36 | model: formData,
37 | ...options.formProps
38 | },
39 | class: 'vue-generate-form'
40 | }, [
41 | h('Row', {
42 | props: options.rowProps
43 | }, components)
44 | ])
45 | }
46 | }
47 |
48 | function processSubmitOrReset(components, h, formData, obj, vm, type) {
49 | let subComponent = componentObj[type](h, formData, obj, vm)
50 | let component = componentObj.formItem(h, obj, subComponent)
51 | components.push(componentObj.col(h, obj, component))
52 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## 简介
2 | Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是[iView](https://www.iviewui.com/)。
3 |
4 | 有问题或BUG欢迎提 [issues](https://github.com/woai3c/vue-form-maker/issues)
5 |
6 |
7 | * [文档](https://github.com/woai3c/vue-form-maker/blob/master/doc.md)
8 | * [在线DEMO](https://github.com/woai3c/vue-form-maker/blob/master/demo.md)
9 | ## 表单组件
10 | * Input 输入框
11 | * Button 按钮
12 | * Radio 单选框
13 | * Checkbox 多选框
14 | * Icon 图标
15 | * Switch 开关
16 | * Select 选择器
17 | * Slider 滑块
18 | * DatePicker 日期选择器
19 | * TimePicker 时间选择器
20 | * Cascader 级联选择器
21 | * InputNumber 数字输入框
22 | * Rate 评分
23 | * Upload 上传
24 | * ColorPicker 颜色选择器
25 |
26 | ## 使用
27 | ### 在单文件组件中引用
28 | ```
29 | npm i vue-form-maker
30 | ```
31 |
32 | ```
33 | import VueFormMaker from 'vue-form-maker'
34 | import ViewUI from 'view-design';
35 | import 'view-design/dist/styles/iview.css';
36 | // 如需使用城市数据 可以这样引用
37 | // 省 市 县
38 | import 'vue-form-maker/dist/cityData3Level'
39 | // 省 市
40 | import 'vue-form-maker/dist/cityData2Level'
41 | // 城市数据文件定义了一个全局变量cityData 在项目里直接使用cityData即可
42 |
43 | Vue.use(ViewUI)
44 | Vue.use(VueFormMaker)
45 | ```
46 | ```
47 |
48 |
49 |
50 | // 或者
51 |
52 |
53 | ```
54 |
55 | ### 在HTML文件中直接引用
56 | 使用的是dist目录中的`vue-form-maker.js`
57 | ```
58 |
59 | ```
60 | ```
61 |
62 |
63 |
64 |
65 | ```
66 | ```
67 |
68 |
69 |
70 | ```
71 |
72 | ## License
73 | MIT
74 |
--------------------------------------------------------------------------------
/demo/button.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | button-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
74 |
75 |
--------------------------------------------------------------------------------
/demo/radio.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | radio-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
81 |
82 |
--------------------------------------------------------------------------------
/demo/switch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | switch-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
90 |
91 |
--------------------------------------------------------------------------------
/demo/select.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | select-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
94 |
95 |
--------------------------------------------------------------------------------
/demo/栅格系统.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 栅格系统demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
99 |
100 |
--------------------------------------------------------------------------------
/demo/cascader.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | cascader-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
97 |
98 |
--------------------------------------------------------------------------------
/demo/input.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | input-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
127 |
128 |
--------------------------------------------------------------------------------
/demo/form.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | form-demo
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
162 |
163 |
--------------------------------------------------------------------------------
/dist/vue-form-maker.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueFormMaker=t():e.VueFormMaker=t()}(window,(function(){return function(e){var t={};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(r,n,function(t){return e[t]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(e){return e&&e.__esModule?e:{default:e}}(o(1)),n=function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1],e.component("VueFormMaker",r.default)},s={install:n,version:"1.0.4"};"undefined"!=typeof window&&window.Vue&&n(window.Vue),t.default=s},function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],s=arguments[3],u=o.key?o.key:"",p=[];return o.children&&(p=o.children.map((function(o){var r=void 0;if("span"==o.type)r=e("span",{slot:o.slot},[o.text]);else{var l=n[o.type];r=l?l.call(s,e,t,o,s):null}return r}))),e("Input",{props:r({value:u?t[u]:""},o.props),style:o.style,on:r({},l(o.events,s),{input:function(e){u&&(t[u]=e)}}),slot:o.slot},p)},button:function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];var t=arguments[2];return arguments[3],e("Button",{props:t.props,slot:t.slot,style:t.style,on:t.events},[t.text])},buttonGroup:function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];var t=arguments[2],o=(arguments[3],t.children.map((function(t){return e("Button",{props:t.props?t.props:t,slot:t.slot,style:t.style,on:t.events},[t.text])})));return e("ButtonGroup",{props:t.props,style:t.style,slot:t.slot},[o])},reset:function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];var t=arguments[2],o=arguments[3];return e("Button",{props:t.props,style:t.style,slot:t.slot,on:{click:function(){o.$refs.form.resetFields()}}},[t.text])},submit:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=[],l=e("Button",{props:o.props,style:o.style,on:{click:function(){n.$refs.form.validate((function(e){e?o.success.call(n,t):o.fail.call(n,t)}))}}},[o.text]);if(s.push(l),o.reset){var u=e("Button",{props:o.reset.props,style:r({marginLeft:"10px"},o.style),on:{click:function(){n.$refs.form.resetFields()}}},[o.reset.text]);s.push(u)}return e("div",s)},icon:s,radio:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=o.key?o.key:"";return e("Radio",{props:r({value:!!s&&t[s]},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){s&&(t[s]=e)}})},[o.text])},radioGroup:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=[],u=o.key?o.key:"";return o.children&&(s=o.children.map((function(t){return e("Radio",{props:t.props?t.props:t},[t.text])}))),e("RadioGroup",{props:r({value:u?t[u]:""},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){u&&(t[u]=e)}})},[s])},checkbox:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=o.key?o.key:"";return e("Checkbox",{props:r({value:s?t[s]:""},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){s&&(t[s]=e)}})},[o.text])},checkboxGroup:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=[],u=o.key?o.key:"";return o.children&&(s=o.children.map((function(t){return e("Checkbox",{props:t.props?t.props:t},[t.text])}))),e("CheckboxGroup",{props:r({value:u?t[u]:[]},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){u&&(t[u]=e)}})},[s])},switch:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],u=o.key?o.key:"",p=[];return o.children&&(p=o.children.map((function(o){var r=void 0;return"icon"==o.type?r=s(e,t,o):"span"==o.type&&(r=e("span",{slot:o.slot},[o.text])),r}))),e("i-switch",{props:r({value:!!u&&t[u]},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){u&&(t[u]=e)}})},p)},select:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=o.key?o.key:"",u=[];return o.children&&(u=o.children.map((function(t){return"optionGroup"==t.type?e("OptionGroup",{props:t.props?t.props:t},t.children.map((function(t){return e("Option",{props:t.props?t.props:t})}))):e("Option",{props:t.props?t.props:t})}))),e("Select",{props:r({value:t[s]},o.props),style:o.style,on:r({},l(o.events,n),{input:function(e){s&&(t[s]=e)}}),slot:o.slot},u)},slider:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=o.key?o.key:"";return e("Slider",{props:r({value:t[s]},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){s&&(t[s]=e)}})})},date:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=o.key?o.key:"",u=o.props.type;return e("DatePicker",{props:r({value:s?t[s]:""},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){s&&(u.includes("datetime")?Array.isArray(e)?t[s]=e?e.map((function(e){return e?e.toLocaleDateString()+" "+e.toTimeString().split(" ")[0]:""})):[]:t[s]=e?e.toLocaleDateString()+" "+e.toTimeString().split(" ")[0]:"":Array.isArray(e)?t[s]=e?e.map((function(e){return e?e.toLocaleDateString():""})):[]:t[s]=e?e.toLocaleDateString():"")}})})},time:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=o.key?o.key:"";return e("TimePicker",{props:r({value:s?t[s]:""},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){s&&(t[s]=e)}})})},cascader:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=o.key?o.key:"";return e("Cascader",{props:r({value:s?t[s]:[]},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){s&&(t[s]=e)}})})},inputNumber:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=o.key?o.key:"";return e("InputNumber",{props:r({value:s?t[s]:null},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){s&&(t[s]=e)}})})},rate:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=o.key?o.key:"";return e("Rate",{props:r({value:s?t[s]:0},o.props),slot:o.slot,style:o.style,on:r({},l(o.events,n),{input:function(e){s&&(t[s]=e)}})})},upload:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],r=arguments[3],s=[];return o.children&&(s=o.children.map((function(o){var s=n[o.type];return s?s.call(r,e,t,o,r):null}))),e("Upload",{props:o.props,style:o.style,slot:o.slot},s)},colorPicker:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments[2],n=arguments[3],s=o.key?o.key:"";return e("ColorPicker",{props:r({value:s?t[s]:""},o.props),style:o.style,slot:o.slot,on:r({},l(o.events,n),{input:function(e){s&&(t[s]=e)}})})},col:function(e,t,o){return e("Col",{props:{span:t.span,push:t.push,pull:t.pull,offset:t.offset,order:t.order,"class-name":t["class-name"]||t.className,xs:t.xs,sm:t.sm,md:t.md,lg:t.lg}},[o])},formItem:function(e,t,o){return e("FormItem",{class:t.className,props:{label:t.label,rules:t.rules,prop:t.key?t.key:"","label-width":t["label-width"]||t.labelWidth,"label-for":t["label-for"]||t.labelFor,error:t.error,"show-message":t["show-message"]||t.showMessage}},[o])}};function s(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];var t=arguments[2];return arguments[3],e("Icon",{props:t.props,style:t.style,slot:t.slot})}function l(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments[1],o={};for(var r in e)o[r]=e[r].bind(t);return o}t.default=n}])}));
2 | //# sourceMappingURL=vue-form-maker.js.map
--------------------------------------------------------------------------------
/dist/cityData2Level.js:
--------------------------------------------------------------------------------
1 | cityData=[{"value":"北京市","label":"北京市","children":[{"value":"东城区","label":"东城区"},{"value":"西城区","label":"西城区"},{"value":"朝阳区","label":"朝阳区"},{"value":"丰台区","label":"丰台区"},{"value":"石景山区","label":"石景山区"},{"value":"海淀区","label":"海淀区"},{"value":"门头沟区","label":"门头沟区"},{"value":"房山区","label":"房山区"},{"value":"通州区","label":"通州区"},{"value":"顺义区","label":"顺义区"},{"value":"昌平区","label":"昌平区"},{"value":"大兴区","label":"大兴区"},{"value":"怀柔区","label":"怀柔区"},{"value":"平谷区","label":"平谷区"},{"value":"密云区","label":"密云区"},{"value":"延庆区","label":"延庆区"}]},{"value":"天津市","label":"天津市","children":[{"value":"和平区","label":"和平区"},{"value":"河东区","label":"河东区"},{"value":"河西区","label":"河西区"},{"value":"南开区","label":"南开区"},{"value":"河北区","label":"河北区"},{"value":"红桥区","label":"红桥区"},{"value":"东丽区","label":"东丽区"},{"value":"西青区","label":"西青区"},{"value":"津南区","label":"津南区"},{"value":"北辰区","label":"北辰区"},{"value":"武清区","label":"武清区"},{"value":"宝坻区","label":"宝坻区"},{"value":"滨海新区","label":"滨海新区"},{"value":"宁河区","label":"宁河区"},{"value":"静海区","label":"静海区"},{"value":"蓟州区","label":"蓟州区"}]},{"value":"河北省","label":"河北省","children":[{"value":"石家庄市","label":"石家庄市"},{"value":"唐山市","label":"唐山市"},{"value":"秦皇岛市","label":"秦皇岛市"},{"value":"邯郸市","label":"邯郸市"},{"value":"邢台市","label":"邢台市"},{"value":"保定市","label":"保定市"},{"value":"张家口市","label":"张家口市"},{"value":"承德市","label":"承德市"},{"value":"沧州市","label":"沧州市"},{"value":"廊坊市","label":"廊坊市"},{"value":"衡水市","label":"衡水市"},{"value":"定州市","label":"定州市"},{"value":"辛集市","label":"辛集市"}]},{"value":"山西省","label":"山西省","children":[{"value":"太原市","label":"太原市"},{"value":"大同市","label":"大同市"},{"value":"阳泉市","label":"阳泉市"},{"value":"长治市","label":"长治市"},{"value":"晋城市","label":"晋城市"},{"value":"朔州市","label":"朔州市"},{"value":"晋中市","label":"晋中市"},{"value":"运城市","label":"运城市"},{"value":"忻州市","label":"忻州市"},{"value":"临汾市","label":"临汾市"},{"value":"吕梁市","label":"吕梁市"}]},{"value":"内蒙古自治区","label":"内蒙古自治区","children":[{"value":"呼和浩特市","label":"呼和浩特市"},{"value":"包头市","label":"包头市"},{"value":"乌海市","label":"乌海市"},{"value":"赤峰市","label":"赤峰市"},{"value":"通辽市","label":"通辽市"},{"value":"鄂尔多斯市","label":"鄂尔多斯市"},{"value":"呼伦贝尔市","label":"呼伦贝尔市"},{"value":"巴彦淖尔市","label":"巴彦淖尔市"},{"value":"乌兰察布市","label":"乌兰察布市"},{"value":"兴安盟","label":"兴安盟"},{"value":"锡林郭勒盟","label":"锡林郭勒盟"},{"value":"阿拉善盟","label":"阿拉善盟"}]},{"value":"辽宁省","label":"辽宁省","children":[{"value":"沈阳市","label":"沈阳市"},{"value":"大连市","label":"大连市"},{"value":"鞍山市","label":"鞍山市"},{"value":"抚顺市","label":"抚顺市"},{"value":"本溪市","label":"本溪市"},{"value":"丹东市","label":"丹东市"},{"value":"锦州市","label":"锦州市"},{"value":"营口市","label":"营口市"},{"value":"阜新市","label":"阜新市"},{"value":"辽阳市","label":"辽阳市"},{"value":"盘锦市","label":"盘锦市"},{"value":"铁岭市","label":"铁岭市"},{"value":"朝阳市","label":"朝阳市"},{"value":"葫芦岛市","label":"葫芦岛市"}]},{"value":"吉林省","label":"吉林省","children":[{"value":"长春市","label":"长春市"},{"value":"吉林市","label":"吉林市"},{"value":"四平市","label":"四平市"},{"value":"辽源市","label":"辽源市"},{"value":"通化市","label":"通化市"},{"value":"白山市","label":"白山市"},{"value":"松原市","label":"松原市"},{"value":"白城市","label":"白城市"},{"value":"延边朝鲜族自治州","label":"延边朝鲜族自治州"}]},{"value":"黑龙江省","label":"黑龙江省","children":[{"value":"哈尔滨市","label":"哈尔滨市"},{"value":"齐齐哈尔市","label":"齐齐哈尔市"},{"value":"鸡西市","label":"鸡西市"},{"value":"鹤岗市","label":"鹤岗市"},{"value":"双鸭山市","label":"双鸭山市"},{"value":"大庆市","label":"大庆市"},{"value":"伊春市","label":"伊春市"},{"value":"佳木斯市","label":"佳木斯市"},{"value":"七台河市","label":"七台河市"},{"value":"牡丹江市","label":"牡丹江市"},{"value":"黑河市","label":"黑河市"},{"value":"绥化市","label":"绥化市"},{"value":"大兴安岭地区","label":"大兴安岭地区"}]},{"value":"上海市","label":"上海市","children":[{"value":"黄浦区","label":"黄浦区"},{"value":"徐汇区","label":"徐汇区"},{"value":"长宁区","label":"长宁区"},{"value":"静安区","label":"静安区"},{"value":"普陀区","label":"普陀区"},{"value":"虹口区","label":"虹口区"},{"value":"杨浦区","label":"杨浦区"},{"value":"闵行区","label":"闵行区"},{"value":"宝山区","label":"宝山区"},{"value":"嘉定区","label":"嘉定区"},{"value":"浦东新区","label":"浦东新区"},{"value":"金山区","label":"金山区"},{"value":"松江区","label":"松江区"},{"value":"青浦区","label":"青浦区"},{"value":"奉贤区","label":"奉贤区"},{"value":"崇明区","label":"崇明区"}]},{"value":"江苏省","label":"江苏省","children":[{"value":"南京市","label":"南京市"},{"value":"无锡市","label":"无锡市"},{"value":"徐州市","label":"徐州市"},{"value":"常州市","label":"常州市"},{"value":"苏州市","label":"苏州市"},{"value":"南通市","label":"南通市"},{"value":"连云港市","label":"连云港市"},{"value":"淮安市","label":"淮安市"},{"value":"盐城市","label":"盐城市"},{"value":"扬州市","label":"扬州市"},{"value":"镇江市","label":"镇江市"},{"value":"泰州市","label":"泰州市"},{"value":"宿迁市","label":"宿迁市"}]},{"value":"浙江省","label":"浙江省","children":[{"value":"杭州市","label":"杭州市"},{"value":"宁波市","label":"宁波市"},{"value":"温州市","label":"温州市"},{"value":"嘉兴市","label":"嘉兴市"},{"value":"湖州市","label":"湖州市"},{"value":"绍兴市","label":"绍兴市"},{"value":"金华市","label":"金华市"},{"value":"衢州市","label":"衢州市"},{"value":"舟山市","label":"舟山市"},{"value":"台州市","label":"台州市"},{"value":"丽水市","label":"丽水市"}]},{"value":"安徽省","label":"安徽省","children":[{"value":"合肥市","label":"合肥市"},{"value":"芜湖市","label":"芜湖市"},{"value":"蚌埠市","label":"蚌埠市"},{"value":"淮南市","label":"淮南市"},{"value":"马鞍山市","label":"马鞍山市"},{"value":"淮北市","label":"淮北市"},{"value":"铜陵市","label":"铜陵市"},{"value":"安庆市","label":"安庆市"},{"value":"黄山市","label":"黄山市"},{"value":"滁州市","label":"滁州市"},{"value":"阜阳市","label":"阜阳市"},{"value":"宿州市","label":"宿州市"},{"value":"六安市","label":"六安市"},{"value":"亳州市","label":"亳州市"},{"value":"池州市","label":"池州市"},{"value":"宣城市","label":"宣城市"}]},{"value":"福建省","label":"福建省","children":[{"value":"福州市","label":"福州市"},{"value":"厦门市","label":"厦门市"},{"value":"莆田市","label":"莆田市"},{"value":"三明市","label":"三明市"},{"value":"泉州市","label":"泉州市"},{"value":"漳州市","label":"漳州市"},{"value":"南平市","label":"南平市"},{"value":"龙岩市","label":"龙岩市"},{"value":"宁德市","label":"宁德市"}]},{"value":"江西省","label":"江西省","children":[{"value":"南昌市","label":"南昌市"},{"value":"景德镇市","label":"景德镇市"},{"value":"萍乡市","label":"萍乡市"},{"value":"九江市","label":"九江市"},{"value":"新余市","label":"新余市"},{"value":"鹰潭市","label":"鹰潭市"},{"value":"赣州市","label":"赣州市"},{"value":"吉安市","label":"吉安市"},{"value":"宜春市","label":"宜春市"},{"value":"抚州市","label":"抚州市"},{"value":"上饶市","label":"上饶市"}]},{"value":"山东省","label":"山东省","children":[{"value":"济南市","label":"济南市"},{"value":"青岛市","label":"青岛市"},{"value":"淄博市","label":"淄博市"},{"value":"枣庄市","label":"枣庄市"},{"value":"东营市","label":"东营市"},{"value":"烟台市","label":"烟台市"},{"value":"潍坊市","label":"潍坊市"},{"value":"济宁市","label":"济宁市"},{"value":"泰安市","label":"泰安市"},{"value":"威海市","label":"威海市"},{"value":"日照市","label":"日照市"},{"value":"莱芜市","label":"莱芜市"},{"value":"临沂市","label":"临沂市"},{"value":"德州市","label":"德州市"},{"value":"聊城市","label":"聊城市"},{"value":"滨州市","label":"滨州市"},{"value":"菏泽市","label":"菏泽市"}]},{"value":"河南省","label":"河南省","children":[{"value":"郑州市","label":"郑州市"},{"value":"开封市","label":"开封市"},{"value":"洛阳市","label":"洛阳市"},{"value":"平顶山市","label":"平顶山市"},{"value":"安阳市","label":"安阳市"},{"value":"鹤壁市","label":"鹤壁市"},{"value":"新乡市","label":"新乡市"},{"value":"焦作市","label":"焦作市"},{"value":"濮阳市","label":"濮阳市"},{"value":"许昌市","label":"许昌市"},{"value":"漯河市","label":"漯河市"},{"value":"三门峡市","label":"三门峡市"},{"value":"南阳市","label":"南阳市"},{"value":"商丘市","label":"商丘市"},{"value":"信阳市","label":"信阳市"},{"value":"周口市","label":"周口市"},{"value":"驻马店市","label":"驻马店市"},{"value":"济源市","label":"济源市"}]},{"value":"湖北省","label":"湖北省","children":[{"value":"武汉市","label":"武汉市"},{"value":"黄石市","label":"黄石市"},{"value":"十堰市","label":"十堰市"},{"value":"宜昌市","label":"宜昌市"},{"value":"襄阳市","label":"襄阳市"},{"value":"鄂州市","label":"鄂州市"},{"value":"荆门市","label":"荆门市"},{"value":"孝感市","label":"孝感市"},{"value":"荆州市","label":"荆州市"},{"value":"黄冈市","label":"黄冈市"},{"value":"咸宁市","label":"咸宁市"},{"value":"随州市","label":"随州市"},{"value":"恩施土家族苗族自治州","label":"恩施土家族苗族自治州"},{"value":"仙桃市","label":"仙桃市"},{"value":"潜江市","label":"潜江市"},{"value":"天门市","label":"天门市"},{"value":"神农架林区","label":"神农架林区"}]},{"value":"湖南省","label":"湖南省","children":[{"value":"长沙市","label":"长沙市"},{"value":"株洲市","label":"株洲市"},{"value":"湘潭市","label":"湘潭市"},{"value":"衡阳市","label":"衡阳市"},{"value":"邵阳市","label":"邵阳市"},{"value":"岳阳市","label":"岳阳市"},{"value":"常德市","label":"常德市"},{"value":"张家界市","label":"张家界市"},{"value":"益阳市","label":"益阳市"},{"value":"郴州市","label":"郴州市"},{"value":"永州市","label":"永州市"},{"value":"怀化市","label":"怀化市"},{"value":"娄底市","label":"娄底市"},{"value":"湘西土家族苗族自治州","label":"湘西土家族苗族自治州"}]},{"value":"广东省","label":"广东省","children":[{"value":"广州市","label":"广州市"},{"value":"韶关市","label":"韶关市"},{"value":"深圳市","label":"深圳市"},{"value":"珠海市","label":"珠海市"},{"value":"汕头市","label":"汕头市"},{"value":"佛山市","label":"佛山市"},{"value":"江门市","label":"江门市"},{"value":"湛江市","label":"湛江市"},{"value":"茂名市","label":"茂名市"},{"value":"肇庆市","label":"肇庆市"},{"value":"惠州市","label":"惠州市"},{"value":"梅州市","label":"梅州市"},{"value":"汕尾市","label":"汕尾市"},{"value":"河源市","label":"河源市"},{"value":"阳江市","label":"阳江市"},{"value":"清远市","label":"清远市"},{"value":"东莞市","label":"东莞市"},{"value":"中山市","label":"中山市"},{"value":"潮州市","label":"潮州市"},{"value":"揭阳市","label":"揭阳市"},{"value":"云浮市","label":"云浮市"}]},{"value":"广西壮族自治区","label":"广西壮族自治区","children":[{"value":"南宁市","label":"南宁市"},{"value":"柳州市","label":"柳州市"},{"value":"桂林市","label":"桂林市"},{"value":"梧州市","label":"梧州市"},{"value":"北海市","label":"北海市"},{"value":"防城港市","label":"防城港市"},{"value":"钦州市","label":"钦州市"},{"value":"贵港市","label":"贵港市"},{"value":"玉林市","label":"玉林市"},{"value":"百色市","label":"百色市"},{"value":"贺州市","label":"贺州市"},{"value":"河池市","label":"河池市"},{"value":"来宾市","label":"来宾市"},{"value":"崇左市","label":"崇左市"}]},{"value":"海南省","label":"海南省","children":[{"value":"海口市","label":"海口市"},{"value":"三亚市","label":"三亚市"},{"value":"三沙市","label":"三沙市"},{"value":"儋州市","label":"儋州市"},{"value":"五指山市","label":"五指山市"},{"value":"琼海市","label":"琼海市"},{"value":"文昌市","label":"文昌市"},{"value":"万宁市","label":"万宁市"},{"value":"东方市","label":"东方市"},{"value":"定安县","label":"定安县"},{"value":"屯昌县","label":"屯昌县"},{"value":"澄迈县","label":"澄迈县"},{"value":"临高县","label":"临高县"},{"value":"白沙黎族自治县","label":"白沙黎族自治县"},{"value":"昌江黎族自治县","label":"昌江黎族自治县"},{"value":"乐东黎族自治县","label":"乐东黎族自治县"},{"value":"陵水黎族自治县","label":"陵水黎族自治县"},{"value":"保亭黎族苗族自治县","label":"保亭黎族苗族自治县"},{"value":"琼中黎族苗族自治县","label":"琼中黎族苗族自治县"}]},{"value":"重庆市","label":"重庆市","children":[{"value":"万州区","label":"万州区"},{"value":"涪陵区","label":"涪陵区"},{"value":"渝中区","label":"渝中区"},{"value":"大渡口区","label":"大渡口区"},{"value":"江北区","label":"江北区"},{"value":"沙坪坝区","label":"沙坪坝区"},{"value":"九龙坡区","label":"九龙坡区"},{"value":"南岸区","label":"南岸区"},{"value":"北碚区","label":"北碚区"},{"value":"綦江区","label":"綦江区"},{"value":"大足区","label":"大足区"},{"value":"渝北区","label":"渝北区"},{"value":"巴南区","label":"巴南区"},{"value":"黔江区","label":"黔江区"},{"value":"长寿区","label":"长寿区"},{"value":"江津区","label":"江津区"},{"value":"合川区","label":"合川区"},{"value":"永川区","label":"永川区"},{"value":"南川区","label":"南川区"},{"value":"璧山区","label":"璧山区"},{"value":"铜梁区","label":"铜梁区"},{"value":"潼南区","label":"潼南区"},{"value":"荣昌区","label":"荣昌区"},{"value":"开州区","label":"开州区"},{"value":"梁平县","label":"梁平县"},{"value":"城口县","label":"城口县"},{"value":"丰都县","label":"丰都县"},{"value":"垫江县","label":"垫江县"},{"value":"武隆县","label":"武隆县"},{"value":"忠县","label":"忠县"},{"value":"云阳县","label":"云阳县"},{"value":"奉节县","label":"奉节县"},{"value":"巫山县","label":"巫山县"},{"value":"巫溪县","label":"巫溪县"},{"value":"石柱土家族自治县","label":"石柱土家族自治县"},{"value":"秀山土家族苗族自治县","label":"秀山土家族苗族自治县"},{"value":"酉阳土家族苗族自治县","label":"酉阳土家族苗族自治县"},{"value":"彭水苗族土家族自治县","label":"彭水苗族土家族自治县"}]},{"value":"四川省","label":"四川省","children":[{"value":"成都市","label":"成都市"},{"value":"自贡市","label":"自贡市"},{"value":"攀枝花市","label":"攀枝花市"},{"value":"泸州市","label":"泸州市"},{"value":"德阳市","label":"德阳市"},{"value":"绵阳市","label":"绵阳市"},{"value":"广元市","label":"广元市"},{"value":"遂宁市","label":"遂宁市"},{"value":"内江市","label":"内江市"},{"value":"乐山市","label":"乐山市"},{"value":"南充市","label":"南充市"},{"value":"眉山市","label":"眉山市"},{"value":"宜宾市","label":"宜宾市"},{"value":"广安市","label":"广安市"},{"value":"达州市","label":"达州市"},{"value":"雅安市","label":"雅安市"},{"value":"巴中市","label":"巴中市"},{"value":"资阳市","label":"资阳市"},{"value":"阿坝藏族羌族自治州","label":"阿坝藏族羌族自治州"},{"value":"甘孜藏族自治州","label":"甘孜藏族自治州"},{"value":"凉山彝族自治州","label":"凉山彝族自治州"}]},{"value":"贵州省","label":"贵州省","children":[{"value":"贵阳市","label":"贵阳市"},{"value":"六盘水市","label":"六盘水市"},{"value":"遵义市","label":"遵义市"},{"value":"安顺市","label":"安顺市"},{"value":"毕节市","label":"毕节市"},{"value":"铜仁市","label":"铜仁市"},{"value":"黔西南布依族苗族自治州","label":"黔西南布依族苗族自治州"},{"value":"黔东南苗族侗族自治州","label":"黔东南苗族侗族自治州"},{"value":"黔南布依族苗族自治州","label":"黔南布依族苗族自治州"}]},{"value":"云南省","label":"云南省","children":[{"value":"昆明市","label":"昆明市"},{"value":"曲靖市","label":"曲靖市"},{"value":"玉溪市","label":"玉溪市"},{"value":"保山市","label":"保山市"},{"value":"昭通市","label":"昭通市"},{"value":"丽江市","label":"丽江市"},{"value":"普洱市","label":"普洱市"},{"value":"临沧市","label":"临沧市"},{"value":"楚雄彝族自治州","label":"楚雄彝族自治州"},{"value":"红河哈尼族彝族自治州","label":"红河哈尼族彝族自治州"},{"value":"文山壮族苗族自治州","label":"文山壮族苗族自治州"},{"value":"西双版纳傣族自治州","label":"西双版纳傣族自治州"},{"value":"大理白族自治州","label":"大理白族自治州"},{"value":"德宏傣族景颇族自治州","label":"德宏傣族景颇族自治州"},{"value":"怒江傈僳族自治州","label":"怒江傈僳族自治州"},{"value":"迪庆藏族自治州","label":"迪庆藏族自治州"}]},{"value":"西藏自治区","label":"西藏自治区","children":[{"value":"拉萨市","label":"拉萨市"},{"value":"日喀则市","label":"日喀则市"},{"value":"昌都市","label":"昌都市"},{"value":"林芝市","label":"林芝市"},{"value":"山南市","label":"山南市"},{"value":"那曲地区","label":"那曲地区"},{"value":"阿里地区","label":"阿里地区"}]},{"value":"陕西省","label":"陕西省","children":[{"value":"西安市","label":"西安市"},{"value":"铜川市","label":"铜川市"},{"value":"宝鸡市","label":"宝鸡市"},{"value":"咸阳市","label":"咸阳市"},{"value":"渭南市","label":"渭南市"},{"value":"延安市","label":"延安市"},{"value":"汉中市","label":"汉中市"},{"value":"榆林市","label":"榆林市"},{"value":"安康市","label":"安康市"},{"value":"商洛市","label":"商洛市"}]},{"value":"甘肃省","label":"甘肃省","children":[{"value":"兰州市","label":"兰州市"},{"value":"嘉峪关市","label":"嘉峪关市"},{"value":"金昌市","label":"金昌市"},{"value":"白银市","label":"白银市"},{"value":"天水市","label":"天水市"},{"value":"武威市","label":"武威市"},{"value":"张掖市","label":"张掖市"},{"value":"平凉市","label":"平凉市"},{"value":"酒泉市","label":"酒泉市"},{"value":"庆阳市","label":"庆阳市"},{"value":"定西市","label":"定西市"},{"value":"陇南市","label":"陇南市"},{"value":"临夏回族自治州","label":"临夏回族自治州"},{"value":"甘南藏族自治州","label":"甘南藏族自治州"}]},{"value":"青海省","label":"青海省","children":[{"value":"西宁市","label":"西宁市"},{"value":"海东市","label":"海东市"},{"value":"海北藏族自治州","label":"海北藏族自治州"},{"value":"黄南藏族自治州","label":"黄南藏族自治州"},{"value":"海南藏族自治州","label":"海南藏族自治州"},{"value":"果洛藏族自治州","label":"果洛藏族自治州"},{"value":"玉树藏族自治州","label":"玉树藏族自治州"},{"value":"海西蒙古族藏族自治州","label":"海西蒙古族藏族自治州"}]},{"value":"宁夏回族自治区","label":"宁夏回族自治区","children":[{"value":"银川市","label":"银川市"},{"value":"石嘴山市","label":"石嘴山市"},{"value":"吴忠市","label":"吴忠市"},{"value":"固原市","label":"固原市"},{"value":"中卫市","label":"中卫市"}]},{"value":"新疆维吾尔自治区","label":"新疆维吾尔自治区","children":[{"value":"乌鲁木齐市","label":"乌鲁木齐市"},{"value":"克拉玛依市","label":"克拉玛依市"},{"value":"吐鲁番市","label":"吐鲁番市"},{"value":"哈密市","label":"哈密市"},{"value":"昌吉回族自治州","label":"昌吉回族自治州"},{"value":"博尔塔拉蒙古自治州","label":"博尔塔拉蒙古自治州"},{"value":"巴音郭楞蒙古自治州","label":"巴音郭楞蒙古自治州"},{"value":"阿克苏地区","label":"阿克苏地区"},{"value":"克孜勒苏柯尔克孜自治州","label":"克孜勒苏柯尔克孜自治州"},{"value":"喀什地区","label":"喀什地区"},{"value":"和田地区","label":"和田地区"},{"value":"伊犁哈萨克自治州","label":"伊犁哈萨克自治州"},{"value":"塔城地区","label":"塔城地区"},{"value":"阿勒泰地区","label":"阿勒泰地区"},{"value":"石河子市","label":"石河子市"},{"value":"阿拉尔市","label":"阿拉尔市"},{"value":"图木舒克市","label":"图木舒克市"},{"value":"五家渠市","label":"五家渠市"},{"value":"铁门关市","label":"铁门关市"}]}]
--------------------------------------------------------------------------------
/src/components/utils.js:
--------------------------------------------------------------------------------
1 | const componentObj = {
2 | input: generateInputComponent,
3 | button: generateButtonComponent,
4 | buttonGroup: generateButtonGroupComponent,
5 | reset: generateResetComponent,
6 | submit: generateSubmitComponent,
7 | icon: generateIconComponent,
8 | radio: generateRadioComponent,
9 | radioGroup: generateRadioGroupComponent,
10 | checkbox: generateCheckboxComponent,
11 | checkboxGroup: generateCheckboxGroupComponent,
12 | switch: generateSwitchComponent,
13 | select: generateSelectComponent,
14 | slider: generateSliderComponent,
15 | date: generateDateComponent,
16 | time: generateTimeComponent,
17 | cascader: generateCascaderComponent,
18 | inputNumber: generateInputNumberComponent,
19 | rate: generateRateComponent,
20 | upload: generateUploadComponent,
21 | colorPicker: generateColorPickerComponent,
22 | col: generateColComponent,
23 | formItem: generateFormItemComponent,
24 | }
25 |
26 | function generateInputComponent(h, formData = {}, obj, vm) {
27 | const key = obj.key? obj.key : ''
28 | let children = []
29 |
30 | if (obj.children) {
31 | children = obj.children.map(item => {
32 | let component
33 | if (item.type == 'span') {
34 | component = h('span', {
35 | slot: item.slot
36 | }, [item.text])
37 | } else {
38 | let func = componentObj[item.type]
39 | component = func? func.call(vm, h, formData, item, vm) : null
40 | }
41 | return component
42 | })
43 | }
44 |
45 | return h('Input', {
46 | props: {
47 | value: key? formData[key] : '',
48 | ...obj.props
49 | },
50 | style: obj.style,
51 | on: {
52 | ...translateEvents(obj.events, vm),
53 | input(val) {
54 | if (key) {
55 | formData[key] = val
56 | }
57 | }
58 | },
59 | slot: obj.slot
60 | }, children)
61 | }
62 |
63 | function generateButtonComponent(h, formData = {}, obj, vm) {
64 | return h('Button', {
65 | props: obj.props,
66 | slot: obj.slot,
67 | style: obj.style,
68 | on: obj.events
69 | }, [obj.text])
70 | }
71 |
72 | function generateButtonGroupComponent(h, formData = {}, obj, vm) {
73 | const components = obj.children.map(item => {
74 | return h('Button', {
75 | props: item.props? item.props : item,
76 | slot: item.slot,
77 | style: item.style,
78 | on: item.events
79 | }, [item.text])
80 | })
81 |
82 | return h('ButtonGroup', {
83 | props: obj.props,
84 | style: obj.style,
85 | slot: obj.slot,
86 | }, [components])
87 | }
88 |
89 | function generateSubmitComponent(h, formData = {}, obj, vm) {
90 | const components = []
91 | const submit = h('Button', {
92 | props: obj.props,
93 | style: obj.style,
94 | on: {
95 | click() {
96 | vm.$refs['form'].validate((valid) => {
97 | if (valid) {
98 | obj.success.call(vm, formData)
99 | } else {
100 | obj.fail.call(vm, formData)
101 | }
102 | })
103 | }
104 | }
105 | }, [obj.text])
106 |
107 | components.push(submit)
108 |
109 | if (obj.reset) {
110 | const reset = h('Button', {
111 | props: obj.reset.props,
112 | style: {
113 | marginLeft: '10px',
114 | ...obj.style,
115 | },
116 | on: {
117 | click() {
118 | vm.$refs['form'].resetFields()
119 | }
120 | }
121 | }, [obj.reset.text])
122 |
123 | components.push(reset)
124 | }
125 |
126 | return h('div', components)
127 | }
128 |
129 | function generateResetComponent(h, formData = {}, obj, vm) {
130 | return h('Button', {
131 | props: obj.props,
132 | style: obj.style,
133 | slot: obj.slot,
134 | on: {
135 | click() {
136 | vm.$refs['form'].resetFields()
137 | }
138 | }
139 | }, [obj.text])
140 | }
141 |
142 | function generateIconComponent(h, formData = {}, obj, vm) {
143 | return h('Icon', {
144 | props: obj.props,
145 | style: obj.style,
146 | slot: obj.slot,
147 | })
148 | }
149 |
150 | function generateRadioComponent(h, formData = {}, obj, vm) {
151 | const key = obj.key? obj.key : ''
152 |
153 | return h('Radio', {
154 | props: {
155 | value: key? formData[key] : false,
156 | ...obj.props
157 | },
158 | style: obj.style,
159 | slot: obj.slot,
160 | on: {
161 | ...translateEvents(obj.events, vm),
162 | input(val) {
163 | if (key) {
164 | formData[key] = val
165 | }
166 | }
167 | }
168 | }, [obj.text])
169 | }
170 |
171 |
172 | function generateRadioGroupComponent(h, formData = {}, obj, vm) {
173 | let components = []
174 | const key = obj.key? obj.key : ''
175 | if (obj.children) {
176 | components = obj.children.map(child => {
177 | return h('Radio', {
178 | props: child.props? child.props : child
179 | }, [child.text])
180 | })
181 | }
182 |
183 | return h('RadioGroup', {
184 | props: {
185 | value: key? formData[key] : '',
186 | ...obj.props
187 | },
188 | style: obj.style,
189 | slot: obj.slot,
190 | on: {
191 | ...translateEvents(obj.events, vm),
192 | input(val) {
193 | if (key) {
194 | formData[key] = val
195 | }
196 | }
197 | }
198 | }, [components])
199 | }
200 |
201 |
202 | function generateCheckboxComponent(h, formData = {}, obj, vm) {
203 | const key = obj.key? obj.key : ''
204 |
205 | return h('Checkbox', {
206 | props: {
207 | value: key? formData[key] : '',
208 | ...obj.props
209 | },
210 | style: obj.style,
211 | slot: obj.slot,
212 | on: {
213 | ...translateEvents(obj.events, vm),
214 | input(val) {
215 | if (key) {
216 | formData[key] = val
217 | }
218 | }
219 | }
220 | }, [obj.text])
221 |
222 | }
223 |
224 | function generateCheckboxGroupComponent(h, formData = {}, obj, vm) {
225 | let components = []
226 | const key = obj.key? obj.key : ''
227 |
228 | if (obj.children) {
229 | components = obj.children.map(child => {
230 | return h('Checkbox', {
231 | props: child.props? child.props : child
232 | }, [child.text])
233 | })
234 | }
235 |
236 | return h('CheckboxGroup', {
237 | props: {
238 | value: key? formData[key] : [],
239 | ...obj.props
240 | },
241 | style: obj.style,
242 | slot: obj.slot,
243 | on: {
244 | ...translateEvents(obj.events, vm),
245 | input(val) {
246 | if (key) {
247 | formData[key] = val
248 | }
249 | }
250 | }
251 | }, [components])
252 | }
253 |
254 | function generateSwitchComponent(h, formData = {}, obj, vm) {
255 | const key = obj.key? obj.key : ''
256 |
257 | let components = []
258 | if (obj.children) {
259 | components = obj.children.map(item => {
260 | let temp
261 | if (item.type == 'icon') {
262 | temp = generateIconComponent(h, formData, item)
263 | } else if (item.type == 'span') {
264 | temp = h('span', {
265 | slot: item.slot,
266 | }, [item.text])
267 | }
268 |
269 | return temp
270 | })
271 | }
272 |
273 | return h('i-switch', {
274 | props: {
275 | value: key? formData[key] : false,
276 | ...obj.props
277 | },
278 | style: obj.style,
279 | slot: obj.slot,
280 | on: {
281 | ...translateEvents(obj.events, vm),
282 | input(val) {
283 | if (key) {
284 | formData[key] = val
285 | }
286 | }
287 | },
288 | }, components)
289 | }
290 |
291 | function generateSelectComponent(h, formData = {}, obj, vm) {
292 | const key = obj.key? obj.key : ''
293 |
294 | let components = []
295 |
296 | if (obj.children) {
297 | components = obj.children.map(item => {
298 | if (item.type == 'optionGroup') {
299 | return h('OptionGroup', {
300 | props: item.props? item.props : item
301 | }, item.children.map(child => {
302 | return h('Option', {
303 | props: child.props? child.props : child
304 | })
305 | }))
306 | } else {
307 | return h('Option', {
308 | props: item.props? item.props : item
309 | })
310 | }
311 | })
312 | }
313 |
314 | return h('Select', {
315 | props: {
316 | value: formData[key],
317 | ...obj.props
318 | },
319 | style: obj.style,
320 | on: {
321 | ...translateEvents(obj.events, vm),
322 | input(val) {
323 | if (key) {
324 | formData[key] = val
325 | }
326 | }
327 | },
328 | slot: obj.slot
329 | }, components)
330 | }
331 |
332 | function generateSliderComponent(h, formData = {}, obj, vm) {
333 | const key = obj.key? obj.key : ''
334 |
335 | return h('Slider', {
336 | props: {
337 | value: formData[key],
338 | ...obj.props
339 | },
340 | style: obj.style,
341 | slot: obj.slot,
342 | on: {
343 | ...translateEvents(obj.events, vm),
344 | input(val) {
345 | if (key) {
346 | formData[key] = val
347 | }
348 | }
349 | }
350 | })
351 | }
352 |
353 |
354 | function generateDateComponent(h, formData = {}, obj, vm) {
355 | const key = obj.key? obj.key : ''
356 | const type = obj.props.type
357 | return h('DatePicker', {
358 | props: {
359 | value: key? formData[key] : '',
360 | ...obj.props
361 | },
362 | style: obj.style,
363 | slot: obj.slot,
364 | on: {
365 | ...translateEvents(obj.events, vm),
366 | input(date) {
367 | if (key) {
368 | if (type.includes('datetime')) {
369 | if (Array.isArray(date)) {
370 | formData[key] = date? date.map(item => item? item.toLocaleDateString()
371 | + ' ' + item.toTimeString().split(' ')[0] : '') : []
372 | } else {
373 | formData[key] = date? date.toLocaleDateString() + ' ' + date.toTimeString().split(' ')[0] : ''
374 | }
375 | } else {
376 | if (Array.isArray(date)) {
377 | formData[key] = date? date.map(item => item? item.toLocaleDateString() : '') : []
378 | } else {
379 | formData[key] = date? date.toLocaleDateString() : ''
380 | }
381 | }
382 | }
383 | },
384 | }
385 | })
386 | }
387 |
388 | function generateTimeComponent(h, formData = {}, obj, vm) {
389 | const key = obj.key? obj.key : ''
390 |
391 | return h('TimePicker', {
392 | props: {
393 | value: key? formData[key] : '',
394 | ...obj.props
395 | },
396 | style: obj.style,
397 | slot: obj.slot,
398 | on: {
399 | ...translateEvents(obj.events, vm),
400 | input(val) {
401 | if (key) {
402 | formData[key] = val
403 | }
404 | }
405 | }
406 | })
407 | }
408 |
409 | function generateCascaderComponent(h, formData = {}, obj, vm) {
410 | const key = obj.key? obj.key : ''
411 |
412 | return h('Cascader', {
413 | props: {
414 | value: key? formData[key] : [],
415 | ...obj.props
416 | },
417 | style: obj.style,
418 | slot: obj.slot,
419 | on: {
420 | ...translateEvents(obj.events, vm),
421 | input(val) {
422 | if (key) {
423 | formData[key] = val
424 | }
425 | }
426 | }
427 | })
428 | }
429 |
430 | function generateInputNumberComponent(h, formData = {}, obj, vm) {
431 | const key = obj.key? obj.key : ''
432 |
433 | return h('InputNumber', {
434 | props: {
435 | value: key? formData[key] : null,
436 | ...obj.props
437 | },
438 | style: obj.style,
439 | slot: obj.slot,
440 | on: {
441 | ...translateEvents(obj.events, vm),
442 | input(val) {
443 | if (key) {
444 | formData[key] = val
445 | }
446 | }
447 | }
448 | })
449 | }
450 |
451 | function generateRateComponent(h, formData = {}, obj, vm) {
452 | const key = obj.key? obj.key : ''
453 |
454 | return h('Rate', {
455 | props: {
456 | value: key? formData[key] : 0,
457 | ...obj.props
458 | },
459 | slot: obj.slot,
460 | style: obj.style,
461 | on: {
462 | ...translateEvents(obj.events, vm),
463 | input(val) {
464 | if (key) {
465 | formData[key] = val
466 | }
467 | }
468 | }
469 | })
470 | }
471 |
472 | function generateUploadComponent(h, formData = {}, obj, vm) {
473 | let components = []
474 |
475 | if (obj.children) {
476 | components = obj.children.map(item => {
477 | let func = componentObj[item.type]
478 | return func? func.call(vm, h, formData, item, vm) : null
479 | })
480 | }
481 | return h('Upload', {
482 | props: obj.props,
483 | style: obj.style,
484 | slot: obj.slot,
485 | }, components)
486 | }
487 |
488 | function generateColorPickerComponent(h, formData = {}, obj, vm) {
489 | const key = obj.key? obj.key : ''
490 |
491 | return h('ColorPicker', {
492 | props: {
493 | value: key? formData[key] : '',
494 | ...obj.props
495 | },
496 | style: obj.style,
497 | slot: obj.slot,
498 | on: {
499 | ...translateEvents(obj.events, vm),
500 | input(val) {
501 | if (key) {
502 | formData[key] = val
503 | }
504 | }
505 | }
506 | })
507 | }
508 |
509 | function generateColComponent(h, obj, component) {
510 | return h('Col', {
511 | props: {
512 | span: obj.span,
513 | push: obj.push,
514 | pull: obj.pull,
515 | offset: obj.offset,
516 | order: obj.order,
517 | 'class-name': obj['class-name'] || obj['className'],
518 | xs: obj.xs,
519 | sm: obj.sm,
520 | md: obj.md,
521 | lg: obj.lg,
522 | },
523 | }, [component])
524 | }
525 |
526 | function generateFormItemComponent(h, obj, component) {
527 | return h('FormItem', {
528 | class: obj.className,
529 | props: {
530 | label: obj.label,
531 | rules: obj.rules,
532 | prop: obj.key? obj.key : '',
533 | 'label-width':obj['label-width'] || obj['labelWidth'],
534 | 'label-for': obj['label-for'] || obj['labelFor'],
535 | error: obj.error,
536 | 'show-message': obj['show-message'] || obj['showMessage'],
537 | }
538 | }, [component])
539 | }
540 |
541 |
542 | function translateEvents(events = {}, vm) {
543 | const result = {}
544 | for (let event in events) {
545 | result[event] = events[event].bind(vm)
546 | }
547 |
548 | return result
549 | }
550 |
551 | export default componentObj
--------------------------------------------------------------------------------
/doc.md:
--------------------------------------------------------------------------------
1 | # 文档
2 |
3 | 由于render函数不支持Vue的v-指令 所以iView的文档中有写明支持v-model的 都不要使用 所有表单数据都必须在formData里定义并设定初始值
4 |
5 | **注意事项**
6 |
7 | 某些组件（例如 button） iview 并没有提供类似于 `on-click` 这样的事件。这时，可以使用 DOM 元素原生事件代替，例如 `click`
8 | ```js
9 | type: 'button',
10 | text: '按钮',
11 | props: {
12 | type: 'primary',
13 | icon: 'ios-search'
14 | },
15 | events: {
16 | click() {
17 | alert(1)
18 | }
19 | }
20 | ```
21 |
22 | * [整体布局](#整体布局)
23 | * [表单数据](#表单数据)
24 | * [表单验证](#表单验证)
25 | * [Input输入框](#Input输入框)
26 | * [Radio单选框](#Radio单选框)
27 | * [Checkbox多选框](#Checkbox多选框)
28 | * [Button按钮](#Button按钮)
29 | * [Switch开关](#Switch开关)
30 | * [Select选择器](#Select选择器)
31 | * [Slider滑块](#Slider滑块)
32 | * [DatePicker日期选择器](#DatePicker日期选择器)
33 | * [TimePicker时间选择器](#TimePicker时间选择器)
34 | * [Cascader级联选择](#Cascader级联选择)
35 | * [InputNumber数字输入框](#InputNumber数字输入框)
36 | * [Rate评分](#Rate评分)
37 | * [Upload上传](#Upload上传)
38 | * [ColorPicker颜色选择器](#ColorPicker颜色选择器)
39 |
40 | ## 整体布局
41 | [iView栅格系统](https://www.iviewui.com/components/grid)
42 |
43 | [栅格系统在线DEMO](https://jsrun.net/GxXKp/edit)
44 | ```
45 |
59 | ```
60 | 1. 整体布局如上所示 Form为整体表单的容器 为了实现栅格系统布局 将所有表单项放在Row组件下
61 | 2. Row组件将每一行分为24格 Col为Row下面的子容器 宽度由span指定为0-24 这样就可以随意控制表单项的宽度了
62 | 3. FormItem为表单项组件 表单项组件里才是用户真正定义的组件
63 | 4. 给 FormItem 设置属性 label-for 可以指定原生的 label 标签的 for 属性，配合设置控件的 element-id 属性，可以点击 label 时聚焦控件。
64 | 5. 说明这个布局方式是为了让用户了解组件的整体布局方式 不了解也不影响使用
65 |
66 | [回到顶部↑](#文档)
67 |
68 | ## 表单数据
69 | [iView表单](https://www.iviewui.com/components/form)
70 | [表单在线DEMO](https://jsrun.net/yJXKp/edit)
71 | ```
72 | // 组件数据 Object
73 | options: {
74 | // 表单属性 非必需
75 | formProps:{},
76 | // 布局方式 非必需
77 | rowProps: {},
78 | // 表单数据 必需
79 | formData: {},
80 | // 表单项组件数据 必需
81 | formItem: [],
82 | // 提交按钮 必需
83 | submit:{},
84 | // 重置按钮 非必需
85 | reset:{},
86 | }
87 |
88 | ```
89 |
90 | ### options数据
91 |
92 | | 属性 | 说明 | 类型 | 默认值 | 必需 |
93 | | --- | ---- | ----- | ---- | ----- |
94 | | [formProps](#formProps) | 整个表单的属性 | Object | - | false |
95 | | [rowProps](#rowProps) | 表单的布局属性 | Object | - | false |
96 | | [formData](#formData) | 表单的数据 | Object | - | true |
97 | | [formItem](#formItem) | 表单项的数据 | Array | - | true |
98 | | [submit](#submit) | 表单提交按钮 | Object | - | true |
99 | | reset | 表单重置按钮 | Object | - | false |
100 |
101 | #### formProps
102 |
103 | | 属性 | 说明 | 类型 | 默认值 |
104 | | --- | ---- | ----- | ---- |
105 | |inline |是否开启行内表单模式 |Boolean |false|
106 | |label-position |表单域标签的位置，可选值为 left、right、top |String |right|
107 | |label-width |表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值| Number |-|
108 | |show-message |是否显示校验错误信息 |Boolean |true|
109 | |autocomplete |原生的 autocomplete 属性，可选值为 off 或 on |String| off|
110 |
111 |
112 | #### rowProps
113 |
114 | | 属性 | 说明 | 类型 | 默认值 |
115 | | --- | ---- | ----- | ---- |
116 | |gutter |栅格间距，单位 px，左右平分| Number| 0|
117 | |type |布局模式，可选值为flex或不选，在现代浏览器下有效 |String| -|
118 | |align |flex 布局下的垂直对齐方式，可选值为top、middle、bottom| String| -|
119 | |justify |flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between| String| -|
120 | |className |自定义的class名称 |String| -|
121 |
122 | #### formData
123 | 表单数据是你要监听的数据
124 | 假如你有一个登陆页 有两个数据你是必需的 account和pwd
125 | 那么你要在formData里定义
126 | ```
127 | formData: {
128 | // 初始值为空
129 | accout: '',
130 | pwd: '',
131 | }
132 | ```
133 | 然后在formItem里定义两个Input组件
134 | ```
135 | formItem: [
136 | {
137 | type: 'input',
138 | key: 'accout',
139 | },
140 | {
141 | type: 'input',
142 | key: 'pwd',
143 | },
144 | ]
145 | ```
146 | 这样才能实现数据监听
147 |
148 | #### formItem
149 | ```
150 | formItem: [
151 | {
152 | type: 'input',
153 | ...
154 | }
155 | ]
156 | ```
157 | formItem的子项为具体的组件属性
158 |
159 | | 属性 | 说明 | 类型 | 默认值 |
160 | | --- | ---- | ----- | ---- |
161 | |labelFor |指定原生的 label 标签的 for 属性，配合控件的 element-id 属性，可以点击 label 时聚焦控件。 |String| -|
162 | |error |表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息 |String| -|
163 | |showMessage |是否显示校验错误信息 |Boolean| true|
164 | |key | 与表单数据对应键值绑定 | String | - |
165 | |label |标签文本 |String |-|
166 | |rules |表单验证规则 |Object \| Array |-|
167 | |span |栅格的占位格数，可选值为0~24的整数，为 0 时，相当于display:none| Number \| String| -|
168 | |order |栅格的顺序，在flex布局模式下有效 |Number \| String |-|
169 | |offset |栅格左侧的间隔格数，间隔内不可以有栅格 |Number \| String |-|
170 | |push |栅格向右移动格数 |Number \| String| -|
171 | |pull |栅格向左移动格数 |Number \| String |-|
172 | |className |自定义的class名称 |String |-|
173 | |xs |<768px 响应式栅格，可为栅格数或一个包含其他属性的对象 |Number \| Object |-|
174 | |sm |≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 |Number \| Object |-|
175 | |md |≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 |Number \| Object |-|
176 | |lg |≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 |Number \| Object |-|
177 | |props | 组件属性 | Object | - |
178 | |events | 组件事件 | Object | - |
179 | |slot | 组件插槽 | String | - |
180 | |type | 组件的类型 | String | - |
181 | |children | 组件的子项 | Array | - |
182 | |text | 组件文本内容 | String | - |
183 | |labelWidth/label-width |表单域标签的宽度| Number |-|
184 |
185 | **type可选值**
186 | ```
187 | input 输入框组件
188 | button 按钮组件
189 | buttonGroup 按钮组 组件
190 | icon 图标组件
191 | radio 单选框组件
192 | radioGroup 单选框组 组件
193 | checkbox 多选框组件
194 | checkboxGroup 多选框组 组件
195 | switch 开关组件
196 | select 选择器组件
197 | slider 滑块组件
198 | date 日期组件
199 | time 时间组件
200 | cascader 级联选择器组件
201 | inputNumber 数字输入框组件
202 | rate 评分组件
203 | upload 上传组件
204 | colorPicker 颜色选择器组件
205 | ```
206 |
207 | **注意：** 在ButtonGroup、Select、RadioGroup、CheckboxGroup这几个组件里 子项的的type和props可以省略 直接写属性
208 | ```
209 | {
210 | type: 'select',
211 | children: [
212 | {
213 | props: {
214 | label: 'demo1'
215 | }
216 | },
217 | // 也可以这样写
218 | {
219 | label: 'demo1'
220 | },
221 | ]
222 | },
223 | {
224 | type: 'buttonGroup',
225 | label: '按钮组',
226 | children: [
227 | {
228 | props:{
229 | type: 'primary'
230 | },
231 | text: 'btn1',
232 | },
233 | // 也可以这样写
234 | {
235 | text: 'btn2',
236 | type: 'info'
237 | }
238 | ]
239 | }
240 | ```
241 | #### submit
242 | `submit` 和 `reset` 的属性是一样的，`reset` 按钮没有 `success` `fail`回调函数
243 |
244 | `reset` 按钮可以单独一起 也可以写在 `submit`
245 |
246 | ```
247 | submit:{},
248 | reset: {},
249 | 或者
250 | submit:{
251 | reset: {}
252 | }
253 | ```
254 | | 属性 | 说明 | 类型 | 默认值 |
255 | | --- | ---- | ----- | ---- |
256 | |type |按钮类型，可选值为 default、primary、dashed、text、info、success、warning、error或者不设置 |String| default|
257 | |ghost |幽灵属性，使按钮背景透明 |Boolean| false|
258 | |size |按钮大小，可选值为large、small、default或者不设置 |String| default|
259 | |shape |按钮形状，可选值为circle或者不设置 |String| -|
260 | |long |开启后，按钮的长度为 100% |Boolean |false|
261 | |html-type |设置button原生的type，可选值为button、submit、reset |String| button|
262 | |disabled |设置按钮为禁用状态 |Boolean| false|
263 | |loading |设置按钮为加载中状态 |Boolean |false|
264 | |icon |设置按钮的图标类型| String| -|
265 | |custom-icon |设置按钮的自定义图标 |String| -|
266 | |to |跳转的链接，支持 vue-router 对象 |String \| Object| -|
267 | |replace |路由跳转时，开启 replace 将不会向 history 添加新记录 |Boolean| false|
268 | |target |相当于 a 链接的 target 属性 |String| _self |
269 | |success | 验证成功回调函数，参数为表单数据 | function | -|
270 | |fail | 验证失败回调函数，参数为表单数据 | function | -|
271 |
272 |
273 | [回到顶部↑](#文档)
274 |
275 | ## 表单验证
276 | 在组件里有一个rules属性 可以对属性key绑定的表单数据进行验证
277 | 你可以这样使用
278 | ```
279 | // 假设你要验证的表单数据为mail
280 | key: 'mail',
281 | rules: [
282 | { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
283 | { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
284 | ]
285 |
286 | 也可以这样使用, 验证表单数据为passwd
287 | key: 'passwd',
288 | rules: [
289 | {
290 | trigger: 'blur',
291 | validator(rule, value, callback) => {
292 | if (value === '') {
293 | callback(new Error('Please enter your password again'));
294 | } else if (value !== this.formCustom.passwd) {
295 | callback(new Error('The two input passwords do not match!'));
296 | } else {
297 | callback();
298 | }
299 | };
300 | }
301 | ]
302 | ```
303 | 如果你只有一条验证规则 可以直接使用对象
304 | ```
305 | rules: { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' }
306 | ```
307 | 具体验证规则请查看[async-validator](https://github.com/yiminghe/async-validator)
308 |
309 | [回到顶部↑](#文档)
310 |
311 | ## Input输入框
312 | [input demo](https://jsrun.net/qxXKp/edit)
313 | 更多例子请查看[iView](https://www.iviewui.com/components/input)
314 |
315 | ```js
316 | // formItem 属性
317 | type: 'input'
318 | ```
319 | ### Input props
320 |
321 | | 属性 | 说明 | 类型 | 默认值 |
322 | | --- | ---- | ----- | ---- |
323 | |type |输入框类型，可选值为 text、password、textarea、url、email、date |String| text|
324 | |size |输入框尺寸，可选值为large、small、default或者不设置 |String| -|
325 | |placeholder |占位文本 |String| -|
326 | |clearable |是否显示清空按钮 |Boolean |false|
327 | |disabled |设置输入框为禁用状态 |Boolean |false|
328 | |readonly |设置输入框为只读 |Boolean |false|
329 | |maxlength |最大输入长度 |Number |-|
330 | |icon |输入框尾部图标，仅在 text 类型下有效 |String| -|
331 | |prefix |输入框头部图标 |String| -|
332 | |suffix| 输入框尾部图标 |String| -|
333 | |search |是否显示为搜索型输入框| Boolean| false|
334 | |enter-button |开启 search 时可用，是否有确认按钮，可设为按钮文字 |Boolean \| String| false|
335 | |rows |文本域默认行数，仅在 textarea 类型下有效 |Number| 2|
336 | |autosize |自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 } |Boolean \| Object| false|
337 | |number |将用户的输入转换为 Number 类型| Boolean| false|
338 | |autofocus |自动获取焦点 |Boolean |false|
339 | |autocomplete |原生的自动完成功能，可选值为 off 和 on| String| off|
340 | |element-id |给表单元素设置 id，详见 Form 用法。 |String| -|
341 | |spellcheck |原生的 spellcheck 属性 |Boolean |false|
342 | |wrap |原生的 wrap 属性，可选值为 hard 和 soft，仅在 textarea 下生效 |String| soft|
343 |
344 | ### Input events
345 |
346 | |事件名 |说明 |返回值|
347 | |-|-|-|
348 | |on-enter |按下回车键时触发 |无|
349 | |on-click |设置 icon 属性后，点击图标时触发 |无|
350 | |on-change |数据改变时触发 |event|
351 | |on-focus |输入框聚焦时触发 |无|
352 | |on-blur| 输入框失去焦点时触发 |无|
353 | |on-keyup |原生的 keyup 事件 |event|
354 | |on-keydown |原生的 keydown 事件 |event|
355 | |on-keypress |原生的 keypress 事件 |event|
356 | |on-search |开启 search 时可用，点击搜索或按下回车键时触发 |value|
357 |
358 | ### Input slot (子组件插槽)
359 |
360 | |名称 |说明|
361 | |-|-|
362 | |prepend |前置内容，仅在 text 类型下有效|
363 | |append |后置内容，仅在 text 类型下有效|
364 | |prefix |输入框头部图标|
365 | |suffix |输入框尾部图标|
366 |
367 | [回到顶部](#整体布局)
368 |
369 | ## Radio单选框
370 | [radio demo](https://jsrun.net/XHXKp/edit)
371 | 更多例子请查看[iView](https://www.iviewui.com/components/radio)
372 | ```js
373 | // formItem 属性
374 | type: 'radio'
375 | // 按钮组
376 | type: 'radioGroup'
377 | ```
378 |
379 | ### Radio props
380 |
381 | | 属性 | 说明 | 类型 | 默认值 |
382 | | --- | ---- | ----- | ---- |
383 | |label |只在组合使用时有效。指定当前选项的 value 值，组合会自动判断当前选择的项目 |String \| Number |-|
384 | |disabled |是否禁用当前项 |Boolean |false|
385 | |size |单选框的尺寸，可选值为 large、small、default 或者不设置| String| -|
386 | |true-value |选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用| String, Number, Boolean| true|
387 | |false-value |没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用| String, Number, Boolean |false|
388 |
389 | Radio events
390 |
391 | |事件名 |说明 |返回值|
392 | |-|-|-|
393 | |on-change |在选项状态发生改变时触发，返回当前状态。通过修改外部的数据改变时不会触发 |...|
394 |
395 | ### RadioGroup props
396 |
397 | | 属性 | 说明 | 类型 | 默认值 |
398 | | --- | ---- | ----- | ---- |
399 | |type |可选值为 button 或不填，为 button 时使用按钮样式 |String| -|
400 | |size |尺寸，可选值为large、small、default或者不设置 |String |-|
401 | |vertical |是否垂直排列，按钮样式下无效 |Boolean false|
402 |
403 | ### RadioGroup events
404 |
405 | |事件名 |说明 |返回值|
406 | |-|-|-|
407 | |on-change |在选项状态发生改变时触发，返回当前选中的项。通过修改外部的数据改变时不会触发 |...|
408 |
409 | [回到顶部↑](#文档)
410 |
411 |
412 | ## Checkbox多选框
413 | [checkbox demo](https://jsrun.net/VHXKp/edit)
414 | 更多例子请查看[iView](https://www.iviewui.com/components/checkbox)
415 | ```js
416 | // formItem 属性
417 | type: 'check'
418 | // 按钮组
419 | type: 'checkGroup'
420 | ```
421 | ### Checkbox props
422 |
423 | | 属性 | 说明 | 类型 | 默认值 |
424 | | --- | ---- | ----- | ---- |
425 | |label |只在组合使用时有效。指定当前选项的 value 值，组合会自动判断是否选中 |String \| Number \| Boolean |-|
426 | |disabled |是否禁用当前项 |Boolean| false|
427 | |indeterminate |设置 indeterminate 状态，只负责样式控制| Boolean| false|
428 | |size |多选框的尺寸，可选值为 large、small、default 或者不设置| String| -|
429 | |true-value |选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用| String, Number, Boolean| true|
430 | |false-value |没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 |String, Number, Boolean |false|
431 |
432 | ### Checkbox events
433 |
434 | |事件名 |说明 |返回值|
435 | | --- | ---- | ----- |
436 | |on-change |只在单独使用时有效。在选项状态发生改变时触发，通过修改外部的数据改变时不会触发| true \| false|
437 |
438 | ### CheckboxGroup props
439 |
440 | | 属性 | 说明 | 类型 | 默认值 |
441 | | --- | ---- | ----- | ---- |
442 | |size |多选框组的尺寸，可选值为 large、small、default 或者不设置 |String| -|
443 |
444 | ### CheckboxGroup events
445 |
446 | |事件名 |说明 |返回值|
447 | | --- | ---- | ----- |
448 | |on-change |在选项状态发生改变时触发，返回已选中的数组。通过修改外部的数据改变时不会触发| [...]|
449 |
450 | [回到顶部↑](#文档)
451 |
452 | ## Button按钮
453 | [Button demo](https://jsrun.net/nHXKp/edit)
454 | 更多例子请查看[iView](https://www.iviewui.com/components/button)
455 | ```js
456 | // formItem 属性
457 | type: 'button'
458 | // 按钮组
459 | type: 'buttonGroup'
460 | ```
461 | ### Button props
462 |
463 | | 属性 | 说明 | 类型 | 默认值 |
464 | | --- | ---- | ----- | ---- |
465 | |type |按钮类型，可选值为 default、primary、dashed、text、info、success、warning、error或者不设置 |String| default|
466 | |ghost |幽灵属性，使按钮背景透明 |Boolean| false|
467 | |size |按钮大小，可选值为large、small、default或者不设置 |String| default|
468 | |shape |按钮形状，可选值为circle或者不设置 |String| -|
469 | |long |开启后，按钮的长度为 100% |Boolean |false|
470 | |html-type |设置button原生的type，可选值为button、submit、reset |String| button|
471 | |disabled |设置按钮为禁用状态 |Boolean| false|
472 | |loading |设置按钮为加载中状态 |Boolean |false|
473 | |icon |设置按钮的图标类型| String| -|
474 | |custom-icon |设置按钮的自定义图标 |String| -|
475 | |to |跳转的链接，支持 vue-router 对象 |String \| Object| -|
476 | |replace |路由跳转时，开启 replace 将不会向 history 添加新记录 |Boolean| false|
477 | |target |相当于 a 链接的 target 属性 |String| _self |
478 |
479 | ### ButtonGroup props
480 |
481 | | 属性 | 说明 | 类型 | 默认值 |
482 | | --- | ---- | ----- | ---- |
483 | |size |按钮组合大小，可选值为large、small、default或者不设置| String| default|
484 | |shape |按钮组合形状，可选值为circle或者不设置| String| -|
485 | |vertical| 是否纵向排列按钮组| Boolean| false|
486 |
487 | [回到顶部↑](#文档)
488 |
489 | ## Switch开关
490 | [switch demo](https://jsrun.net/8HXKp/edit)
491 | 更多例子请查看[iView](https://www.iviewui.com/components/switch)
492 | ```js
493 | // formItem 属性
494 | type: 'switch'
495 | ```
496 | ### Switch props
497 |
498 | | 属性 | 说明 | 类型 | 默认值 |
499 | | --- | ---- | ----- | ---- |
500 | |size |开关的尺寸，可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字，使用 large。 |String| -|
501 | |disabled |禁用开关 |Boolean |false|
502 | |true-value |选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 |String, Number, Boolean |true|
503 | |false-value |没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 |String, Number, Boolean |false|
504 | |loading 加载中的开关 |Boolean |false|
505 |
506 | ### Switch events
507 |
508 | |事件名 |说明 |返回值|
509 | | --- | ---- | ----- |
510 | |on-change |开关变化时触发，返回当前的状态|true \| false|
511 |
512 | ### Switch slot (子组件插槽)
513 |
514 | |名称 |说明|
515 | | --- | ---- |
516 | |open |自定义显示打开时的内容|
517 | |close |自定义显示关闭时的内容|
518 |
519 | [回到顶部↑](#文档)
520 |
521 | ## Select选择器
522 | [select demo](https://jsrun.net/THXKp/edit)
523 | 更多例子请查看[iView](https://www.iviewui.com/components/select)
524 | ```js
525 | // formItem 属性
526 | type: 'select'
527 | ```
528 | ### Select props
529 |
530 | | 属性 | 说明 | 类型 | 默认值 |
531 | | --- | ---- | ----- | ---- |
532 | |multiple |是否支持多选 |Boolean |false|
533 | |disabled |是否禁用 |Boolean |false|
534 | |clearable |是否可以清空选项，只在单选时有效 |Boolean |false|
535 | |filterable |是否支持搜索 |Boolean| false|
536 | |remote |是否使用远程搜索 |Boolean |false|
537 | |remote-method |远程搜索的方法| Function| -|
538 | |loading |当前是否正在远程搜索 |Boolean |false|
539 | |loading-text |远程搜索中的文字提示 |String |加载中|
540 | |label |仅在 remote 模式下，初始化时使用。因为仅通过 value 无法得知选项的 label，需手动设置。 |String \| Number \| Array |空|
541 | |size |选择框大小，可选值为large、small、default或者不填 |String| -|
542 | |placeholder |选择框默认文字| String| 请选择|
543 | |not-found-text |当下拉列表为空时显示的内容| String| 无匹配数据|
544 | |label-in-value| 在返回选项时，是否将 label 和 value 一并返回，默认只返回 value Boolean |false|
545 | |placement |弹窗的展开方向，可选值为 top、bottom、top-start、bottom-start、top-end、bottom-end| String| bottom-start|
546 | |transfer |是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果| Boolean |false|
547 | |element-id |给表单元素设置 id，详见 Form 用法。| String| -|
548 |
549 | ### Select events
550 |
551 | |事件名 |说明 |返回值|
552 | | --- | ---- | ----- |
553 | |on-change |选中的Option变化时触发，默认返回 value，如需返回 label，详见 label-in-value 属性 |当前选中项|
554 | |on-query-change |搜索词改变时触发| query|
555 | |on-clear |点击清空按钮时触发| 无|
556 | |on-open-change |下拉框展开或收起时触发| true / false|
557 |
558 | ### Option props
559 |
560 | | 属性 | 说明 | 类型 | 默认值 |
561 | | --- | ---- | ----- | ---- |
562 | |label |选项显示的内容，默认会读取 slot，无 slot 时，优先读取该 label 值，无 label 时，读取 value。当选中时，选择器会显示 label 为已选文案。大部分情况不需要配置此项，直接写入 slot 即可，在自定义选项时，该属性非常有用。| String| -|
563 | |disabled |是否禁用当前项| Boolean |false|
564 |
565 | ### OptionGroup props
566 |
567 | | 属性 | 说明 | 类型 | 默认值 |
568 | | --- | ---- | ----- | ---- |
569 | |label |分组的组名| String| 空|
570 |
571 | [回到顶部↑](#文档)
572 |
573 | ## Slider滑块
574 | [slider demo](https://jsrun.net/UHXKp/edit)
575 | 更多例子请查看[iView](https://www.iviewui.com/components/slider)
576 | ```js
577 | // formItem 属性
578 | type: 'slider'
579 | ```
580 | ### Slider props
581 |
582 | | 属性 | 说明 | 类型 | 默认值 |
583 | | --- | ---- | ----- | ---- |
584 | |min |最小值 |Number| 0|
585 | |max |最大值 |Number| 100|
586 | |step |步长，取值建议能被（max - min）整除| Number| 1|
587 | |disabled |是否禁用滑块 |Boolean |false|
588 | |range |是否开启双滑块模式| Boolean| false|
589 | |show-input |是否显示数字输入框，仅在单滑块模式下有效 |Boolean |false|
590 | |show-stops |是否显示间断点，建议在 step 不密集时使用 |Boolean| false|
591 | |show-tip |提示的显示控制，可选值为 hover（悬停，默认）、always（总是可见）、never（不可见） |String| hover|
592 | |tip-format |Slider 会把当前值传给 tip-format，并在 Tooltip 中显示 tip-format 的返回值，若为 null，则隐藏 Tooltip |Function| value|
593 | |input-size |数字输入框的尺寸，可选值为large、small、default或者不填，仅在开启 show-input 时有效 |String |default|
594 |
595 | ### Slider events
596 |
597 | |事件名 |说明 |返回值|
598 | | --- | ---- | ----- |
599 | |on-change |在松开滑动时触发，返回当前的选值，在滑动过程中不会触发| value|
600 | |on-input |滑动条数据变化时触发，返回当前的选值，在滑动过程中实时触发 |value|
601 |
602 | ## DatePicker日期选择器
603 | [datePicker demo](https://jsrun.net/dHXKp/edit)
604 | 更多例子请查看[iView](https://www.iviewui.com/components/date-picker)
605 | ```js
606 | // formItem 属性
607 | type: 'date'
608 | ```
609 | ### DatePicker props
610 |
611 | | 属性 | 说明 | 类型 | 默认值 |
612 | | --- | ---- | ----- | ---- |
613 | |type |显示类型，可选值为 date、daterange、datetime、datetimerange、year、month |String| date|
614 | |format |展示的日期格式 |Date | date \| daterange：
yyyy-MM-dd
datetime \| datetimerange：
yyyy-MM-dd HH:mm:ss
year：yyyy
month：yyyy-MM|
615 | |placement |日期选择器出现的位置，可选值为top、top-start、top-end、bottom、bottom-start、bottom-end、left、left-start、left-end、right、right-start、right-end |String |bottom-start|
616 | |placeholder |占位文本 |String| 空|
617 | |options |选择器额外配置，比如不可选日期与快捷选项，具体项详见下表 |Object| -|
618 | |split-panels |开启后，左右面板不联动，仅在 daterange 和 datetimerange 下可用。 |Boolean |false|
619 | |multiple |开启后，可以选择多个日期，仅在 date 下可用。 |Boolean |false|
620 | |show-week-numbers |开启后，可以显示星期数。 |Boolean |false|
621 | |start-date |设置默认显示的起始日期。 |Date |-|
622 | |confirm |是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭| Boolean| false|
623 | |open |手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用| Boolean |null|
624 | |size |尺寸，可选值为large、small、default或者不设置 |String| -|
625 | |disabled |是否禁用选择器| Boolean |false|
626 | |clearable |是否显示清除按钮 |Boolean |true|
627 | |readonly |完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效 |Boolean |false|
628 | |editable |文本框是否可以输入，只在没有使用 slot 时有效 |Boolean |true|
629 | |transfer |是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 |Boolean |false|
630 | |element-id |给表单元素设置 id，详见 Form 用法。| String| -|
631 | |time-picker-options |可以在 type 为 datetime 和 datetimerange 下，配置 TimePicker 的属性，比如时间间隔 steps：:time-picker-options="{steps: [1, 10, 10]}" |Object| {}|
632 |
633 | ### options 选择器额外配置
634 |
635 | | 属性 | 说明 | 类型 | 默认值 |
636 | | --- | ---- | ----- | ---- |
637 | |shortcuts |设置快捷选项，每项内容：
text \| String：显示的文案
value \| Function：返回指定的日期，如需自己控制逻辑，可不设置，并使用 onClick 回调
onClick \| Function：点击时的回调，参数为当前日期选择器的 Vue 实例，当需要自定义复杂操作时，可以使用|Array| -|
638 | |disabledDate |设置不可选择的日期，参数为当前的日期，需要返回 Boolean 是否禁用这天 |Function |-|
639 |
640 |
641 | ### DatePicker events
642 |
643 | |事件名 |说明 |返回值|
644 | | --- | ---- | ----- |
645 | |on-change |日期发生变化时触发 |返回两个值，已经格式化后的日期，比如 2016-01-01，和当前的日期类型，比如 date|
646 | |on-open-change| 弹出日历和关闭日历时触发 |true \| false|
647 | |on-ok |在 confirm 模式下有效，点击确定按钮时触发 |-|
648 | |on-clear |在 confirm 模式或 clearable = true 时有效，在清空日期时触发| -|
649 |
650 | ### DatePicker slot (子组件插槽)
651 | |名称| 说明|
652 | | --- | ---- |
653 | |无 |自定义选择器的显示内容，建议与 open 等参数一起使用，详见示例|
654 |
655 | [回到顶部↑](#文档)
656 |
657 |
658 | ## TimePicker时间选择器
659 | [timePicker demo](https://jsrun.net/FHXKp/edit)
660 | 更多例子请查看[iView](https://www.iviewui.com/components/time-picker)
661 | ```js
662 | // formItem 属性
663 | type: 'time'
664 | ```
665 | ### TimePicker props
666 |
667 | | 属性 | 说明 | 类型 | 默认值 |
668 | | --- | ---- | ----- | ---- |
669 | |type |显示类型，可选值为 time、timerange |String| time|
670 | |format |展示的时间格式 |Date |HH:mm:ss|
671 | |steps |下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。 |Array| []|
672 | |placement |时间选择器出现的位置，可选值为top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end |String |bottom-start|
673 | |placeholder |占位文本 |String |空|
674 | |confirm |是否显示底部控制栏 |Boolean |false|
675 | |open |手动控制时间选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用 |Boolean| null|
676 | |size |尺寸，可选值为large、small、default或者不设置 |String| -|
677 | |disabled |是否禁用选择器 |Boolean |false|
678 | |clearable |是否显示清除按钮 |Boolean| true|
679 | |readonly |完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效 |Boolean |false|
680 | |editable |文本框是否可以输入，只在没有使用 slot 时有效 |Boolean |true|
681 | |transfer |是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 |Boolean |false|
682 | |element-id |给表单元素设置 id，详见 Form 用法。 |String| -|
683 |
684 | ### TimePicker events
685 |
686 | |事件名 |说明 |返回值|
687 | | --- | ---- | ----- |
688 | |on-change |时间发生变化时触发| 已经格式化后的时间，比如09:41:00|
689 | |on-open-change|弹出浮层和关闭浮层时触发| true \| false|
690 | |on-ok |点击确定按钮时触发| -|
691 | |on-clear |在清空日期时触发| -|
692 |
693 | ### TimePicker slot (子组件插槽)
694 |
695 | |名称| 说明|
696 | | --- | ---- |
697 | |无| 自定义选择器的显示内容，建议与 open 等参数一起使用，详见示例|
698 |
699 | [回到顶部↑](#文档)
700 |
701 |
702 | ## Cascader级联选择
703 | [cascader demo](https://jsrun.net/xHXKp/edit)
704 | 更多例子请查看[iView](https://www.iviewui.com/components/cascader)
705 | ```js
706 | // formItem 属性
707 | type: 'cascader'
708 | ```
709 | #### 项目提供了内置的省市数据
710 | ```
711 | // 定义了一个全局变量cityData 在项目里直接使用cityData即可
712 | // 省 市 县
713 | import 'vue-form-maker/dist/cityData3Level'
714 | // 省 市
715 | import 'vue-form-maker/dist/cityData2Level'
716 | ```
717 |
718 | ### Cascader props
719 |
720 | | 属性 | 说明 | 类型 | 默认值 |
721 | | --- | ---- | ----- | ---- |
722 | |data |可选项的数据源，格式参照示例说明 |Array| []|
723 | |render-format |选择后展示的函数，用于自定义显示格式 |Function |label => label.join(' / ')|
724 | |disabled |是否禁用选择器| Boolean |false|
725 | |clearable |是否支持清除 |Boolean |true|
726 | |placeholder |输入框占位符 |String |请选择|
727 | |trigger |次级菜单展开方式，可选值为 click 或 hover |String| click|
728 | |change-on-select |当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例| Boolean| false|
729 | |size |输入框大小，可选值为large和small或者不填 |String |-|
730 | |load-data |动态获取数据，数据源需标识 loading |Function |-|
731 | |filterable |是否支持搜索 |Boolean| false|
732 | |not-found-text |当搜索列表为空时显示的内容| String |无匹配数据|
733 | |transfer |是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果| Boolean |false|
734 | |element-id |给表单元素设置 id，详见 Form 用法。| String| -|
735 |
736 | ### Cascader events
737 |
738 | |事件名 |说明 |返回值|
739 | | --- | ---- | ----- |
740 | |on-change |选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据| value, selectedData|
741 | |on-visible-change |展开和关闭弹窗时触发 |显示状态，Boolean|
742 |
743 | [回到顶部↑](#文档)
744 |
745 | ## InputNumber数字输入框
746 | [inputNumber demo](https://jsrun.net/GHXKp/edit)
747 | 更多例子请查看[iView](https://www.iviewui.com/components/input-number)
748 | ```js
749 | // formItem 属性
750 | type: 'inputNumber'
751 | ```
752 | ### InputNumber props
753 |
754 | | 属性 | 说明 | 类型 | 默认值 |
755 | | --- | ---- | ----- | ---- |
756 | |max |最大值 |Number |Infinity|
757 | |min |最小值| Number |-Infinity|
758 | |step |每次改变的步伐，可以是小数| Number |1|
759 | |size |输入框尺寸，可选值为large、small、default或者不填| String| -|
760 | |disabled |设置禁用状态 |Boolean |false|
761 | |placeholder |占位文本 |String| -|
762 | |formatter |指定输入框展示值的格式 |Function| -|
763 | |parser |指定从 formatter 里转换回数字的方式，和 formatter 搭配使用| Function| -|
764 | |readonly |是否设置为只读| Boolean |false|
765 | |editable |是否可编辑| Boolean |true|
766 | |precision |数值精度 |Number| -|
767 | |element-id |给表单元素设置 id，详见 Form 用法。 |String| -|
768 | |active-change |是否实时响应数据，设置为 false 时，只会在失焦时更改数据 |Boolean |true|
769 |
770 | ### InputNumber events
771 |
772 | |事件名 |说明 |返回值|
773 | | --- | ---- | ----- |
774 | |on-change |数值改变时的回调，返回当前值 |当前值|
775 | |on-focus |聚焦时触发 |event|
776 | |on-blur |失焦时触发| -|
777 |
778 | [回到顶部↑](#文档)
779 |
780 | ## Rate评分
781 | [rate demo](https://jsrun.net/HHXKp/edit)
782 | 更多例子请查看[iView](https://www.iviewui.com/components/rate)
783 | ```js
784 | // formItem 属性
785 | type: 'rate'
786 | ```
787 | ### Rate props
788 |
789 | | 属性 | 说明 | 类型 | 默认值 |
790 | | --- | ---- | ----- | ---- |
791 | |count |star 总数 |Number| 5|
792 | |allow-half |是否允许半选 |Boolean |false|
793 | |disabled |是否只读，无法进行交互| Boolean |false|
794 | |show-text |是否显示提示文字 |Boolean |false|
795 | |clearable |是否可以取消选择 |Boolean |false|
796 | |character |自定义字符| String| -|
797 | |icon |使用图标 |String| -|
798 | |custom-icon |使用自定义图标| String |-|
799 |
800 | ### Rate events
801 |
802 | |事件名 |说明 |返回值|
803 | | --- | ---- | ----- |
804 | |on-change |评分改变时触发| value|
805 |
806 | ## Upload上传
807 | [upload load](https://jsrun.net/5HXKp/edit)
808 | 更多例子请查看[iView](https://www.iviewui.com/components/upload)
809 | 注意：组件子项太多的上传组件无法实现 比如iView上传组件最后两个例子
810 | ```js
811 | // formItem 属性
812 | type: 'upload'
813 | ```
814 | ### Upload props
815 |
816 | | 属性 | 说明 | 类型 | 默认值 |
817 | | --- | ---- | ----- | ---- |
818 | |action |上传的地址，必填| String| -|
819 | |headers |设置上传的请求头部 |Object| {}|
820 | |multiple |是否支持多选文件 |Boolean| false|
821 | |paste |是否支持粘贴上传文件 |Boolean |false|
822 | |data |上传时附带的额外参数 |Object| -|
823 | |name |上传的文件字段名 |String |file|
824 | |with-credentials |支持发送 cookie 凭证信息| Boolean |false|
825 | |show-upload-list |是否显示已上传文件列表| Boolean| true|
826 | |type |上传控件的类型，可选值为 select（点击选择），drag（支持拖拽） |String |select|
827 | |accept| 接受上传的[文件类型](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input)| String| -|
828 | |format |支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用 |Array |[]|
829 | |max-size |文件大小限制，单位 kb |Number| -|
830 | |before-upload |上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传| Function| -|
831 | |on-progress |文件上传时的钩子，返回字段为 event, file, fileList| Function |-|
832 | |on-success |文件上传成功时的钩子，返回字段为 response, file, fileList |Function| -|
833 | |on-error |文件上传失败时的钩子，返回字段为 error, file, fileList| Function| -|
834 | |on-preview |点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据 |Function| -|
835 | |on-remove |文件列表移除文件时的钩子，返回字段为 file, fileList| Function| -|
836 | |on-format-error |文件格式验证失败时的钩子，返回字段为 file, fileList| Function| -|
837 | |on-exceeded-size |文件超出指定大小限制时的钩子，返回字段为 file, fileList| Function| -|
838 | |default-file-list |默认已上传的文件列表，例如：[{name: 'img1.jpg',url: \'http://www.xxx.com/img1.jpg\'}] |Array |[]|
839 |
840 | ### Upload slot (子组件插槽)
841 |
842 | |名称 |说明|
843 | | --- | ---- |
844 | |无| 触发上传组件的控件|
845 | |tip |辅助提示内容|
846 |
847 | [回到顶部↑](#文档)
848 |
849 | ## ColorPicker颜色选择器
850 | [colorPicker](https://jsrun.net/jGXKp/edit)
851 | 更多例子请查看[iView](https://www.iviewui.com/components/color-picker)
852 | ```js
853 | // formItem 属性
854 | type: 'colorPicker'
855 | ```
856 | ### ColorPicker props
857 |
858 | | 属性 | 说明 | 类型 | 默认值 |
859 | | --- | ---- | ----- | ---- |
860 | |disabled |是否禁用| Boolean| false|
861 | |editable |是否可以输入色值 |Boolean| true|
862 | |alpha |是否支持透明度选择| Boolean |false|
863 | |hue |是否支持色彩选择 |Boolean |true|
864 | |recommend |是否显示推荐的颜色预设 |Boolean |false|
865 | |colors| 自定义颜色预设| Array| []|
866 | |format |颜色的格式，可选值为 hsl、hsv、hex、rgb |String |开启 alpha 时为 rgb，其它为 hex|
867 | |size |尺寸，可选值为large、small、default或者不设置 |String| -|
868 |
869 | ### ColorPicker events
870 |
871 | |事件名 |说明 |返回值|
872 | | --- | ---- | ----- |
873 | |on-change |当绑定值变化时触发| 当前值|
874 | |on-active-change| 面板中当前显示的颜色发生改变时触发 |当前显示的颜色值|
875 | |on-open-change |下拉框展开或收起时触发| true / false|
876 |
877 | [回到顶部↑](#文档)
878 |
--------------------------------------------------------------------------------
/dist/vue-form-maker.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack://VueFormMaker/webpack/universalModuleDefinition","webpack://VueFormMaker/webpack/bootstrap","webpack://VueFormMaker/./src/index.js","webpack://VueFormMaker/./src/components/VueFormMaker.js","webpack://VueFormMaker/./src/components/utils.js"],"names":["root","factory","exports","module","define","amd","window","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","install","Vue","arguments","length","component","VueFormMaker","API","version","processSubmitOrReset","components","h","formData","obj","vm","type","subComponent","componentObj","formItem","push","col","props","options","required","render","_this","this","map","item","func","submit","reset","ref","model","formProps","class","rowProps","input","children","slot","text","style","on","translateEvents","events","val","button","buttonGroup","click","$refs","resetFields","validate","valid","success","fail","marginLeft","icon","generateIconComponent","radio","radioGroup","child","checkbox","checkboxGroup","switch","temp","select","slider","date","includes","Array","isArray","toLocaleDateString","toTimeString","split","time","cascader","inputNumber","rate","upload","colorPicker","span","pull","offset","order","class-name","xs","sm","md","lg","className","label","rules","prop","label-width","label-for","error","show-message","result","event"],"mappings":"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","file":"vue-form-maker.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"VueFormMaker\"] = factory();\n\telse\n\t\troot[\"VueFormMaker\"] = factory();\n})(window, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","import VueFormMaker from './components/VueFormMaker'\r\n\r\nconst install = function(Vue, opts = {}) {\r\n Vue.component('VueFormMaker', VueFormMaker)\r\n}\r\n\r\nconst API = {\r\n install,\r\n version: '1.0.4',\r\n}\r\n\r\nif (typeof window !== 'undefined' && window.Vue) {\r\n install(window.Vue)\r\n}\r\n\r\nexport default API\r\n","import componentObj from './utils'\r\n\r\nexport default {\r\n props: {\r\n options: {\r\n type: Object,\r\n required: true\r\n }\r\n },\r\n render(h) {\r\n const options = this.options\r\n const formData = options.formData\r\n if (!options.formItem) {\r\n return h('div')\r\n }\r\n \r\n const components = options.formItem.map(item => {\r\n let func = componentObj[item.type]\r\n let subComponent = func? func.call(this, h, formData, item, this) : null\r\n let component = componentObj.formItem(h, item, subComponent)\r\n\r\n return componentObj.col(h, item, component)\r\n })\r\n \r\n if (options.submit) {\r\n processSubmitOrReset(components, h, formData, options.submit, this, 'submit')\r\n }\r\n\r\n if (options.reset) {\r\n processSubmitOrReset(components, h, formData, options.reset, this, 'reset')\r\n }\r\n\r\n return h('Form', {\r\n ref: 'form',\r\n props: {\r\n model: formData,\r\n ...options.formProps\r\n },\r\n class: 'vue-generate-form'\r\n }, [\r\n h('Row', {\r\n props: options.rowProps \r\n }, components)\r\n ])\r\n }\r\n}\r\n\r\nfunction processSubmitOrReset(components, h, formData, obj, vm, type) {\r\n let subComponent = componentObj[type](h, formData, obj, vm)\r\n let component = componentObj.formItem(h, obj, subComponent)\r\n components.push(componentObj.col(h, obj, component))\r\n}","const componentObj = {\r\n input: generateInputComponent,\r\n button: generateButtonComponent,\r\n buttonGroup: generateButtonGroupComponent,\r\n reset: generateResetComponent,\r\n submit: generateSubmitComponent,\r\n icon: generateIconComponent,\r\n radio: generateRadioComponent,\r\n radioGroup: generateRadioGroupComponent,\r\n checkbox: generateCheckboxComponent,\r\n checkboxGroup: generateCheckboxGroupComponent,\r\n switch: generateSwitchComponent,\r\n select: generateSelectComponent,\r\n slider: generateSliderComponent,\r\n date: generateDateComponent,\r\n time: generateTimeComponent,\r\n cascader: generateCascaderComponent,\r\n inputNumber: generateInputNumberComponent,\r\n rate: generateRateComponent,\r\n upload: generateUploadComponent,\r\n colorPicker: generateColorPickerComponent,\r\n col: generateColComponent,\r\n formItem: generateFormItemComponent,\r\n}\r\n\r\nfunction generateInputComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n let children = []\r\n \r\n if (obj.children) {\r\n children = obj.children.map(item => {\r\n let component\r\n if (item.type == 'span') {\r\n component = h('span', {\r\n slot: item.slot\r\n }, [item.text])\r\n } else {\r\n let func = componentObj[item.type]\r\n component = func? func.call(vm, h, formData, item, vm) : null\r\n }\r\n return component\r\n })\r\n }\r\n\r\n return h('Input', {\r\n props: {\r\n value: key? formData[key] : '',\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n },\r\n slot: obj.slot\r\n }, children)\r\n}\r\n\r\nfunction generateButtonComponent(h, formData = {}, obj, vm) {\r\n return h('Button', {\r\n props: obj.props,\r\n slot: obj.slot,\r\n style: obj.style,\r\n on: obj.events\r\n }, [obj.text])\r\n}\r\n\r\nfunction generateButtonGroupComponent(h, formData = {}, obj, vm) {\r\n const components = obj.children.map(item => {\r\n return h('Button', {\r\n props: item.props? item.props : item,\r\n slot: item.slot,\r\n style: item.style,\r\n on: item.events\r\n }, [item.text])\r\n })\r\n\r\n return h('ButtonGroup', {\r\n props: obj.props,\r\n style: obj.style,\r\n slot: obj.slot,\r\n }, [components])\r\n}\r\n\r\nfunction generateSubmitComponent(h, formData = {}, obj, vm) {\r\n const components = []\r\n const submit = h('Button', {\r\n props: obj.props,\r\n style: obj.style,\r\n on: {\r\n click() {\r\n vm.$refs['form'].validate((valid) => {\r\n if (valid) {\r\n obj.success.call(vm, formData)\r\n } else {\r\n obj.fail.call(vm, formData)\r\n }\r\n })\r\n }\r\n }\r\n }, [obj.text])\r\n\r\n components.push(submit)\r\n\r\n if (obj.reset) {\r\n const reset = h('Button', {\r\n props: obj.reset.props,\r\n style: {\r\n marginLeft: '10px',\r\n ...obj.style,\r\n },\r\n on: {\r\n click() {\r\n vm.$refs['form'].resetFields()\r\n }\r\n }\r\n }, [obj.reset.text])\r\n\r\n components.push(reset)\r\n }\r\n\r\n return h('div', components)\r\n}\r\n\r\nfunction generateResetComponent(h, formData = {}, obj, vm) {\r\n return h('Button', {\r\n props: obj.props,\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n click() {\r\n vm.$refs['form'].resetFields()\r\n }\r\n }\r\n }, [obj.text])\r\n}\r\n\r\nfunction generateIconComponent(h, formData = {}, obj, vm) {\r\n return h('Icon', {\r\n props: obj.props,\r\n style: obj.style,\r\n slot: obj.slot,\r\n })\r\n}\r\n\r\nfunction generateRadioComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n\r\n return h('Radio', {\r\n props: {\r\n value: key? formData[key] : false,\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n }\r\n }, [obj.text])\r\n}\r\n\r\n\r\nfunction generateRadioGroupComponent(h, formData = {}, obj, vm) {\r\n let components = []\r\n const key = obj.key? obj.key : ''\r\n if (obj.children) {\r\n components = obj.children.map(child => {\r\n return h('Radio', {\r\n props: child.props? child.props : child\r\n }, [child.text])\r\n })\r\n }\r\n\r\n return h('RadioGroup', {\r\n props: {\r\n value: key? formData[key] : '',\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n }\r\n }, [components])\r\n}\r\n\r\n\r\nfunction generateCheckboxComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n\r\n return h('Checkbox', {\r\n props: {\r\n value: key? formData[key] : '',\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n }\r\n }, [obj.text])\r\n\r\n}\r\n\r\nfunction generateCheckboxGroupComponent(h, formData = {}, obj, vm) {\r\n let components = []\r\n const key = obj.key? obj.key : ''\r\n\r\n if (obj.children) {\r\n components = obj.children.map(child => {\r\n return h('Checkbox', {\r\n props: child.props? child.props : child\r\n }, [child.text])\r\n })\r\n }\r\n\r\n return h('CheckboxGroup', {\r\n props: {\r\n value: key? formData[key] : [],\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n }\r\n }, [components])\r\n}\r\n\r\nfunction generateSwitchComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n\r\n let components = []\r\n if (obj.children) {\r\n components = obj.children.map(item => {\r\n let temp\r\n if (item.type == 'icon') {\r\n temp = generateIconComponent(h, formData, item)\r\n } else if (item.type == 'span') {\r\n temp = h('span', {\r\n slot: item.slot,\r\n }, [item.text])\r\n }\r\n\r\n return temp\r\n })\r\n } \r\n\r\n return h('i-switch', {\r\n props: {\r\n value: key? formData[key] : false,\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n },\r\n }, components)\r\n}\r\n\r\nfunction generateSelectComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n\r\n let components = []\r\n\r\n if (obj.children) {\r\n components = obj.children.map(item => {\r\n if (item.type == 'optionGroup') {\r\n return h('OptionGroup', {\r\n props: item.props? item.props : item\r\n }, item.children.map(child => {\r\n return h('Option', {\r\n props: child.props? child.props : child\r\n })\r\n }))\r\n } else {\r\n return h('Option', {\r\n props: item.props? item.props : item\r\n })\r\n }\r\n })\r\n }\r\n \r\n return h('Select', {\r\n props: {\r\n value: formData[key],\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n },\r\n slot: obj.slot\r\n }, components)\r\n}\r\n\r\nfunction generateSliderComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n\r\n return h('Slider', {\r\n props: {\r\n value: formData[key],\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n }\r\n })\r\n}\r\n\r\n\r\nfunction generateDateComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n const type = obj.props.type\r\n return h('DatePicker', {\r\n props: {\r\n value: key? formData[key] : '',\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(date) {\r\n if (key) {\r\n if (type.includes('datetime')) {\r\n if (Array.isArray(date)) {\r\n formData[key] = date? date.map(item => item? item.toLocaleDateString() \r\n + ' ' + item.toTimeString().split(' ')[0] : '') : []\r\n } else {\r\n formData[key] = date? date.toLocaleDateString() + ' ' + date.toTimeString().split(' ')[0] : ''\r\n }\r\n } else {\r\n if (Array.isArray(date)) {\r\n formData[key] = date? date.map(item => item? item.toLocaleDateString() : '') : []\r\n } else {\r\n formData[key] = date? date.toLocaleDateString() : ''\r\n }\r\n }\r\n }\r\n },\r\n }\r\n })\r\n}\r\n\r\nfunction generateTimeComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n\r\n return h('TimePicker', {\r\n props: {\r\n value: key? formData[key] : '',\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n }\r\n })\r\n}\r\n\r\nfunction generateCascaderComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n \r\n return h('Cascader', {\r\n props: {\r\n value: key? formData[key] : [],\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n }\r\n })\r\n}\r\n\r\nfunction generateInputNumberComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n\r\n return h('InputNumber', {\r\n props: {\r\n value: key? formData[key] : null,\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n }\r\n })\r\n}\r\n\r\nfunction generateRateComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n\r\n return h('Rate', {\r\n props: {\r\n value: key? formData[key] : 0,\r\n ...obj.props\r\n },\r\n slot: obj.slot,\r\n style: obj.style,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n }\r\n })\r\n}\r\n\r\nfunction generateUploadComponent(h, formData = {}, obj, vm) {\r\n let components = []\r\n\r\n if (obj.children) {\r\n components = obj.children.map(item => {\r\n let func = componentObj[item.type]\r\n return func? func.call(vm, h, formData, item, vm) : null\r\n })\r\n }\r\n return h('Upload', {\r\n props: obj.props,\r\n style: obj.style,\r\n slot: obj.slot,\r\n }, components)\r\n}\r\n\r\nfunction generateColorPickerComponent(h, formData = {}, obj, vm) {\r\n const key = obj.key? obj.key : ''\r\n\r\n return h('ColorPicker', {\r\n props: {\r\n value: key? formData[key] : '',\r\n ...obj.props\r\n },\r\n style: obj.style,\r\n slot: obj.slot,\r\n on: {\r\n ...translateEvents(obj.events, vm),\r\n input(val) {\r\n if (key) {\r\n formData[key] = val\r\n }\r\n }\r\n }\r\n })\r\n}\r\n\r\nfunction generateColComponent(h, obj, component) {\r\n return h('Col', {\r\n props: {\r\n span: obj.span,\r\n push: obj.push,\r\n pull: obj.pull,\r\n offset: obj.offset,\r\n order: obj.order,\r\n 'class-name': obj['class-name'] || obj['className'],\r\n xs: obj.xs,\r\n sm: obj.sm,\r\n md: obj.md,\r\n lg: obj.lg,\r\n },\r\n }, [component])\r\n}\r\n\r\nfunction generateFormItemComponent(h, obj, component) {\r\n return h('FormItem', {\r\n class: obj.className,\r\n props: {\r\n label: obj.label,\r\n rules: obj.rules,\r\n prop: obj.key? obj.key : '',\r\n 'label-width':obj['label-width'] || obj['labelWidth'],\r\n 'label-for': obj['label-for'] || obj['labelFor'],\r\n error: obj.error,\r\n 'show-message': obj['show-message'] || obj['showMessage'],\r\n }\r\n }, [component])\r\n}\r\n\r\n\r\nfunction translateEvents(events = {}, vm) {\r\n const result = {}\r\n for (let event in events) {\r\n result[event] = events[event].bind(vm)\r\n }\r\n\r\n return result\r\n}\r\n\r\nexport default componentObj"],"sourceRoot":""}
--------------------------------------------------------------------------------