这样一个可以做到和浏览器一样各种放大缩小,随意拖动的窗口vue组件,直接上代码
直接将这个vue窗口组件用import 加入到你的vue组件里就可以使用
<template>
<div style="position: absolute">
<div
v-show="!meetShow"
:style="{
right: roundRight + 'px',
bottom: roundBottom + 'px',
}"
class="help"
@mousedown="rounddown($event)"
@dblclick="openMeetDiv"
>
<div class="lightDiv"></div>
</div>
<div
v-show="meetShow"
class="meetdiv"
:style="{
width: fullscreen ? '100%' : scaleW + divW + 'px',
height: fullscreen ? '100%' : scaleH + divH + 'px',
border: '0px solid #ccc',
left: fullscreen ? '0px' : divLeft + 'px',
top: fullscreen ? '0px' : divTop + 'px',
}"
ref="meetdiv"
>
<div
class="top-menu"
@dblclick="fullscreenMaby()"
@mouseenter="foucsMenu()"
@mouseleave="leaveMenu()"
@mousedown="handleMouseDownTopMenu($event)"
>
<button style="background: #64c454" class="btns" @click="minimizeWin()">
-
</button>
<button
style="background: #eebd4f"
@click="dockWin()"
class="btns"
v-if="fullscreen"
>
o
</button>
<button
v-else
style="background: #eebd4f"
class="btns"
@click="fullscreenWin()"
>
O
</button>
<button style="background: #e86b5b" class="btns" @click="closeWin()">
x
</button>
</div>
<!-- 八个角的鼠标放上的样式 -->
<div
class="left-top-box"
@mousedown="handleMouseDownLeftTop($event)"
></div>
<div
class="right-top-box"
@mousedown="handleMouseDownRightTop($event)"
></div>
<div
Class="left-bottom-box"
@mousedown="handleMouseDownLeftBottom($event)"
>