v-form-layer
- 快速实现复杂布局
- 轻松实现逻辑校验,多种展示效果
- 支持多图层展示
演示
github pages
npm 安装
使用
import VFormLayer from 'v-form-layer'
import 'v-form-layer/dist/v-form-layer.css'
Vue.use(VFormLayer)
<script src="https://unpkg.com/v-form-layer/dist/v-form-layer.min.js"></script>
<script src="https://unpkg.com/v-form-layer/dist/v-form-layer.css"></script>
基本布局
<v-form>
<v-form-line :cols="[{ label: '名字' },{ label: '年龄' }]">
<input v-model="form.name" />
<input v-model="form.age" />
</v-form-line>
</v-form>
增加图层
<v-form v-model="layer">
<v-form-line
:cols="[{ label: '名字', path: '/name' },{ label: '年龄', path: '/age'}]">
<input v-model="form.name" />
<input v-model="form.age" />
</v-form-line>
</v-form>
<script>
export default {
data () {
return {
form: {},
layer: [
{
id: "layer-1",
show: true,
data: [
{
path: "/name",
message: "测试message"
},
{
path: "/age",
message: "测试message"
}
]
},
]
}
}
}
</script>
逻辑校验
<v-form ref="form" :data="form" v-model="layer">
<v-form-line
:cols="[{path: '/error', label: '名字', validator: rules.error},
{path: '/async', label: '年龄', validator: rules.async}]">
<input v-model="form.error" />
<input v-model="form.async" />
</v-form-line>
</v-form>
<-- 如果是表格校验,结构如下 !-->
<v-form ref="form" v-model="layer" :data="data" rowledge="0">
<el-table :data="data">
<el-table-column label="必填校验">
<template slot-scope="scope">
<v-form-line :cols="[{path: `/${scope.$index}/error`, validator: rules.error}]">
<el-input slot="reference" v-model="scope.row.error"/>
</v-form-line>
</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
<v-form-line :cols="[{path: `/${scope.$index}/age`}]">
<el-input v-model="scope.row.age"/>
</v-form-line>
</template>
</el-table-column>
</el-table>
</v-form>
<el-button @click="validate">校验</el-button>
<el-button @click="clearValidate">清除校验</el-button>
<script>
import { validateSuccess, validateError } from '@/utils/validate';
export default {
data () {
rules: {
error:val => {
if (!val) {
return validateError('必填字段测试文本')
} else {
return validateSuccess()
}
},
async:async val => {
if (await this.getDate()) {
return validateError('异步校验测试文本')
} else {
return validateSuccess()
}
}
}
return {
form: {},
data: [],
layer: [],
rules
}
},
methods: {
async getDate() {
const timeout = () => new Promise((resolve) => setTimeout(resolve, 500))
await timeout()
return true
},
validate() {
this.$refs['form'].validate((val, validators) => {
console.log(JSON.stringify(validators, null, 2))
console.log(val, val ? '校验通过' : '校验不通过')
})
},
clearValidate() {
this.$refs['form'].clearValidate()
}
}
}
</script>
@/utils/validate.js 定义全局校验结果样式
export const validateSuccess = message => {
return {
message,
effect: '#67c23a',
disabled: true,
referenceBorderColor: '#67c23a',
referenceBgColor: '#e1f3d8'
}
}
export const validateError = message => {
return {
message,
effect: '#F56C6C',
referenceBorderColor: '#F56C6C',
referenceBgColor: '#fde2e2',
stop: true
}
}
export const validateWarn = message => {
return {
message,
effect: '#E6A23C',
referenceBorderColor: '#E6A23C',
referenceBgColor: '#faecd8'
}
}
v-form Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
layer |
图层数组 |
array |
- |
- |
data |
数据对象,用于校验时获取字段的值 |
object/array |
- |
- |
label-width |
表单域标签的宽度 |
string |
- |
- |
label-position |
label 的位置 |
string |
left/right/top |
right |
line-height |
form-item 内 label 及 content 行高 |
string |
- |
'32px' |
rowledge |
form-item 行距 |
string |
- |
'24px' |
item-gutter |
form-item 之间的间隔 |
number |
- |
0 |
response |
表单响应式,只在手机端生效 |
boolean |
- |
true |
focus-open |
是否开启聚焦模式 |
boolean |
- |
false |
focus-options |
聚焦模式参数 |
object |
- |
看下面 |
focus-text-all-selected |
聚焦文本全选 |
boolean |
- |
false |
focusOptions: {
prevKeys: 'shift+enter',
nextKeys: 'enter',
skips: ['/node2'],
loop: false
}
v-form Methods
方法名 |
说明 |
参数 |
validate |
对整个表单进行重算的方法,参数是一个回调函数(第一个参数是校验是否通过,第二个参数是所有校验结果集合数组) |
Function(boolean, array) |
validateField |
对单个字段进行重算的方法,参数是路径,规则, 数据对象 |
path: string, rule: function, data:object/array |
clearValidate |
移除表单校验结果。参数是要移除校验结果的路径数组,如不传则移除整个表单的重算结果) |
paths: array |
focus |
path 对应节点聚焦,不传参数则聚焦第一个可聚焦节点节点 |
path: string |
blur |
path 对应节点失焦 |
path: string |
select |
path 对应节点文本选中 |
path: string |
v-form Events
事件名称 |
说明 |
回调参数 |
validate |
任一表单项被校验后触发 |
{path,success,message,stop} |
last-focused-node-next |
开启聚焦模式(focus-open 为 true),并且为非循环模式(loop 不为 true)下,在最后一个可聚焦的节点(最后一个节点,或是在它之后的所有节点均不可被聚焦的节点),执行下一个节点聚焦操作时触发 |
path |
first-focused-node-prev |
开启聚焦模式(focus-open 为 true),并且为非循环模式(loop 不为 true)下,在第一个可聚焦的节点(第一个节点,或是在它之前的所有节点均不可被聚焦的节点),执行上一个节点聚焦操作时触发 |
path |
show |
图层显示时触发 |
prop |
hide |
图层隐藏时触发 |
prop |
layer 图层
layer: [
{
id: 'layerId',
show: true,
view: {
type: 'popover',
effect: 'dark',
borderColor: '',
placement: 'top',
disabled: false,
referenceBorderColor: '',
referenceBgColor: '',
trigger: 'hover',
hideDelay: 200,
showAlways: false,
enterable: false,
visibleArrow: true,
},
data: [
{
path: '',
message: '' | {} | [],
template: (message) => { return 模板/组件 },
stop: false,
},
}
]
}
]
v-form-line Attributes
参数 |
说明 |
类型 |
默认值 |
cols |
item 布局配置 |
array |
[] |
label |
子节点并排展示时使用,form-line 设置 label 后,子节点设置的 label 将失效 |
string |
- |
label-width |
表单域标签的宽度 |
string |
- |
required |
是否在 label 文字前面显示必填 * 符号 |
boolean |
false |
span |
form-line 在一行分成 24 份中所占的份数 |
number |
24 |
cols: [
{
label: 'label',
labelWidth: '80px',
span: 24,
path: '/path',
validator: (value, path) => { * 对返回值进行处理 * },
trigger: 'blur',
required: false,
}
]