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);
| action | 表单操作按钮配置选项 该属性用于定义表单操作按钮。可以包含 'submit' 提交按钮，'reset' 重置按钮以及其他自定义按钮。默认只包含一个 'submit' 提交按钮。 顺序敏感可调整按钮顺序 | Array | ['submit'] | - |
| actionProps | 该属性用于定义表单操作按钮的配置。可以设置按钮的类型、大小、图标、文字等。默认为一个空对象。 | Object | {} | - |
#### form <Array>
| 参数名称 | 类型 | 是否必选 | 说明 |
......@@ -58,7 +61,8 @@ Vue.use(WayViewForm);
| showName | object | | 显示在选项中的名称的键名 |
| showValue | object | | 选项值的键名 |
| colProps | object | | 在 type=='Row'作为根节点时有效，用于设置表单项外层的 props |
| class | string | | 用于设置表单项外层form-item的 class 【Title/Row设置的都是本身元素】 |
| style | string | | 用于设置表单项外层form-item的 style 【Title/Row设置的都是本身元素】|
#### type 可选类型
理论上末级组件都可以作为表单项（通过props设置的均可，slot配置的暂不支持）Title为特殊组件，用于分组；
......@@ -82,6 +86,7 @@ Vue.use(WayViewForm);
| Row | string | true | 行 |
| Title | string | true | 自定义 Title，类似行 |
>! Title/Upload 额外有slot选项
##### rules <Array>
| 参数名称 | 类型 | 是否必选 | 说明 |
......
package.json
View file @ 80b44ded
{
"name": "way-view-form",
"version": "0.1.0",
"version": "0.2.0",
"private": false,
"author": "flycat",
"main": "lib/way-view-form.umd.min.js",
......
src/components/index.vue
View file @ 80b44ded
......@@ -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请求数据状态选项 -->
<script>
// 设置默认校验类型
const requireTypes = {
'Input': 'string',
'InputNumber': 'number',
......@@ -14,9 +15,10 @@ const requireTypes = {
'Select': 'string', // 默认
'AutoComplete': 'number',
'TimePicker': 'string',
'DatePicker': 'string',
'DatePicker': 'string',// 默认
'Cascader': 'array',
'Rate': 'number',
'Slider': 'number',
'ColorPicker': 'string',
}
const hasOwnPropertySafely = (obj, key) => {
......@@ -111,6 +113,11 @@ export default {
return {}
}
},
// 严格模式只接受内置的表单项
strict: {
type: Boolean,
default: false
},
},
data() {
return {
......@@ -367,6 +374,10 @@ export default {
{
props: {
...item.props
},
class: `my-custom-form-row ${item.class ? item.class : ''}`,
style: {
...item.style
}
}, itemNodes)
......@@ -392,20 +403,21 @@ export default {
},
generatorTitle(h, item) {
const props = item.props ? item.props : {}
console.log(props)
return h(
'Row',
{
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 {
prop: item.key,
label: item.name,
},
class: `my-custom-form-item ${item.class ? item.class : ''}`,
style: {
...item.style
}
},
[this.generatorItem(h, item)]
)
......@@ -492,21 +508,31 @@ export default {
}
},
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(
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
)
, `Unaccepted component types '${item.type}'`)
}
},
/**
* 生成默认的数据源 例如Casader\AutoComplete\Transfer
......@@ -923,6 +949,10 @@ export default {
}
.my-custom-form-title {
margin: 5px 0;
}
.my-custom-form-buttons {
.ivu-btn {
margin-right: 10px;
......
src/demo/form2.vue
View file @ 80b44ded
......@@ -323,6 +323,8 @@ export default {
name: 'Upload',
type: 'Upload',
key: 'Upload',
required: true,
requiredType: 'array',
componentsProps: {
data: {},
action: 'https://jsonplaceholder.typicode.com/posts/',
......@@ -348,7 +350,9 @@ export default {
},
slot: (h) => {
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 {
{
type: 'Title',
name: '查询条件',
class: 'user-title',
slot: (h) => {
return [h('Icon', {
props: {
type: 'md-search',
}
}), h('span', '这是自定义分割标题')]
}
},
{
type: 'Row',
......@@ -217,3 +225,8 @@ export default {
}
</script>
<style>
.user-title {
color: #fb5050;
}
</style>
src/demo/form5.vue
View file @ 80b44ded
<template>
<div>
<!-- <div class="opation">
<label-item title="行内换行模式">
<i-switch v-model="formProps.inline" />
</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>
<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" strict />
</div>
</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