Customize the pop-up box style of element-plus

The pop-up box is frequently used in the project, and a unified style is required. This component can customize the head style and content of the pop-up box

1. The file structure is as follows:
 

 

 2. Customize the myDialog component

need:

1. Customize the background style and text of the head of the bullet box

2. Customize the content of the pop-up box

3. Basic business process framework

The complete code of components/myDialog/index.vue:

<template>
	<div class="system-user-dialog-container">
		<el-dialog center align-center v-model="state.isShow" width="769px" @close="dialogRefresh">
			<template #header="{ titleClass }">
				<div :class="titleClass">{
   
   { state.title }}</div>
			</template>
			<el-form ref="formRef" :rules="state.rules" :model="state.formData" size="default" label-width="100px">
				<slot name="formPart">
					<div>表单内容</div>
				</slot>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(formRef)" size="default">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="myDialog">
import { ElMessage, FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';

// 定义变量内容
const formRef = ref();

// 定义子组件向父组件传值/事件
const emit = defineEmits(['doSend']);

const state: any = reactive({
	isShow: false,
	formData: [],
	title: '',
	rules: {},
});

// 取消
const onCancel = () => {
	state.isShow = false;
};

// 提交
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	//表格验证
	await formEl.validate(async (valid: any, fields: any) => {
		if (valid) {
			emit('doSend');
		} else {
			ElMessage.warning('表格项验证失败,请检查');
			console.log('表格项验证失败!', fields);
		}
	});
	onCancel();
};

const dialogRefresh = () => {
	// 清除校验规则
	formRef.value?.resetFields();
	// 重置表单内容
	state.formData = [];
};

/*
 *   formData：表单数据
 *   title：标题
 *   rules：表单校验规则
 */
const openDialog = (formData: object, title: string, rules: object) => {
	state.isShow = true;
	state.formData = formData;
	state.title = title;
	state.rules = rules;
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss">
:deep .el-dialog__header {
	width: 100%;
	height: 60px;
	background-color: #5e8dff;
}

:deep .el-dialog__header .el-dialog__title {
	font-size: 20px;
	color: #fff;
}

:deep .el-dialog__header .el-dialog__close {
	color: #fff;
}
</style>

3. Use components

Implementation:

1. Customize the form content in the pop-up box through the slot

2. Parent-child component passing value

3.ref gets dom directly

 The complete code of dialogDemo/dialog.vue:

<template>
	<div class="system-dic-dialog-container">
		<myDialog ref="myDialogRef" @doSend="handleOperate">
			<template #formPart>
				<div>自定义表单内容</div>
			</template>
		</myDialog>
	</div>
</template>

<script setup lang="ts" name="systemDicDialog">
import myDialog from '/@/components/myDialog/index.vue';
import { reactive, ref } from 'vue';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const myDialogRef = ref();
const state = reactive({
	data: [],
	title: '',
	isAdd: false,
	rules: {
		// area: [{ required: true, message: '请选择区域', trigger: 'blur' }],
		// alarmValueName: [{ required: true, message: '请输入告警值名称', trigger: 'blur' }],
		// alarmValue: [{ required: true, message: '请输入告警值', trigger: 'blur' }],
		// alarmValueUnit: [{ required: true, message: '请选择告警值单位', trigger: 'blur' }],
		// alarmText: [{ required: true, message: '请输入告警提示语', trigger: 'blur' }],
	},

	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

const openDialog = (row: any) => {
	console.log(row, 'row');
	console.log(state.data, 'data');
	if (row) {
		state.title = '修改';
		state.isAdd = false;
	} else {
		state.title = '新增';
		state.isAdd = true;
	}
	myDialogRef.value.openDialog(state.data, state.title, state.rules);
};

// 发请求
const handleOperate = () => {
	console.log('校验成功');
	state.isAdd ? doAdd() : doEdit();
};

// 添加
const doAdd = () => {
	console.log('doAdd');
	clearFormData();
	emit('refresh');
};
// 修改
const doEdit = () => {
	console.log('doEdit');
	clearFormData();
	emit('refresh');
};

// 清空表单信息
const clearFormData = () => {
	state.data = [];
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

After adding or editing successfully, refresh the page

  The complete code of dialogDemo/index.vue:

<template>
	<div class="notice-bar-container layout-pd">
		<el-button type="success" @click="handleOpenDialog">点我打开弹框</el-button>
		<openDialog ref="openDialogRef" @refresh="handleRefresh"></openDialog>
	</div>
</template>
<script setup lang="ts" name="makeDialogDemo">
import openDialog from './dialog.vue';
import { ref } from 'vue';

const openDialogRef = ref();

const handleOpenDialog = () => {
	openDialogRef.value.openDialog();
};

// 刷新页面
const handleRefresh = () => {};
</script>
<style lang="scss" scoped></style>