封装的弹层组件-自定义拖拽指令

有好多东西不是必需的,自己在删代码吧
拖拽的自定义指令

<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>