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; ...
随机推荐
- boost之signal的使用
文章目录 简介 代码 模板实现: 测试代码 运行结果 简介 boost是C++的一个扩展库,被称为C++准标准库,里面的组件很丰富,并且引用方便,85%的组件只需要引用头文件即可使用. 并且在嵌入式系 ...
- Python使用Tornado+Redis维护ADSL拨号服务器代理池
们尝试维护过一个免费的代理池,但是代理池效果用过就知道了,毕竟里面有大量免费代理,虽然这些代理是可用的,但是既然我们能刷到这个免费代理,别人也能呀,所以就导致这个代理同时被很多人使用来抓取网站,所以当 ...
- Python 创建用户界面之 PyQt5 的使用
之前给大伙介绍了下 tkinter,有朋友希望小帅b对其它的 Python GUI 框架也说道说道,那么今天就来说说 PyQt5 如何创建用户界面. 很多人学习python,不知道从何学起.很多 ...
- Windows聚焦失效问题的解决办法
1. 设置Windows聚焦 步骤:任务栏右键 → 任务栏设置 → 锁屏界面 → 背景选择Windows聚焦 2. 解决Windows聚焦失效问题 设置完Windows聚焦之后,锁屏界面却没有变. 尝 ...
- 20、Java 泛型
1.晓之以理,动之以码 学Java就是很上头哦,一来直接三连问!!! 什么是泛型?为什么要用泛型?泛型怎么用? 当然泛型在Java中有很重要的一个地位,在面向对象编程以及在各种设计模式中有非常广泛的应 ...
- Jenkins(Extended E-mail Notification)邮箱配置正确但是并没有发送邮件
废话 近期在把之前的接口自动化demo与jenkins集成,昨天发现了邮件配置正确但是没有发送邮件的问题,通过勾选系统设置 - >Extended E-mail Notification -&g ...
- QUIC协议详解之Initial包的处理
从服务器发起请求开始追踪,细说数据包在 QUIC 协议中经历的每一步.大量实例代码展示,简明易懂了解 QUIC. 前言 本文介绍了在 QUIC 服务器在收到 QUIC 客户端发起的第一个 UDP 请求 ...
- Java并发---并发理论
一.如何理解线程安全 在多线程中稍微不注意就会出现线程安全问题,那么什么是线程安全问题? 我的认识是.在多线程下代码执行的结果和预期的正确的结果不一致,该代码就是线程不安全的,否则就是线程安全的 在深 ...
- LDA线性判别分析原理及python应用（葡萄酒案例分析）
目录 线性判别分析(LDA)数据降维及案例实战 一.LDA是什么 二.计算散布矩阵 三.线性判别式及特征选择 四.样本数据降维投影 五.完整代码 结语 一.LDA是什么 LDA概念及与PCA区别 LD ...
- C++ 2的幂次方表示
[题目描述] 任何一个正整数都可以用2的幂次方表示.例如: 137=27+23+20 同时约定方次用括号来表示,即ab可表示为a(b).由此可知,137可表示为: 2(7)+2(3)+2(0) 进一步 ...