1dialog 表单最基本的封装
<!-- -->
<template>
<el-dialog
:visible.sync="defaultConfigDialogAdd.dialogVisible"
:width="defaultConfigDialogAdd.width"
:center="defaultConfigDialogAdd.isCenter"
>
<!-- 如果t写了插槽，外面使用其实是没必要传title属性。-->
<div slot="title" class="dialog-title">
<slot name="title">
<h2 class="default-title">{{defaultConfigDialogAdd.title}}</h2>
</slot>
</div> <el-form :model="addUserForm" :rules="rules" ref="addUserForm" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addUserForm.username"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="truename">
<el-input v-model="addUserForm.truename"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model.number="addUserForm.phone"></el-input>
</el-form-item>
<el-form-item label="是否启用" prop="status">
<el-radio-group v-model="addUserForm.status">
<el-radio label="禁用"></el-radio>
<el-radio label="启用"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="角色" prop="role">
<el-checkbox-group v-model="addUserForm.role">
<el-checkbox label="系统管理员"></el-checkbox>
<el-checkbox label="信息管理员"></el-checkbox>
<el-checkbox label="用户管理员"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCancel('addUserForm')">取 消</el-button>
<el-button type="primary" @click="submitForm('addUserForm')">立即创建</el-button>
</span>
</el-dialog>
</template>
<script>
import validate from "@/utils/validate";
const { checkAge } = validate;
export default {
name: "DialogAdd",
props: {
configDialogAdd: {
type: Object,
required: true
}
},
data() {
return {
defaultConfigDialogAdd: {
dialogVisible: false, //弹框默认不可见
title: "提示", //默认标题
width: "30%", //默认宽度
isCenter: false //是否对头部和底部采用居中布局
},
addUserForm: {
username: "",
truename: "",
phone: "",
status: "",
role: []
},
rules: {
username: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 2, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
truename: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 2, max: 19, message: "长度在 2 到 10个字符", trigger: "blur" }
],
phone: [{ required: true, validator: checkAge, trigger: "blur" }],
status: [
{ required: true, message: "请选择是否启用", trigger: "change" }
],
role: [
{
type: "array",
required: true,
message: "请至少选择一个角色",
trigger: "change"
}
]
}
};
},
methods: {
initDefaultConfigDialogAdd() {
this.defaultConfigDialogAdd = {
...this.defaultConfigDialogAdd,
...this.configDialogAdd
};
},
submitForm(formName) {
this.$refs[formName].validate(async valid => {
if (!valid) return this.$message.error("数据验证不通过"); //错误优先
// 发送网络请求 if (valid) {
this.$refs[formName].resetFields();
this.defaultConfigDialogAdd.dialogVisible = false;
this.$message.success("增加用户成功");
}
});
},
handleCancel(formName) {
// 重置输入框
this.$refs[formName].resetFields();
this.defaultConfigDialogAdd.dialogVisible = false;
}
},
created() {
// 初始化弹框配置项的数据
this.initDefaultConfigDialogAdd();
},
watch: {
// 外面的值变化，改变里面
"configDialogAdd.dialogVisible": {
handler(val) {
this.defaultConfigDialogAdd.dialogVisible = val;
}
},
// 里面的值发生变化，改变外面
"defaultConfigDialogAdd.dialogVisible": {
handler(val) {
this.configDialogAdd.dialogVisible = val;
}
}
}
};
</script>
<style lang="scss" scoped>
.dialog-title {
color: #000;
font-size: 20px;
font-weight: 700;
}
</style>
使用
封装
mininx/userAdd.js
/**
* 表单支持输入框，数字输入框，单选按钮， 多选按钮，下拉选择器 switch开关
* 每次增加一个数据formItems里面的一个项目。都要配套的增加该项目的rule 验证规则，和watch监听属性，往params网络请求参数里面赋值。
* formITtems里面的数据项也有可能是经过一次网络请求获取来的， 就需要在此mixins文件中定义methods网络请求方法，去获取formItems数据，这个时候也需要在做另外一件事件：
* 在DialogAdd.vue中去监听这些网络数据请求回来的数据。
*/ import validate from "@/utils/validate";
const { checkAge } = validate;
export default {
data() {
return {
// 增加用户弹框组件数据选项
configDialogAdd: {
dialogVisible: false, //弹框默认不可见
title: "新增用户", //默认标题 如果写了#title插槽，title可以省略不传
width: "40%", //默认宽度
addUserForm: {
formName: "addUserForm", //表单名
labelWidth: '120px',
labelPosition: 'left',
formItems: [
//表单选项
{ label: "用户名", prop: "username", type: "input" }, //type是表单控件类型
{ label: "姓名", prop: "truename", type: "input" },
{ label: "手机号", prop: "phone", type: "numberInput" },
{
label: "是否启用",
prop: "status",
type: "radio",
values: ["禁用", "启用"]
},
{
label: "是否启用形式2",
prop: "status1",
type: "switch", },
{
label: "角色",
prop: "role",
type: "checkbox",
values: ["系统管理员", "信息管理员", "用户管理员"]
},
{
label: "角色形式2",
prop: "role1",
type: "select",
options: [{
value: 'admin',
label: '系统管理员'
}, {
value: 'info',
label: '信息管理员'
}, {
value: 'user',
label: '用户管理员'
}],
},
{
label: "Cascader",
prop: "cascader",
type: "Cascader",
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则'
}]
},
{
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}
],
handleChange: this.handleChange
}
],
data: {
//绑定的数据
username: "",
truename: "",
phone: "",
status: "",
status1: false,
role: [],
role1: '',
cascader: [],
}, rules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{
min: 2,
max: 10,
message: "长度在 3 到 5 个字符",
trigger: "blur"
}
],
truename: [
{ required: true, message: "请输入名字", trigger: "blur" },
{
min: 2,
max: 19,
message: "长度在 2 到 10个字符",
trigger: "blur"
}
],
phone: [{ required: true, validator: checkAge, trigger: "blur" }],
status: [
{ required: true, message: "请选择是否启用", trigger: "change" }
],
status1: [
{ required: true, message: "请选择是否启用形式1", trigger: "change" }
],
role: [
{
type: "array",
required: true,
message: "请至少选择一个角色",
trigger: "change"
}
],
role1: [
{ required: true, message: "请至少选择一个角色1", trigger: "change" }],
cascader: [
{ required: true, message: "请至少选择一个级联选择器", trigger: "change" }],
}, },
requestApi: {
apiName: "userAdd",
params: {}
}
}
} },
methods: {
handleChange(val) {
console.log(111);
console.log(val);
}
}, created() { },
mounted() { }, watch: {
// 逻辑处理在外部，由用户控制参数
'configDialogAdd.addUserForm.data.username': {
handler(newVal) {
this.configDialogAdd.requestApi.params.username = newVal
}, },
'configDialogAdd.addUserForm.data.truename': {
handler(newVal) {
this.configDialogAdd.requestApi.params.truename = newVal
}, },
'configDialogAdd.addUserForm.data.phone': {
handler(newVal) {
this.configDialogAdd.requestApi.params.phone = newVal
}, },
'configDialogAdd.addUserForm.data.status': {
handler(newVal) {
if (!newVal) this.configDialogAdd.requestApi.params.status = ''
else this.configDialogAdd.requestApi.params.status = newVal === '禁用' ? '0' : '1' },
},
'configDialogAdd.addUserForm.data.role': {
handler(newVal) {
const obj = { "系统管理员": 'admin', '信息管理员': 'info', '用户管理员': 'user' }
let resArr = []
newVal.forEach(item => resArr.push(obj[item]))
this.configDialogAdd.requestApi.params.role = resArr.join(',')
},
},
'configDialogAdd.addUserForm.data.status1': {
handler(newVal) {
this.configDialogAdd.requestApi.params.status1 = newVal
}, },
'configDialogAdd.addUserForm.data.role1': {
handler(newVal) {
this.configDialogAdd.requestApi.params.role1 = newVal
}, },
'configDialogAdd.addUserForm.data.cascader': {
handler(newVal) {
this.configDialogAdd.requestApi.params.cascader = newVal
}, }, }, }
DialogAdd.vue
<!-- -->
<template>
<el-dialog
:visible.sync="defaultConfigDialogAdd.dialogVisible"
:width="defaultConfigDialogAdd.width"
:center="defaultConfigDialogAdd.isCenter"
>
<!-- 如果t写了插槽，外面使用其实是没必要传title属性。-->
<div slot="title" class="dialog-title">
<slot name="title">
<h2 class="default-title">{{defaultConfigDialogAdd.title}}</h2>
</slot>
</div>
<el-form
:model="defaultConfigDialogAdd.addUserForm.data"
:rules="defaultConfigDialogAdd.addUserForm.rules"
:ref="defaultConfigDialogAdd.addUserForm.formName"
:label-width="defaultConfigDialogAdd.addUserForm.labelWidth||'100px'"
:label-position="defaultConfigDialogAdd.addUserForm.labelPosition"
>
<el-form-item
v-for="item in defaultConfigDialogAdd.addUserForm.formItems"
:key="item.prop"
:label="item.label"
:prop="item.prop"
>
<!-- 输入框 -->
<template v-if="item.type==='input'">
<el-input v-model="defaultConfigDialogAdd.addUserForm.data[item.prop]"></el-input>
</template>
<template v-else-if="item.type==='numberInput'">
<el-input v-model.number="defaultConfigDialogAdd.addUserForm.data[item.prop]"></el-input>
</template>
<!-- -->
<template v-else-if="item.type==='radio'">
<el-radio-group v-model="defaultConfigDialogAdd.addUserForm.data[item.prop]">
<el-radio v-for="item in item.values" :key="item" :label="item"></el-radio>
</el-radio-group>
</template>
<template v-else-if="item.type==='switch'">
<el-switch v-model="defaultConfigDialogAdd.addUserForm.data[item.prop]"></el-switch>
</template>
<!-- 复选框 -->
<template v-else-if="item.type==='checkbox'">
<el-checkbox-group v-model="defaultConfigDialogAdd.addUserForm.data[item.prop]">
<el-checkbox v-for="(item, index) in item.values" :key="index" :label="item"></el-checkbox>
</el-checkbox-group>
</template>
<!-- 下拉框 -->
<template v-else-if="item.type==='select'">
<el-select v-model="defaultConfigDialogAdd.addUserForm.data[item.prop]" placeholder="请选择">
<el-option
v-for="item in item.options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</template>
<!-- 级联选择器 -->
<template v-else-if="item.type==='Cascader'">
<el-cascader
v-model="defaultConfigDialogAdd.addUserForm.data[item.prop]"
:options="item.options"
@change="handleChange"
></el-cascader>
</template>
</el-form-item>
</el-form> <span slot="footer" class="dialog-footer">
<el-button @click="handleCancel(defaultConfigDialogAdd.addUserForm.formName)">取 消</el-button>
<el-button
type="primary"
@click="submitForm(defaultConfigDialogAdd.addUserForm.formName)"
>立即创建</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: "DialogAdd",
props: {
configDialogAdd: {
type: Object,
required: true
}
},
data() {
return {
defaultConfigDialogAdd: {
dialogVisible: false, //弹框默认不可见
title: "提示", //默认标题
width: "30%", //默认宽度
isCenter: false, //是否对头部和底部采用居中布局
addUserForm: {
formName: "", //表单名
labelWidth: "", //'100px' 长度
labelPosition: "right", //label对齐方式 left right top 默认是right
formItems: [],
data: {},
rules: {}
},
requestApi: {
apiName: "",
params: {}
}
}
};
},
methods: {
async _request() {
let { apiName, params } = this.defaultConfigDialogAdd.requestApi;
try {
return await this.$api[apiName](params);
} catch (error) {
throw error; //这里抛出异常，下面catch一定要捕获异常
}
},
initDefaultConfigDialogAdd() {
this.defaultConfigDialogAdd = {
...this.defaultConfigDialogAdd,
...this.configDialogAdd
};
},
submitForm(formName) {
this.$refs[formName].validate(async valid => {
if (!valid) return this.$message.error("数据验证不通过"); //错误优先
// 发送网络请求_
this._request()
.then(this.submitsuccess)
.catch(err => err);
});
},
// 增加用户网络行为成功之后的动作
submitsuccess() {
//请求成功后的行为
this.$message.success("增加用户成功");
this.$refs[formName].resetFields();
this.defaultConfigDialogAdd.dialogVisible = false;
},
handleCancel(formName) {
// 重置输入框
this.$refs[formName].resetFields();
this.defaultConfigDialogAdd.dialogVisible = false;
},
// 级联选择器的选择事件 （也可以放在最外面minix里面处理，当作事件参数传进来）
handleChange(val) {
console.log(val, 222);
}
},
created() {
// 初始化弹框配置项的数据
this.initDefaultConfigDialogAdd();
},
watch: {
// 外面的值变化，改变里面
"configDialogAdd.dialogVisible": {
handler(val) {
this.defaultConfigDialogAdd.dialogVisible = val;
}
},
// 里面的值发生变化，改变外面
"defaultConfigDialogAdd.dialogVisible": {
handler(val) {
this.configDialogAdd.dialogVisible = val;
}
}
}
};
</script>
<style lang="scss" scoped>
.dialog-title {
color: #000;
font-size: 20px;
font-weight: 700;
}
</style>
1dialog 表单最基本的封装的更多相关文章
- vue中的表单异步校验方法封装
在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...
- 在JS中将指定表单内的“具有name数据的表单元素的值”封装为Get形式的字符串
//封装post时候,表单中所有具有name数据的表单元素的值,并返回“n=1&p=a” function serialize(formid) { var arr = []; var ipts ...
- form 表单获取所有数据 封装方法
function getFormJson(frm) { var o = {}; var a = $(frm).serializeArray(); $.each(a, function () { if ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- 总结：JSP几种提交表单方法
问题描述: 最近进了一家“老公司”工作,说他老不是说他成立的早,是因为他的编程框架太l.......low了.EJB的规范模式,使用是IBM经过Eclipse二次开发出来的RAD(Rational A ...
- jquery表单提交获取数据(带toast dialog)
最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...
- ASP.NET WebForm Form表单如何实现MVC那种“自动装配”效果呢？
我们知道ASP.NET MVC有个强大的地方就是Form表单提交到action的时候,可以直接将Form的参数直接装配到action的参数实体对象中 比如 action方法 Register(User ...
- vue elementui form表单验证
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
- 【LABVIEW到C#】2》database的操作（一）之 创建access和创建表单
namespace添加如下 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
随机推荐
- “随手记”开发记录day14
今天继续昨天没有完成的增加“修改”功能.对于已经添加的记账记录,长按可以进行修改和删除的操作. 但是今天并没有完成……
- “随手记”开发记录day10
今天完成了各个demo合并,并进行测试,中间出现了一些bug, 例如再点击主页面预留的菜单按钮时会出现闪退 在手机上运行更新页面时会直接崩溃 还有发现的问题有,不能查看往期的记录
- Android Studio连接数据库实现增删改查
源代码如下: DBUtil.java: package dao; import java.sql.Connection; import java.sql.DriverManager; import j ...
- C语言学习笔记之数组与指针的关系
首先,大家先需知道一个关于基类型的概念 基类型:组成一个新类型的基础类型 这句话是什么意思呢?举个例子: int a[3] = {1,2,3}; 上面是由三个int类型的数组成一个新的类型也就是数组, ...
- 2、适配器 adapter 模式 加个"适配器" 以便于复用 结构型设计模式
1.什么是适配器模式? 适配器如同一个常见的变压器,也如同电脑的变压器和插线板之间的电源连接线,他们虽然都是3相的,但是电脑后面的插孔却不能直接插到插线板上. 如果想让额定工作电压是直流12伏特的笔记 ...
- 阿里出品的最新版 Java 开发手册，嵩山版，扫地僧
说起嵩山,我就想起乔峰,想起慕容复,以及他们两位老爹在少林寺大战的场景.当然了,最令我印象深刻的就是那位默默无闻,却一鸣惊人的扫地僧啊.这次,阿里出品的嵩山版 Java 开发手册的封面就有一个扫地僧, ...
- JS学习第七天
从js-bom入门到放弃 window常用属性: document 返回该窗口内装载的HTML文档 location 返回该窗口装载的HTML文档的URL screen 返回当前浏览者屏幕对象 his ...
- C#LeetCode刷题-并查集
并查集篇 # 题名 刷题 通过率 难度 128 最长连续序列 39.3% 困难 130 被围绕的区域 30.5% 中等 200 岛屿的个数 38.4% 中等 547 朋友圈 45.1% ...
- 关于Exceptionless日志收集框架会被Fiddler抓包，从而获取到ApiKey的问题
关于Exceptionless日志收集框架会被Fiddler抓包,从而获取到ApiKey的问题 环境:Exceptionless5.0.0.Linux.WPF客户端.Fiddler 问题:在使用Exc ...
- Jmeter 常用函数（15）- 详解 __StringFromFile
如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.htm 作用 从文本文件读取字符串,每次一行 需要注意 ...