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; ...
随机推荐
- 树莓派4B的CPU系统里查到为BCM2835而非BCM2711
树莓派4B采用四核64位的ARM Cortex-A72架构CPU,型号为博通BCM2711 SoC.2711是个64位的四核,而2835是多年前的32位单核CPU. 查看当前芯片版本,显示为4核心,但 ...
- NMS系列
NMS soft NMS softer NMS https://www.cnblogs.com/VincentLee/p/12579756.html
- springboot多环境配置文件
一.关于springboot的配置文件 springboot的配置文件主要有两种:properties文件和yml文件,我们只要选择一种使用就可以了.我们通过properties文件介绍一下配置的方式 ...
- C#设计模式之16-迭代器模式
迭代器模式(Iterator Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/417 访问. 迭代器模式 ...
- ARM 精简指令集与复杂指令集
什么是ARM,CISC RISC 又是什么 最近苹果公司召开了最新发布会,苹果PC将采用自研的ARM芯片,这将使苹果PC.移动端.平板成为同一个硬件下的系统.而ARM使用的就是CISC精简指令集, ...
- Aspnet Zero中使用Windows service (Topshelf)来承载Quartz.net任务
Aspnet Zero使用Windows service (Topshelf)来承载Quartz.net任务 网上有很多关于如何使用Topshelf创建ABP的Quartz windows服务,但很少 ...
- MySQL设置跳过密码验证
1.linux系统下 在/etc/my.cnf文件中, [mysqld]下面新增skip-grant-tables,然后重启服务器.
- 在 Go 语言中，我为什么使用接口
强调一下是我个人的见解以及接口在 Go 语言中的意义. 如果您写代码已经有了一段时间,我可能不需要过多解释接口所带来的好处,但是在深入探讨 Go 语言中的接口前,我想花一两分钟先来简单介绍一下接口. ...
- Android 使用Zxing报错：Channel is unrecoverably broken and will be disposed!
使用Zxing的扫描二维码库,修改成从相册识别二维码图片,根据网上的demo修改,继而在我使用的fragment报错Channel is unrecoverably broken and will b ...
- java 二分查找的注意事项
二分查找也是最简单的算法之一了.但是最近发现一般的写法会有问题. public int search(int[] nums, int target) { int left = 0; int right ...