本案例将会讲解如何使用 vue.js + ElementUI 开发一个简单的 可配置组合表单 Demo。
示例源代码 github
操作演示:
在左侧新建表单区块,选择区块标题和表单组件类型后点击确定,会在中间区域生成一个块新的表单,右侧展示了所有表单的数据合并结果。
在本示例中你主要可以看到以下知识点的运用:
- vue.js 单文件组件,
- 组件传参
- 自定义 v-model
- 数据监听
- 数据合并
- 批量自动注册组件
- 使用 mixin 抽取公用代码
- sass 语法
- BEM 规范
- 尽量避免使用 for 循环的写法
<component>
组件- 动态绑定 v-model 到一组数据
上面列举的这些是因为以前有群里朋友询问相关的实现方法,在此列出,可能正在读这篇文章的你已经都掌握了,恭喜你!(本篇文章的起因也是群友提问)
下面开始正文
总览
这个 demo 的所有组件和逻辑如果写在一个文件中大概会有几百行,维护起来会有麻烦,所以首先设计这样的目录结构:
搭建基本框架
为了快速开发页面本项目使用 ElementUI 和 D2Admin 快速搭建,以下示例中组件都来自这两个开源项目,如果你不认识这些组件也没有关系,大致了解意思就可。
首先写出页面的大致框架:
<template>
<d2-container>
<template slot="header">可配置问卷示例</template>
<div class="questionnaire">
<el-container>
<!-- 左侧位置 -->
<!-- 中间位置 -->
<!-- 右侧位置 -->
</el-container>
</div>
<template slot="footer">从左侧选择要添加的表单块,右侧查看结果</template>
</d2-container>
</template>
<script>
export default {
name: 'page1',
components: {
// 这里以后要要注册表单区块 左侧边栏 右侧边栏
},
data () {
return {
formList: [], // 所有注册的表单区块
forms: [] // 用户已经选择的表单区块
}
}
}
</script>
css / sass 暂时先忽略,在最后会展示样式代码
表单区块
新建 page1/components/Form/Form1.vue
作为第一个表单区块
<template>
<el-form ref="form" :model="form" label-position="top">
<el-form-item label="姓名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-radio-group v-model="form.usersex">
<el-radio :label="1">男</el-radio>
<el-radio :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'Form1',
props: {
value: {
default: () => ({
username: '',
usersex: 1
})
}
},
data () {
return {
form: {
username: '',
usersex: 1
}
}
},
watch: {
form: {
// 处理方法
handler (value) {
this.$emit('input', value)
},
// 深度 watch
deep: true,
// 首先自己执行一次
immediate: true
}
}
}
</script>
这是用 ElementUI 构建的很简单的一个表单,甚至没有校验。
然后我们在页面组件上注册这个表单区块:
<script>
components: {
// 注册组件
Form1: () => import('./components/Form/Form1.vue')
},
data () {
return {
// 注册到数据
formList: [
{
title: '基础',
name: 'Form1'
}
]
}
}
</script>
等等,假如我有 20 个区块,难道要写 20 遍注册,在 formList 里手动加 20 个对象吗?
所以我们先新建了 7 个区块,区块内容都大同小异,并将代码稍加改造:
表单区块示例
<template>
<el-form ref="form" :model="form" label-position="top">
<el-form-item label="姓名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-radio-group v-model="form.usersex">
<el-radio :label="1">男</el-radio>
<el-radio :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</template>
<script>
export default {
// 排序使用
index: 1,
// 组件标题
title: '基础',
// 组件名
name: 'Form1',
props: {
value: {
default: () => ({
username: '',
usersex: 1
})
}
},
data () {
return {
form: {
username: '',
usersex: 1
}
}
},
watch: {
form: {
handler (value) {
this.$emit('input', value)
},
deep: true,
immediate: true
}
}
}
</script>
页面组件(只展示重点部分)
<script>
import sortby from 'lodash.sortby'
const req = context => context.keys().map(context)
const forms = req(require.context('./components/Form/', false, /\.vue$/))
const components = {}
const formList = []
sortby(forms.map(e => {
const component = e.default
const { index, title, name } = component
return { component, title, index, name }
}), ['index']).forEach(form => {
const { component, title, name } = form
components[name] = component
formList.push({ title, name })
})
export default {
components,
data () {
return {
formList
}
}
}
</script>
你可能要问,上面这一大坨是什么鬼 ???
首先介绍 webpack 的 require-context 你可以点击链接查看官方文档。
简单通俗来讲这个方法就是为了方便引入大量文件用的,它接收三个参数
- 你要引入文件的目录
- 是否要查找该目录下的子级目录
- 匹配要引入的文件
然后会返回一个 require 对象,对象有三个属性:resolve 、keys、id
- resolve: 是一个函数,他返回的是被解析模块的id
- keys: 也是一个函数,他返回的是一个数组,该数组是由所有可能被上下文模块解析的请求对象组成
- id:上下文模块的id
所以在上面代码中
const req = context => context.keys().map(context)
const forms = req(require.context('./components/Form/', false, /\.vue$/))
最后得到的 forms 就是 ./components/Form/
目录下所有的 vue 文件对象
然后通过
sortby(forms.map(e => {
const component = e.default
const { index, title, name } = component
return { component, title, index, name }
}), ['index']).forEach(form => {
const { component, title, name } = form
components[name] = component
formList.push({ title, name })
})
处理 forms 对象,得到 vue 注册组件时需要的的 components 格式,并且将所有的组件信息保存进 formList 供页面逻辑使用。具体的转换方式请查看上面的代码。
这样不管我们在 ./components/Form/
下写了多少单文件组件,webpack 都会自动帮我们引入并通过我们的代码注册到页面中。
大量组件注册的问题解决了,接下来我们还要一个需要优化的问题:
不管是 Form1 还是 Form2 还是 FormN,大家会发现其实代码里有一些重复内容,还有一些是有逻辑关系的重复内容,下面我们通过写一个 mixin 来减少重复代码:
mixin.js:
export default function (form) {
return {
props: {
value: {
default: () => form
}
},
data () {
return {
form
}
},
watch: {
form: {
handler (value) {
this.$emit('input', value)
},
deep: true,
immediate: true
}
}
}
}
这个 js 文件导出了一个函数,该函数接收一个 form 参数,并将这个参数赋值给 value prop 以及 data 中的 form 字段并返回一个对象。
然后我们将这个 mixin 注册进每个 Form 组件中,并且改造每个 Form 组件:
<template>
<el-form ref="form" :model="form" label-position="top">
<el-form-item label="姓名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-radio-group v-model="form.usersex">
<el-radio :label="1">男</el-radio>
<el-radio :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</template>
<script>
import mixin from './mixin'
export default {
index: 1,
title: '基础',
name: 'Form1',
mixins: [
mixin({
username: '',
usersex: 1
})
]
}
</script>
这样每个 Form 组件都节省下了十几行代码,关键是这些代码是重复冗余的。
最后页面组件是这个样子:
<template>
<d2-container>
<template slot="header">
可配置问卷示例
</template>
<div class="questionnaire">
<el-container>
<aside-left
:all="formListUseful"
:selected="forms"
@select="handleAsideSelect"
@remove="handleAsideRemove"/>
<el-main class="questionnaire__main">
<div class="questionnaire__container">
<el-card
v-for="(form, index) in forms"
:key="index"
shadow="never"
class="questionnaire__card">
<template slot="header">
{{form.title}}
</template>
<div style="margin-bottom: -20px;">
<component
:is="form.name"
v-model="forms[index].data"/>
</div>
</el-card>
</div>
</el-main>
<aside-right :res="res"/>
</el-container>
</div>
<template slot="footer">
从左侧选择要添加的表单块,右侧查看结果
</template>
</d2-container>
</template>
<script>
import sortby from 'lodash.sortby'
const req = context => context.keys().map(context)
const forms = req(require.context('./components/Form/', false, /\.vue$/))
const components = {}
const formList = []
sortby(forms.map(e => {
const component = e.default
const { index, title, name } = component
return { component, title, index, name }
}), ['index']).forEach(form => {
const { component, title, name } = form
components[name] = component
formList.push({ title, name })
})
export default {
name: 'page1',
components: {
...components,
AsideLeft: () => import('./components/AsideLeft'),
AsideRight: () => import('./components/AsideRight')
},
data () {
return {
formList,
forms: []
}
},
computed: {
// 合并最后结果
res () {
return Object.assign({}, ...this.forms.map(e => e.data))
},
formListUseful () {
return this.formList.filter(e => !this.forms.find(f => f.name === e.name))
}
},
methods: {
handleAsideSelect (val) {
this.forms.push({
...val
})
},
handleAsideRemove (index) {
this.forms.splice(index, 1)
}
}
}
</script>
<style lang="scss">
@import '~@/assets/style/public.scss';
.questionnaire {
@extend %full;
.el-container {
@extend %full;
}
.questionnaire__aside--left {
border-right: 1px solid #cfd7e5;
padding: 20px;
}
.questionnaire__aside--right {
border-left: 1px solid #cfd7e5;
padding: 20px;
.questionnaire__res-key {
font-size: 12px;
line-height: 14px;
color: $color-text-sub;
}
.questionnaire__res-value {
font-size: 14px;
line-height: 20px;
color: $color-text-normal;
margin-bottom: 10px;
}
}
.questionnaire__main {
background-color: rgba(#000, .05);
}
.questionnaire__container {
max-width: 400px;
margin: 0px auto;
.questionnaire__card {
border: 1px solid #cfd7e5;
margin-bottom: 20px;
.el-form-item__label {
line-height: 16px;
}
}
}
}
</style>
左侧页面组件
左侧右侧组件不是重点内容,所以一次性展示出带有注释的代码
新建 page1/components/AsideLeft/index.vue
作为左侧页面组件
<template>
<el-aside
width="200px"
class="questionnaire__aside--left">
<!-- 已经选择的区块列表 点击每个按钮后开始删除响应的区块 -->
<div
v-for="(item, index) in selected"
:key="index"
class="d2-mb-10">
<el-button
@click="handleRemove(item, index)"
style="width: 100%;">
{{item.title}}
</el-button>
</div>
<!-- 新建区块按钮 -->
<div>
<el-button
type="primary"
style="width: 100%;"
@click="dialogVisible = true">
<d2-icon name="plus"/> 新增
</el-button>
</div>
<!-- 选择区块界面 -->
<el-dialog
title="选择区块"
:append-to-body="true"
:close-on-click-modal="false"
:visible.sync="dialogVisible">
<p class="d2-mt-0">区块标题</p>
<el-input v-model="title"></el-input>
<p>区块组件</p>
<el-alert
v-if="all.length === 0"
type="error"
title="没有可用区块"/>
<el-radio-group
v-else
v-model="name"
size="small">
<el-radio-button
v-for="(item, index) in all"
:key="index"
:label="item.name">
{{item.title}}
</el-radio-button>
</el-radio-group>
<span slot="footer">
<el-button
@click="dialogVisible = false">
取 消
</el-button>
<!-- 如果没有区块可用 不显示确定按钮 -->
<el-button
v-if="all.length !== 0"
type="primary"
@click="handleSelect">
确 定
</el-button>
</span>
</el-dialog>
</el-aside>
</template>
<script>
export default {
name: 'AsideLeft',
data () {
return {
// 新建区块的 dialog 显示控制
dialogVisible: false,
// 新建区块时设置的区块标题
title: '新区块',
// 新建区块时选择的区块
name: ''
}
},
props: {
// 所有可选区块
all: {
default: () => []
},
// 用户已经选择的区块
selected: {
default: () => []
}
},
watch: {
// 用户选择一个区块后,标题自动改为这个区块的默认标题
name (value) {
this.title = this.all.find(e => e.name === value).title
}
},
methods: {
// 用户选择区块完毕
handleSelect () {
// 关闭 dialog
this.dialogVisible = false
// 发送事件
this.$emit('select', {
name: this.name,
title: this.title,
data: {}
})
},
// 用户删除区块
handleRemove (item, index) {
this.$confirm(`删除 "${item.title}" 区块吗`, '确认操作', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发送事件
this.$emit('remove', index)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
右侧页面组件
左侧右侧组件不是重点内容,所以一次性展示出带有注释的代码
新建 page1/components/AsideRight/index.vue
作为右侧页面组件
<template>
<el-aside
width="200px"
class="questionnaire__aside--right">
<div
v-for="(item, index) in reslist"
:key="index">
<div
class="questionnaire__res-key">
{{item.keyName}}
</div>
<div
class="questionnaire__res-value">
{{item.value === '' ? '未填写' : item.value}}
</div>
</div>
</el-aside>
</template>
<script>
export default {
props: {
// 接收表单结果
res: {
default: () => ({})
}
},
computed: {
// 处理数据格式
reslist () {
return Object.keys(this.res).map(keyName => ({
keyName,
value: this.res[keyName]
}))
}
}
}
</script>
所有代码就结束了,其实我们就写了五个文件
- 页面组件
- 两个侧边栏
- 表单区块
- 表单区块 mixin
这是一个很小但是涉及知识还不算少的小例子,如果上面的代码你有疑惑,可以来 D2 Projects 的 QQ 交流群 806395827 提问。
<img src="http://fairyever.qiniudn.com/20180801111951.JPG" style="width: 200px;"/>
本文首发于 D2 开源项目组官方公众号 D2 Projects
<img src="http://fairyever.qiniudn.com/20180801111123.jpg" style="width: 200px;"/>
参考
地址 | 描述 |
---|---|
掘金专栏 | 掘金专栏 |
团队主页 | 开源团队主页 |
D2Admin 中文文档 | 中文文档 |
D2Admin 预览地址 | 完整版 预览地址 |
D2Admin github | 完整版 Github 仓库 |
ElementUI | ElementUI 组件库 |