<template> <el-dialog :title="title" :visible.sync="visible" :width="width" :append-to-body="appendToBody" :modal="modal" :close-on-click-modal="false" :fullscreen="fullscreen" :destroy-on-close="destroyOnClose" :modal-append-to-body="modalAppendToBody" :class="customClass" @close="close" class="dialog"> <slot name="content" /> <span slot="footer" class="dialog-footer"> <slot name="footer" /> </span> </el-dialog> </template> <script> export default { name: '', props: { show: { type: Boolean, default: false }, customClass: { type: String, default: '' }, title: { type: String, default: '新增' }, appendToBody: { // Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true type: Boolean, default: true }, modalAppendToBody: { // 遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上 type: Boolean, default: true }, modal: { // 是否需要遮罩层 type: Boolean, default: true }, fullscreen: { // 是否全屏 type: Boolean, default: false }, destroyOnClose: { // 关闭时销毁 Dialog 中的元素 type: Boolean, default: false }, width: { type: String, default: '30%' } }, data () { return {} }, computed: { visible: { get () { return this.show }, set (val) { this.$emit('update:show', val) // visible 改变的时候通知父组件 } } }, methods: { close () { this.$emit('close') } } } </script> <style lang="scss" scoped> .dialog { /deep/.el-dialog { overflow: hidden; background: url("~@/image/dialogBg.png") no-repeat !important; background-size: 100% 100% !important; } .el-dialog__header { padding: 0; height: 56px; line-height: 56px; border-bottom: none; .el-dialog__title { font-weight: 400; } .el-dialog__title:before { display: inline-block; content: ''; width: 4px; height: 16px; background: #3aa3f8; margin-left: 12px; margin-right: 8px; position: relative; top: 2px; } .el-dialog__headerbtn { position: absolute; // top: 2%; right: 12px; } } .el-dialog__body { margin: 0px 12px; padding: 48px 24px; background: #fff; border: 1px solid #dfe7f3; .el-button { padding: 8px 16px; border: none; } .el-form { .el-checkbox { line-height: 32px; height: 32px; } .form-item-mb0 { margin-bottom: 0 !important; } .el-form-item { margin-bottom: 24px; .el-form-item__label { height: 32px; line-height: 32px; vertical-align: middle; } .el-form-item__content { line-height: 32px; // date 组件有图标 .has-icon.el-date-editor { .el-input__inner { padding-left: 32px; } } .el-input__inner { padding: 0 8px; height: 32px; line-height: 32px; text-align: left; } .el-textarea__inner { padding: 8px 8px; } .el-input .el-input__icon { font-size: 14px; color: #747e8c; } } } } .el-select, .el-cascader, .el-date-editor { width: 100%; line-height: 32px; } } .el-dialog__footer { padding: 0 12px; height: 56px; line-height: 56px; border: none; .el-button { padding: 8px 16px; border: none; } .el-button+.el-button { margin-left: 12px; } } } </style>