封装可拖拽弹框组件(二)——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>