1.新建dragWindow.vue,将以下代码复制到该vue文件中;
<template>
<div v-if="visible" :id="id" class="drag_box" :class="isFull?'full':''" v-drag :style="{'width':width,'height':height}">
<!-- 标题 -->
<div class="my_drag_title">
<div class="drag_title">{{title}}</div>
<div class="my_drag_title_btn">
<i @click="fullscreen" :class="isFull?'i-icon-exit-full-screen':'i-icon-full-screen'" :title="isFull?'缩小':'全屏'"></i>
<i @click="close" class="i-icon-close" title="关闭"></i>
</div>
</div>
<!-- 内容 -->
<div class="my_drag_content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "drag",
data() {
return {
isFull:false,//是否全屏
visible_:false,
id:'drag_box'+new Date().getTime()
};
},
props:{
title: {
type: String,
default: ''
},
visible:{
type: Boolean,
required: true
},
width:{
type: String,
default: '200px'
},
height:{
type: String,
default: '50vh'
}
},
mounted(){
//初始化数据
this.initPage();
},
methods:{
initPage(){
var _this=this;
//按键esc处理
window.addEventListener("fullscreenchange", function (e) {
_this.isFull=!_this.isFull;
})
},
/**
* 关闭窗口
*/
close: function () {
this.$emit("close")
if(this.isFull){
this.fullscreen();
}
},
/**
* 全屏
*/
fullscreen: function () {
let element = document.documentElement;
if (this.isFull) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else { // 否则,进入全屏
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
// this.isFull=!this.isFull;
},
},
//注册局部组件指令
directives: {
drag: {
inserted: function (el, binding, vnode) {
vnode = vnode.elm
el.onmousedown = ((event) => {
if (event.target.className !== "my_drag_title") {
return
}
// (clientX, clientY)点击位置距离当前可视区域的坐标(x,y)
// offsetLeft, offsetTop 距离上层或父级的左边距和上边距
// 获取鼠标在弹窗中的位置
let mouseX = event.clientX - vnode.offsetLeft
let mouseY = event.clientY - vnode.offsetTop
// 绑定移动和停止函数
document.onmousemove = ((event) => {
let left, top
// 获取新的鼠标位置(event.clientX, event.clientY)
// 弹窗应该在的位置(left, top)
left = event.clientX - mouseX
top = event.clientY - mouseY
// 赋值移动
vnode.style.left = left + 'px'
vnode.style.top = top + 'px'
vnode.style.zIndex =vnode.style.zIndex
})
document.onmouseup = (() => {
document.onmousemove = document.onmouseup = null
})
})
}
}
}
};
</script>
<style lang="scss" scoped>
.drag_box {
border: 1px solid #afafaf;
background-color: white;
position: fixed;
z-index: 1000;
box-shadow: 5px 10px 10px #e8e8e8;
min-height: 500px;
&.full{
width: 100% !important;
height: 100% !important;
left: 0px !important;
top: 0px !important;
}
}
.my_drag_title{
background: #e8e8e8;
padding: 10px;
cursor: move;
display: flex;
display: flex;
justify-content: space-between;
.drag_title{
}
.my_drag_title_btn{
cursor: pointer;
i{
font-size: 22px;
&:hover{
cursor: pointer;
color: #409eff;
}
}
}
}
.my_drag_content{
overflow: auto;
height: calc(100% - 44px);
position: relative;
}
</style>
2.新建一个test.vue 文件,将以下代码拷入文件中;
注意:el-button 为elementUI中封装的按钮组件,如果项目中没有引入浏览器的控制台会报错;
<template>
<div class="test">
<el-button @click="showW">显示</el-button>
<drag-window title='标题' :visible="visible" width="600px" height="300px">
<div>内容</div>
</drag-window>
</div>
</template>
<script>
import dragWindow from './dragWindow'
export default {
name: 'test',
components: {
dragWindow
},
props:[],
data () {
return {
visible:false,
}
},
watch: {},
mounted () {
},
created () {
},
methods: {
showW(){
this.visible=true;
}
}
}
</script>
效果预览: