一个类似浏览器窗口，可以放大缩小的窗口Vue组件

最新推荐文章于 2024-07-04 17:33:53 发布

程健001

最新推荐文章于 2024-07-04 17:33:53 发布

阅读量562

点赞数

分类专栏： web 文章标签： vue窗口拖拽窗口 web拖拽窗口放大缩小窗口 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_41690477/article/details/129670976

版权

本文介绍了一个Vue组件，该组件模仿浏览器窗口，支持拖拽和自由缩放，便于在Web应用中实现类似功能。只需通过import导入即可在项目中使用。

摘要由CSDN通过智能技术生成

这样一个可以做到和浏览器一样各种放大缩小，随意拖动的窗口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)"
      >