对话框组件
<!-- 对话框组件(全) -->
<mydialog
:Visible.sync="Visible" //控制对话框的显示与隐藏
:Dialogfrom="Dialogfrom" //对话框内容配置
@cancel="cancel" //对话框取消
@confirm="confirm" //对话框确定
@Visible="present" //点旁边空白或右上角X号关闭
:title="title" //对话框标题
>
//可按照自己需求经定义按钮name固定为(footer)当出现这个名字是的插槽时候原本确定取消便会消失需自行定义以下为例(例子未传值)
<!-- <template v-slot:footer>
<el-button >取 消</el-button>
<el-button type="primary" >确 定</el-button>
</template>-->
</mydialog>
显隐控制及对话框配置内容(input输入框,steps步骤条,Cascader 级联选择器为例)
return{
Visible: false, //控制对话框的显示与隐藏
title: "编辑商品", //对话框标题
//对话框配置内容
Dialogfrom: [
//单个输入框配置项目
{
type: "input", //类型
lable: "商品名称", //标题
value: "", //绑定的值
//验证规则
prop: "goods_name",
rules: [
{
required: true,
message: "角色名不能为空",
trigger: "blur",
},
],
//attrs内写输入框的单个配置
attrs: {
placeholder: "请输入",
clearable: true, //清空输入框图标
"label-width": "120px",
"show-password": false,
},
},{
type: "cascader", //Cascader 级联选择器!!!
lable: "父级分类",
value: "",
prop: "kind", //必填
rules: [ //验证规则
{
required: true,
message: "分类不能为空",
trigger: "blur",
},
],
//attrs内写输入框的单个配置
attrs: {
checkStrictly: true,
placeholder: "请输入",
//清空输入框图标
clearable: true,
"label-width": "120px",
options: [], //放数据***
},
},
//单个输入框配置项目
{
type: "steps",
value: "",
//验证规则
prop: "context",
rules: [],
//attrs内写输入框的单个配置
attrs: {
"label-width": "120px",
direction: "vertical",
active: 1,
"finish-status": "success",
},
children: [],
},
],
}
使用例子
对话框取消
对话框取消
cancel(val) {
//对话框取消事件(有一个回调参数)
this.$message("点击了取消");
this.Visible = false;
val.myfrom.resetFields(); //清空对话空中内容
},
对话框确定
对话框确定
confirm(val) {
//对话框确定后会得到对话框中的数据
console.log(val.value);
val.myfrom.validate((vaild) => {
//点击确定后会自动验证所定义的规则,当满足所有规则后进行下一步不然进行提示
if (vaild) {
this.Visible = false;
// val.myfrom.resetFields();
} else {
this.$message.error("表单填写有误,请检查"); //表单验证失败提示
}
});
},
点旁边空白或右上角X号关闭
点旁边空白或右上角X号关闭
present() {
//已在封装时候中分发事件中清空表单,如有需求特殊可在使用时把封装中清空表单删掉
this.Visible = false;
},
给层级选择器赋值
给层级选择器赋值,需要进行数据处理结果参考下面链接
orieslist() {
this.Dialogfrom[1].attrs.options = this.orieslist;
},
数据处理参考: element.
steps步骤条数据处理
watch: {
//根据需求
kuaidi() {
this.kuaidi.map((item) => {
this.Dialogfrom[0].children.push(item);
});
},
},
封装内容
<template>
<div>
<el-dialog
:title="title"
:visible.sync="Visible"
:width="dialogWidth"
:before-close="handleClose"
v-if="Visible"
>
<el-form :model="value" :rules="rules" ref="myform">
<template v-for="(item,index) in Dialogfrom">
<el-form-item :label="item.lable" :key="index" v-if="!item.children" :prop="item.prop">
<!-- 动态渲染组件 -->
<component :is="`el-${item.type}`" v-bind="item.attrs" v-model="value[item.prop]"></component>
</el-form-item>
<el-form-item :label="item.lable" :key="index" v-else :prop="item.prop">
<!-- 动态渲染组件 -->
<component :is="`el-${item.type}`" v-bind="item.attrs" v-model="value[item.prop]">
<component
v-for="(ite,ind) in item.children"
:key="ind"
:is="`el-${ite.type}`"
v-bind="ite.attrs"
:label="ite.label"
:value="ite.label"
></component>
</component>
</el-form-item>
</template>
</el-form>
<!-- 插槽可替换取消确定按钮改为别的 -->
<slot name="footer" v-if="$slots.footer"></slot>
<span slot="footer" v-else>
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "",
//接受父组件传递的数据
props: {
//
dialogWidth: {
type: String,
default: "800px",
},
//对话框是否打开
Visible: {
type: Boolean,
default: false,
},
//提示信息
title: {
type: String,
default: "对话框",
},
Dialogfrom: {
type: Array,
},
},
//注册组件
components: {
},
data() {
return {
value: {
},
rules: {
},
};
},
methods: {
//对话框右上角X号 或者点击网页空白处
handleClose() {
this.$refs["myform"].resetFields();
this.$emit("Visible");
},
//点击取消
cancel() {
this.$emit("cancel", {
value: this.value,
myfrom: this.$refs.myform,
});
},
//点击确定
confirm() {
this.$emit("confirm", {
value: this.value,
myfrom: this.$refs.myform,
});
},
setrules() {
//不能直接改父组件中的值,通过定义后拷贝拿到然后在子组件中修改
// console.log(this.Dialogfrom, "this.Dialogfrom");
let value = {
};
let rules = {
};
this.Dialogfrom.map((item) => {
rules[item.prop] = item.rules;
value[item.prop] = item.value;
});
this.value = JSON.parse(JSON.stringify(value));
this.rules = JSON.parse(JSON.stringify(rules));
},
},
mounted() {
this.setrules();
},
watch: {
Dialogfrom: {
//复杂数据监听
handler() {
this.setrules();
},
deep: true,
},
},
computed: {
},
};
</script>
<style scoped lang='scss'>
</style>