1.封装全局组件
<template>
<el-dialog
ref="xhzqDialog"
v-dialogDrag
class="xhzqDialog"
:title="title"
:fullscreen="isfullscreen"
:visible.sync="dialogVisible"
:append-to-body="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:width="width"
:class="isminimize ? 'isminimize' : ''"
:top="top"
>
<div v-show="!isminimize" slot="title" class="medium">
<div class="centers">
<span>{{ title }}</span>
</div>
<div class="icons">
<!-- 缩小 -->
<!-- <i
class="iconfont el-icon-minus"
style="font-size: 24px;"
@click="minimize"
/> -->
<!-- <i
:class="
isfullscreen
? 'iconfont el-icon-crop'
: 'iconfont el-icon-full-screen'
"
style="font-size: 24px;"
@click="IsFullscreen"
/> -->
<svg-icon
v-show="isfullscreen"
icon-class="fullscreenExit"
class="iconfont"
style="font-size: 24px;"
@click="IsFullscreen"
/>
<i
v-show="!isfullscreen"
class="iconfont el-icon-full-screen"
style="font-size: 24px;"
@click="IsFullscreen"
/>
<i
class="iconfont el-icon-close"
style="font-size: 24px;"
@click="closeDialog"
/>
</div>
</div>
<div v-show="isminimize" slot="title" class="horn">
<div class="lefts">
<span>{{ title }}</span>
</div>
<div class="centers">
<i
class="iconfont el-icon-full-screen"
style="font-size: 24px;"
@click="minimize"
/>
</div>
<div class="rights">
<i
class="iconfont el-icon-close"
style="font-size: 24px"
@click="closeDialog"
/>
</div>
</div>
<div v-show="!isminimize" class="dialogBody">
<slot />
</div>
<span slot="footer">
<div v-show="!isminimize" v-if="isFooter" class="dialogFooter">
<slot name="footer" />
</div>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'DiyDialog',
directives: {
dialogDrag: {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
dialogHeaderEl.style.cursor = 'move'
const sty =
dragDom.currentStyle || window.getComputedStyle(dragDom, null)
dialogHeaderEl.onmousedown = e => {
const path =
event.path || (event.composedPath && event.composedPath())
const isFull = path.find(s => {
if (s.className === undefined) {
return false
} else {
return s.className.indexOf('is-fullscreen') > -1
}
})
if (isFull !== undefined) {
return
}
const isMinix = path.find(s => {
if (s.className === undefined) {
return false
} else {
return s.className.indexOf('isminimize') > -1
}
})
if (isMinix !== undefined) {
return
}
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
let styL, styT
if (sty.left.includes('%')) {
styL =
+document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT =
+document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
styL = +sty.left.replace('px', '')
styT = +sty.top.replace('px', '')
}
document.onmousemove = function(e) {
const l = e.clientX - disX
const t = e.clientY - disY
dragDom.style.left = `${l + styL}px`
dragDom.style.top = `${t + styT}px`
}
document.onmouseup = function(e) {
const dragDom = el.querySelector('.el-dialog')
const offsetLeft = dragDom.offsetLeft
const offsetTop = dragDom.offsetTop
const left = Number(dragDom.style.left.replace('px', ''))
const top = Number(dragDom.style.top.replace('px', ''))
const windowWidth = window.innerWidth
const windowHeight = window.innerHeight - 50
const offsetRight = offsetLeft + dragDom.offsetWidth - windowWidth
const offsetBottom = offsetTop + dragDom.offsetHeight - windowHeight
if (offsetLeft < 0) {
dragDom.style.left = left - offsetLeft + 'px'
}
if (offsetTop < 0) {
dragDom.style.top = top - offsetTop + 'px'
}
if (offsetRight > 0) {
dragDom.style.left = left - offsetRight + 'px'
}
if (offsetBottom > 0) {
dragDom.style.top = top - offsetBottom + 'px'
}
document.onmousemove = null
document.onmouseup = null
}
}
}
}
},
props: {
width: {
type: String,
default: '50%'
},
top: {
type: String,
default: '15vh'
},
title: {
type: String,
default: ''
},
isFooter: {
type: Boolean,
default: true
}
},
data() {
return {
isfullscreen: false,
isminimize: false,
dialogVisible: false
}
},
watch: {
dialogVisible(val) {
if (val) {
const el = this.$refs.xhzqDialog.$el.querySelector('.el-dialog')
el.style.left = 0
el.style.top = 0
}
}
},
methods: {
minimize() {
this.isminimize = !this.isminimize
if (this.isfullscreen) this.isfullscreen = !this.isfullscreen
},
closeDialog() {
this.dialogVisible = false
this.$emit('reset')
},
openDialog() {
this.dialogVisible = true
},
IsFullscreen() {
this.isfullscreen = !this.isfullscreen
if (this.isfullscreen) this.$emit('isfullscreen')
}
}
}
</script>
<style lang="scss" scoped>
::v-deep.el-dialog {
margin-top: 10vh !important;
.el-dialog__header {
background: none !important;
}
}
.no_select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.isminimize {
left: 20px;
bottom: 20px;
top: auto;
right: auto;
overflow: hidden;
.el-dialog {
margin: 0 !important;
width: 240px !important;
height: 40px;
top: 0 !important;
left: 0 !important;
}
::v-deep.el-dialog__header {
cursor: auto !important;
background: #fff !important;
.el-dialog__headerbtn {
display: none;
}
}
.dialogFooter {
position: absolute;
right: 0;
bottom: 0;
}
}
.xhzqDialog {
.is-fullscreen {
width: 100% !important;
left: 0 !important;
top: 0 !important;
margin-top: 0 !important;
overflow: hidden;
position: relative;
::v-deep.el-dialog__header {
cursor: auto !important;
}
.el-dialog__body {
height: 100%;
.dialogBody {
height: 100% !important;
max-height: none !important;
padding-bottom: 120px !important;
}
}
.el-dialog__footer {
padding: 10px 20px 10px;
.dialogFooter {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
}
}
}
.el-dialog {
.el-dialog__header {
width: 100%;
padding: 5px 20px 5px !important;
display: flex;
border-bottom: 1px solid #fff;
background: blue !important;
cursor: auto;
.medium {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
.centers {
display: flex !important;
justify-content: center !important;
span {
text-align: center !important;
font-size: 16px;
color: #fff;
}
}
.icons {
display: flex;
align-items: center;
text-align: right;
i {
color: #fff;
font-size: 18px !important;
display: block;
padding: 0 7px;
}
i:hover {
background: #dcdfe6;
cursor: pointer;
}
svg:hover {
background: #dcdfe6;
cursor: pointer;
}
.el-icon-close:hover {
background: #f00;
color: #fff;
}
}
}
.horn {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
div {
i {
color: #fff;
font-size: 20px !important;
}
}
.lefts {
flex: 4;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
span {
font-size: 16px;
color: #fff;
}
}
.centers {
flex: 1;
}
.rights {
flex: 1;
}
i:hover {
cursor: pointer;
color: #000;
}
}
.el-dialog__headerbtn {
top: 0;
font-size: 24px;
}
}
.el-dialog__body {
padding: 0px !important;
.dialogBody {
box-shadow: inset 1px -2px 10px 1px #b0b3b2;
overflow: auto;
padding: 20px 25px 20px;
background: #f7f9fc;
&::-webkit-scrollbar {
width: 4px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 4px;
}
&:hover::-webkit-scrollbar-thumb {
background: hsla(0, 0%, 53%, 0.4);
}
&:hover::-webkit-scrollbar-track {
background: hsla(0, 0%, 53%, 0.1);
}
}
}
.el-dialog__footer {
padding: 10px 20px 10px;
.dialogFooter {
padding: 5px 7px;
border-top: 1px solid #fff;
text-align: right;
.el-button {
padding: 7px 15px;
}
}
}
}
.xhzqDialog {
.el-select {
width: 100%;
}
.el-date-editor {
width: 100%;
}
}
}
</style>
2.使用部分
<template>
<DiyDialog ref="addDialog" :title="'信息新增'" :width="'60%'" :top="'2%'">
<div>
<el-form
ref="postForm"
label-width="140px"
:model="postObj"
:rules="rules"
>
<el-form-item label="标题" prop="title">
<el-input v-model="postObj.title" size="mini" style="width:240px" />
</el-form-item>
<el-form-item label="类别" prop="type">
<el-select v-model="postObj.type" size="mini" style="width:120px">
<el-option
v-for="(item, index) in types"
:key="index"
:value="index"
:label="item"
>
{{ item }}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="内容" prop="content">
<!-- <el-input
v-model="postObj.content"
size="mini"
type="textarea"
rows="8"
style="width:440px"
/> -->
<WangEditor
ref="weditor"
:value="postObj.content"
:is-clear="isClear"
@change="getEditor"
/>
</el-form-item>
</el-form>
</div>
<div slot="footer">
<el-button
size="mini"
type="primary"
@click="addSubmit('postForm')"
>确定</el-button>
<el-button size="mini" @click="addCancel('postForm')">取消</el-button>
</div>
</DiyDialog>
</template>
效果