封装可拖拽弹框组件（二）——vue2中，应用可拖拽弹框组件vue-draggable-resizable组件

封装可拖拽弹框组件（二）——vue2中，应用可拖拽弹框组件vue-draggable-resizable组件

示例地址——https://www.npmjs.com/package/vue-draggable-resizable

效果

实例

第四步：主页面

src/views/article/articleFat.vue

  <!-- 资源管理 -->
<template>
  <div>
    <resource-manage ref="resource"></resource-manage>
    <!-- 最小化窗口 -->
    <!-- <div class="mini-content" v-show="smallDivShow">
      <div class="btn-close-div">
        <i class="el-icon-close close-icon" @click="closeSmallDialog"></i>
      </div>
    </div>-->
  </div>
</template>
<script>
import resourceManage from "./index.vue"//资源管理
export default {
  components: {
    resourceManage
  },
  data () {
    return {
      smallDivShow: false,//默认不显示
    }
  },
  methods: {}
}
</script>
<style lang="less" scoped></style>

第五步：主页面嵌套的实例页面

src/views/article/index.vue

<template>
  <div class="container">
    <el-button
      title="资源管理"
      icon="el-icon-receiving"
      slot="reference"
      @click="dialogShow(true)"
    >资源管理-点击按钮显示可拖拽弹框</el-button>
    <VueDraggableResizable
      ref="$dragResource"
      v-show="dialogTableVisible"
      :active="true"
      :w="vDragData.w"
      :h="vDragData.h"
      :z="vDragData.z"
      :y="vDragData.y"
      :minHeight="vDragData.minHeight"
      :minWidth="vDragData.minWidth"
      class="file-show-dialog"
      style="position: fixed; top: 0px"
    >
      <div class="file-tomini-content">
        <file-show ref="file_show"></file-show>
        <div class="file-to-mini-content">
          <!-- <div class="btn-close-div">
            <i class="el-icon-minus close-icon" @click="changeDialogMinimize"></i>
          </div>-->
          <div class="btn-close-div">
            <i class="el-icon-close close-icon" @click="dialogClose"></i>
          </div>
        </div>
      </div>
    </VueDraggableResizable>
  </div>
</template>
<script>
import VueDraggableResizable from "vue-draggable-resizable"; // 1.0、引入组件
import "vue-draggable-resizable/dist/VueDraggableResizable.css";  // 2.0、引入样式
import fileShow from "@/components/fileShowDialog.vue"; //资料管理面板
export default {
  data () {
    return {
      dialogTableVisible: false, //资料管理表格
      // 拖拽控件
      vDragData: {
        w: 820,
        h: 393,
        z: 2000,
        y: 100,
        x: 0,
        minHeight: 393,
        minWidth: 820,
      }
    }
  },
  components: {
    VueDraggableResizable, // 3.0、注册组件
    fileShow
  },
  methods: {
    dialogShow (click) {
      if (click) {
        this.vDragData.w = 820
        this.vDragData.h = 393
        this.vDragData.y = 100
        this.vDragData.x = 0
        this.$refs.$dragResource.width = this.vDragData.w
        this.$refs.$dragResource.height = this.vDragData.h
        this.$refs.$dragResource.left = this.vDragData.x
        this.$refs.$dragResource.top = this.vDragData.y
      }
      this.dialogTableVisible = click ? !this.dialogTableVisible : true; //资料管理弹框
      if (!this.dialogTableVisible) {
        return;
      }
    },
    /**
 *  @description:关闭资料管理弹框
 */
    dialogClose (val) {
      this.dialogTableVisible = false;
      this.$refs.file_show.clearFileData();
    }
  }
}
</script>
<style lang="less" scoped>
.file-show-dialog {
  margin-left: 25%;
  border-radius: 2px;
  box-shadow: 0px 2px 6px 0px rgba(40, 45, 54, 0.12);
  // background-color: var(--color-base) !important;
  background-color: #242731;
  // color: var(--color-light) !important;
  color: #fff;
}
//
.file-tomini-content {
  position: relative;
  padding: 10px;
  .file-to-mini-content {
    position: absolute;
    top: 7px;
    right: 11px;
  }
}
.btn-close-div {
  display: inline-block;
  margin-left: 10px;
  width: 22px;
  height: 22px;
  font-size: 20px;
  color: var(--color-white);
  .close-icon {
    vertical-align: middle;
  }
  .close-icon:hover {
    color: var(--color-light);
  }
}
.vdr.active:before {
  position: initial !important;
}
</style>

第六步：实例页面引入的弹框页面

src/components/fileShowDialog.vue

<!--
 * @Author: XXX
 * @Date: 2022-03-05
 * @Description: 资料管理
-->
<template>
  <!-- 弹框内容区 -->
  <div style="font-size: 64px;margin: 20px;color:red;">弹框内容区</div>
</template>

<script>

export default {
  name: "fileShowDialog",
  data () {
    return {};
  },

  mounted () {
  },
  methods: {
    /**
     * @description:关闭资料管理弹框
     */
    clearFileData () {
      console.log("关闭弹框");
    },
  },
};
</script>

<style lang='less' scoped>
.el-divider--horizontal {
  margin: 5px 0;
}
.el-dialog__wrapper {
  pointer-events: none;

  /deep/ .el-dialog {
    pointer-events: auto;
  }
  /deep/ .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
</style>