element-ui背景弹框

@余秋

已于 2022-03-21 11:50:18 修改

阅读量1k

点赞数

分类专栏： vue2 element el-dialog 文章标签： html5 css vue.js

于 2022-03-21 11:42:49 首次发布

本文链接：https://blog.csdn.net/qq_44777244/article/details/123631190

版权

vue2 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

element

1 篇文章 0 订阅

订阅专栏

el-dialog

1 篇文章 0 订阅

订阅专栏

本文档展示了如何创建一个名为`CommonDialog.vue`的Vue组件，该组件用于构建一个具有自定义样式的弹出对话框。组件接收`title`、`value`和`beforeClose`等属性，支持通过`v-model`双向绑定显示状态，并提供了`show`方法来显示对话框。此外，还包含了一段使用示例，说明如何导入、注册和使用这个组件。

摘要由CSDN通过智能技术生成

创建CommonDialog.vue 文件

<template>
	<el-dialog 
		:title="title"
		:before-close="beforeClose"
		:visible.sync="dialogVisible"
		class="clearly-dialog detail-dialog"
		append-to-body
		v-if="dialogVisible"
	>
		<slot></slot>
	</el-dialog>
</template>
 
<script>
	export default {
		name: "CommonDialog",
		props: {
			title: {
				default: ''
			},
			value:{
				type:Boolean
			},
			beforeClose:{
				default(){
					return function (done) {
						done()
					}
				}
			}
		},
		data () {
			return {
				dialogVisible: false,
			};
		},
		watch: {
			value(val){
				this.dialogVisible = val
			},
			dialogVisible(val){
				this.$emit('input',val)
			}
		},
		methods: {
			show() {
				this.dialogVisible = true;
			}
		},
	};
</script>
 
<style lang="scss">
	.detail-dialog {
		.el-dialog {
			height: 700px;	margin-top: 0 !important;	position: absolute;	top: 50%;	left: 50%;transform: translate(-50%, -50%) !important;
			background: url("../assets/images/home/dialog-bg.png") no-repeat;background-size: 100% 100%;
			width: 12.6rem;display: flex;flex-direction: column;padding: 0 8px;z-index: 999;
			-webkit-box-shadow: none ;
    	     box-shadow: none;
			.el-dialog__body {
				flex: 1;height: 0;
			}
			.el-dialog__headerbtn {
				width: 0.25rem;height: 0.25rem;
				background: url("../assets/images/home/icon-close.png") no-repeat;background-size: 100% 100%;
				top: 0.7rem;right: 0.4rem;
				i {
					display: none;
				}
			}
			.el-dialog__header {
				text-align: center;padding: 0.6rem 0 0.1rem 0;
				.el-dialog__title {
					color: #afdcff;font-size: 0.48rem;font-weight: bolder;
				}
			}
		}
	}
</style>

使用：

1. import CommonDialog from '_c/CommonDialog.vue';
2. components: {
	 CommonDialog
   },
3. <CommonDialog title="xxxx"> 
    <div>弹框</div>
   </CommonDialog>