有好多东西不是必需的,自己在删代码吧
拖拽的自定义指令
<template>
<div>
<div
v-if="isDialogModel&&dialogVisible"
style="width: 100%;height: 1000vh;background-color: rgba(79,79,77,0.25);position: fixed;left:0;top:0;z-index: 10">
</div>
<div ref="dialogRef" :class='`dialog-wrapper`'
:style="`width:${width}px;height:${height}px;top:${top}px;left:${left}px;z-index:${zIndex}`"
v-dialog-drag="{width,height}"
v-if="visible">
<div class="dialog-contaier">
<div class="dialog-header">
<div class="dialog-title">
<span>
<img src="../../assets/images/dialogIcon.png" width="35px"/>
</span>
<span class="dialog-title-shrink">{{ title }}</span>
</div>
<div class="dialog-headerbtn">
<el-button @click="handlerZoom"
:icon="`el-icon ${ zoom ?'el-icon-arrow-up':'el-icon-minus'}`">
</el-button>
<el-button @click="closedDialog" icon="el-icon el-icon-close">
</el-button>
</div>
</div>
<div class="dialog-content">
<slot name="content"></slot>
</div>
</div>
</div>
</div>
</template>
<script>
import eventBus from '@/utils/bus'
export default {
name: "dialogContainer",
props: {
zIndex: {
type: Number,
default: 10,
},
isDialogModel: {
type: Boolean,
default: false,
},
title: {
type: String,
default: ''
},
width: {
type: Number,
default: 1200
},
height: {
type: Number,
default: 700
},
top: {
type: Number,
default: 200
},
left: {
type: Number,
default: 0
},
dialogVisible: {
type: Boolean,
default: false,
},
// 是否为子弹窗
isChildren: {
type: Boolean,
default: false,
},
// 是否页面嵌套
isNest: {
type: Boolean,
default: false,
}
//是否显示缩小按钮
// showZoom: {
// type: Boolean,
// default: false,
// }
},
watch: {
dialogVisible: {
handler(newValue, oldValue) {
this.visible = newValue;
if (this.zoom) {
this.zoom = false;
}
},
immediate: true,
}
},
data() {
return {
visible: false,
zoom: false,
}
},
created() {
eventBus.$on('dialogVisible', () => {
if (this.title !== '' && this.title !== null && this.title.length > 0) {
if (this.dialogVisible) {
if (this.isChildren) {
this.isNest ? this.$parent.$emit('update:dialogVisible', false) : this.$emit('update:dialogVisible', false);
}
}
}
})
},
methods: {
// 关闭弹层
closedDialog() {
if (this.dialogVisible) {
// 主弹层才会触发 全部关闭
if (!this.isChildren) {
eventBus.$emit('dialogVisible');
// eventBus.$off('dialogVisible');
}
this.isNest ? this.$parent.$emit('update:dialogVisible', false) : this.$emit('update:dialogVisible', false);
}
},
handlerZoom() {
this.zoom = !this.zoom;
let dialogDom = this.$refs.dialogRef;
if (this.zoom) {
if (this.$route.name === 'IntelligentCommand') {
$(dialogDom).addClass('dialog-wrapper-zoom-intelligentCommand dialog-wrapper-zoom-transition');
} else {
$(dialogDom).addClass('dialog-wrapper-zoom dialog-wrapper-zoom-transition');
}
} else {
if (this.$route.name === 'IntelligentCommand') {
$(dialogDom).removeClass('dialog-wrapper-zoom-intelligentCommand dialog-wrapper-zoom-transition');
} else {
$(dialogDom).removeClass('dialog-wrapper-zoom dialog-wrapper-zoom-transition');
}
}
}
},
mounted() {
// 添加到 el-main 遮罩层
if (this.isDialogModel) {
const body = document.querySelector('.el-main');
console.log(body)
if (body.append) {
body.append(this.$el)
} else {
body.appendChild(this.$el)
}
}
},
beforeDestroy() {
// eventBus.$off('dialogVisible')
this.$emit('update:dialogVisible', false)
}
}
</script>
<style lang='scss' scoped>
.dialog-wrapper-zoom-transition {
transition: all 0.5s;
}
.dialog-wrapper-zoom-intelligentCommand {
width: 400px !important;
height: 70px !important;
left: 2500px !important;
top: 800px !important;
.dialog-title-shrink {
display: inline-block;
width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.dialog-contaier {
.dialog-content {
display: none;
}
}
}
.dialog-wrapper-zoom {
width: 400px !important;
height: 70px !important;
left: 2900px !important;
top: 800px !important;
.dialog-title-shrink {
display: inline-block;
width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.dialog-contaier {
.dialog-content {
display: none;
}
}
}
.dialog-wrapper {
position: fixed;
background-color: rgba(26, 25, 25, 1);
border-radius: 2px;
z-index: 10;
/*pointer-events: none;*/
/* 文字不可选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
user-drag: none;
}
.dialog-contaier {
width: inherit;
height: inherit;
.dialog-header {
position: relative;
height: 68px;
overflow: hidden;
background-color: #1a2355;
padding: 10px;
user-select: none;
.dialog-title {
display: flex;
justify-content: flex-start;
align-items: center;
& > span:first-child {
margin-left: 10px
}
& > span:last-child {
margin-left: 15px;
font-weight: 550;
color: #ffffff;
font-size: 20px;
}
}
.dialog-headerbtn {
position: absolute;
top: 10px;
right: 20px;
& > button {
border: none;
background-color: transparent;
font-size: 20px;
position: relative;
}
}
}
.dialog-content {
height: calc(100% - 68px);
padding: 10px;
}
}
</style>