Dialog component
<!-- 对话框组件(全) -->
<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>
Display and hidden control and dialog configuration content (input input box, steps step bar, Cascader cascade selector as an example)
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: [],
},
],
}
Usage example
Dialog canceled
对话框取消
cancel(val) {
//对话框取消事件（有一个回调参数）
this.$message("点击了取消");
this.Visible = false;
val.myfrom.resetFields(); //清空对话空中内容
},
Dialog box OK
对话框确定
confirm(val) {
//对话框确定后会得到对话框中的数据
console.log(val.value);
val.myfrom.validate((vaild) => {
//点击确定后会自动验证所定义的规则，当满足所有规则后进行下一步不然进行提示
if (vaild) {
this.Visible = false;
// val.myfrom.resetFields();
} else {
this.$message.error("表单填写有误，请检查"); //表单验证失败提示
}
});
},
Click the blank next to it or the X in the upper right corner to close
点旁边空白或右上角X号关闭
present() {
//已在封装时候中分发事件中清空表单，如有需求特殊可在使用时把封装中清空表单删掉
this.Visible = false;
},
Assign value to level selector
给层级选择器赋值，需要进行数据处理结果参考下面链接
orieslist() {
this.Dialogfrom[1].attrs.options = this.orieslist;
},
Data processing reference: element .
steps step data processing
watch: {
//根据需求
kuaidi() {
this.kuaidi.map((item) => {
this.Dialogfrom[0].children.push(item);
});
},
},
Package content
<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>