Skip to content

W
way-view-form
Commit 80b44ded authored by 刘子康's avatar 刘子康
Browse files
Options

更新完善

parent e49206c3
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 68 deletions
README.md
View file @ 80b44ded
...@@ -41,6 +41,9 @@ Vue.use(WayViewForm); ...@@ -41,6 +41,9 @@ Vue.use(WayViewForm);
| action | 表单操作按钮配置选项 该属性用于定义表单操作按钮。可以包含 'submit' 提交按钮，'reset' 重置按钮以及其他自定义按钮。默认只包含一个 'submit' 提交按钮。 顺序敏感可调整按钮顺序 | Array | ['submit'] | - | | action | 表单操作按钮配置选项 该属性用于定义表单操作按钮。可以包含 'submit' 提交按钮，'reset' 重置按钮以及其他自定义按钮。默认只包含一个 'submit' 提交按钮。 顺序敏感可调整按钮顺序 | Array | ['submit'] | - |
| actionProps | 该属性用于定义表单操作按钮的配置。可以设置按钮的类型、大小、图标、文字等。默认为一个空对象。 | Object | {} | - | | actionProps | 该属性用于定义表单操作按钮的配置。可以设置按钮的类型、大小、图标、文字等。默认为一个空对象。 | Object | {} | - |
#### form <Array> #### form <Array>
| 参数名称 | 类型 | 是否必选 | 说明 | | 参数名称 | 类型 | 是否必选 | 说明 |
...@@ -58,7 +61,8 @@ Vue.use(WayViewForm); ...@@ -58,7 +61,8 @@ Vue.use(WayViewForm);
| showName | object | | 显示在选项中的名称的键名 | | showName | object | | 显示在选项中的名称的键名 |
| showValue | object | | 选项值的键名 | | showValue | object | | 选项值的键名 |
| colProps | object | | 在 type=='Row'作为根节点时有效，用于设置表单项外层的 props | | colProps | object | | 在 type=='Row'作为根节点时有效，用于设置表单项外层的 props |
| class | string | | 用于设置表单项外层form-item的 class 【Title/Row设置的都是本身元素】 |
| style | string | | 用于设置表单项外层form-item的 style 【Title/Row设置的都是本身元素】|
#### type 可选类型 #### type 可选类型
理论上末级组件都可以作为表单项（通过props设置的均可，slot配置的暂不支持）Title为特殊组件，用于分组； 理论上末级组件都可以作为表单项（通过props设置的均可，slot配置的暂不支持）Title为特殊组件，用于分组；
...@@ -82,6 +86,7 @@ Vue.use(WayViewForm); ...@@ -82,6 +86,7 @@ Vue.use(WayViewForm);
| Row | string | true | 行 | | Row | string | true | 行 |
| Title | string | true | 自定义 Title，类似行 | | Title | string | true | 自定义 Title，类似行 |
>! Title/Upload 额外有slot选项
##### rules <Array> ##### rules <Array>
| 参数名称 | 类型 | 是否必选 | 说明 | | 参数名称 | 类型 | 是否必选 | 说明 |
......
package.json
View file @ 80b44ded
{ {
"name": "way-view-form", "name": "way-view-form",
"version": "0.1.0", "version": "0.2.0",
"private": false, "private": false,
"author": "flycat", "author": "flycat",
"main": "lib/way-view-form.umd.min.js", "main": "lib/way-view-form.umd.min.js",
......
src/components/index.vue
View file @ 80b44ded
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<!-- 封装的json to form 组件 支持Select/Input/DatePicker/TimePicker/InputNumber/Radio/RadioGroup/Checkbox/CheckboxGroup/Slider/Rate/Cascader/Switch/AutoComplete/ColorPicker/支持Row/Col布局/支持Title分栏/支持自定生成必填rules和placeholder/支持通过配置source请求数据状态选项 --> <!-- 封装的json to form 组件 支持Select/Input/DatePicker/TimePicker/InputNumber/Radio/RadioGroup/Checkbox/CheckboxGroup/Slider/Rate/Cascader/Switch/AutoComplete/ColorPicker/支持Row/Col布局/支持Title分栏/支持自定生成必填rules和placeholder/支持通过配置source请求数据状态选项 -->
<script> <script>
// 设置默认校验类型
const requireTypes = { const requireTypes = {
'Input': 'string', 'Input': 'string',
'InputNumber': 'number', 'InputNumber': 'number',
...@@ -14,9 +15,10 @@ const requireTypes = { ...@@ -14,9 +15,10 @@ const requireTypes = {
'Select': 'string', // 默认 'Select': 'string', // 默认
'AutoComplete': 'number', 'AutoComplete': 'number',
'TimePicker': 'string', 'TimePicker': 'string',
'DatePicker': 'string', 'DatePicker': 'string',// 默认
'Cascader': 'array', 'Cascader': 'array',
'Rate': 'number', 'Rate': 'number',
'Slider': 'number',
'ColorPicker': 'string', 'ColorPicker': 'string',
} }
const hasOwnPropertySafely = (obj, key) => { const hasOwnPropertySafely = (obj, key) => {
...@@ -111,6 +113,11 @@ export default { ...@@ -111,6 +113,11 @@ export default {
return {} return {}
} }
}, },
// 严格模式只接受内置的表单项
strict: {
type: Boolean,
default: false
},
}, },
data() { data() {
return { return {
...@@ -367,6 +374,10 @@ export default { ...@@ -367,6 +374,10 @@ export default {
{ {
props: { props: {
...item.props ...item.props
},
class: `my-custom-form-row ${item.class ? item.class : ''}`,
style: {
...item.style
} }
}, itemNodes) }, itemNodes)
...@@ -392,20 +403,21 @@ export default { ...@@ -392,20 +403,21 @@ export default {
}, },
generatorTitle(h, item) { generatorTitle(h, item) {
const props = item.props ? item.props : {} const props = item.props ? item.props : {}
console.log(props)
return h( return h(
'Row', 'Row',
{ {
props: { props: {
...props ...props
}
}, [h(
'h3',
{
props: {
class: 'my-custom-form-title'
}
}, },
item.name }, [h(
'h3', {
class: `my-custom-form-title ${item.class ? item.class : ''}`,
style: {
...item.style
}
},
item.slot ? [item.slot(h)] : item.name
)]) )])
}, },
...@@ -473,6 +485,10 @@ export default { ...@@ -473,6 +485,10 @@ export default {
prop: item.key, prop: item.key,
label: item.name, label: item.name,
}, },
class: `my-custom-form-item ${item.class ? item.class : ''}`,
style: {
...item.style
}
}, },
[this.generatorItem(h, item)] [this.generatorItem(h, item)]
) )
...@@ -492,21 +508,31 @@ export default { ...@@ -492,21 +508,31 @@ export default {
} }
}, },
generatorComponents(h, item) { generatorComponents(h, item) {
if (this.strict && hasOwnPropertySafely(requireTypes, item.type) || !this.strict) {
return h(
item.type,
{
props: {
...this.generatorDefaultProps(item),
...this.generatorSourceData(item),
...item.componentsProps
},
on: {
...this.generatorDefaultEvents(item),
...item.componentsEvents
},
}, item.slot ? [this.$slots.default, item.slot(h)] : this.$slots.default
)
} else {
return h('span',
{
style: {
color: 'red'
}
}
return h( , `Unaccepted component types '${item.type}'`)
item.type, }
{
props: {
...this.generatorDefaultProps(item),
...this.generatorSourceData(item),
...item.componentsProps
},
on: {
...this.generatorDefaultEvents(item),
...item.componentsEvents
},
}, item.slot ? [this.$slots.default, item.slot(h)] : this.$slots.default
)
}, },
/** /**
* 生成默认的数据源 例如Casader\AutoComplete\Transfer * 生成默认的数据源 例如Casader\AutoComplete\Transfer
...@@ -923,6 +949,10 @@ export default { ...@@ -923,6 +949,10 @@ export default {
} }
.my-custom-form-title {
margin: 5px 0;
}
.my-custom-form-buttons { .my-custom-form-buttons {
.ivu-btn { .ivu-btn {
margin-right: 10px; margin-right: 10px;
......
src/demo/form2.vue
View file @ 80b44ded
...@@ -323,6 +323,8 @@ export default { ...@@ -323,6 +323,8 @@ export default {
name: 'Upload', name: 'Upload',
type: 'Upload', type: 'Upload',
key: 'Upload', key: 'Upload',
required: true,
requiredType: 'array',
componentsProps: { componentsProps: {
data: {}, data: {},
action: 'https://jsonplaceholder.typicode.com/posts/', action: 'https://jsonplaceholder.typicode.com/posts/',
...@@ -348,7 +350,9 @@ export default { ...@@ -348,7 +350,9 @@ export default {
}, },
slot: (h) => { slot: (h) => {
return h('Button', { return h('Button', {
icon: 'ios-cloud-upload-outline' props: {
icon: 'ios-cloud-upload-outline'
}
}, '点击上传') }, '点击上传')
} }
}, },
......
src/demo/form3.vue
View file @ 80b44ded
...@@ -70,6 +70,14 @@ export default { ...@@ -70,6 +70,14 @@ export default {
{ {
type: 'Title', type: 'Title',
name: '查询条件', name: '查询条件',
class: 'user-title',
slot: (h) => {
return [h('Icon', {
props: {
type: 'md-search',
}
}), h('span', '这是自定义分割标题')]
}
}, },
{ {
type: 'Row', type: 'Row',
...@@ -217,3 +225,8 @@ export default { ...@@ -217,3 +225,8 @@ export default {
} }
</script> </script>
<style>
.user-title {
color: #fb5050;
}
</style>
src/demo/form5.vue
View file @ 80b44ded
<template> <template>
<div> <div>
<!-- <div class="opation"> <way-view-form model="form" :inlineBlock="inlineBlock" :formProps="formProps" ref="queryForm" :form="originData"
<label-item title="行内换行模式"> @submit="handleSubmit" :enableSpin="spin" :action="['submit', 'reset']" @reset="handleReset"
<i-switch v-model="formProps.inline" /> :actionProps="actionProps" :showFooter="showFooter" strict />
</label-item>
<label-item title="隐藏标签" tips="隐藏标签时默认标签位置为顶部">
<i-switch v-model="formProps.hideLabel" />
</label-item>
<label-item title="禁用">
<i-switch v-model="formProps.disabled" />
</label-item>
<label-item title="隐藏必填标记">
<i-switch v-model="formProps.hideRequiredMark" />
</label-item>
<label-item title="标签后冒号">
<i-switch v-model="formProps.labelColon" />
</label-item>
<label-item title="标签位置">
<i-select v-model="formProps.labelPosition" style="width: 120px">
<i-option value="left">左</i-option>
<i-option value="right">右</i-option>
<i-option value="top">上</i-option>
</i-select>
</label-item>
<label-item title="spin">
<i-switch v-model="spin" />
</label-item>
<label-item title="展示底部" tips="隐藏之后可以通过自定义操作按钮通过ref手动调用方法">
<i-switch v-model="showFooter" />
</label-item>
<label-item title="inlineBlock"
tips="该属性用于定义行内换行模式。如果设置为 true，则表单控件会在同一行中显示，并根据内容自动换行。如果设置为 false，则表单控件会分行显示。 ">
<i-switch v-model="inlineBlock" />
</label-item>
<label-item title="动态修改工种数据源"
tips="静态数据可以通过更改form数据来完成，如果是使用source配置的请求方法，可以通过 this.$refs.queryForm.updateSources('key')来重新获取">
<Button @click="changeSource">修改数据源</Button>
</label-item>
</div> -->
<way-view-form model="form" :inlineBlock="inlineBlock" :formProps="formProps" ref="queryForm" :form="originData"
@submit="handleSubmit" :enableSpin="spin" :action="['submit', 'reset']" @reset="handleReset"
:actionProps="actionProps" :showFooter="showFooter" />
</div> </div>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment