vue实现漂亮的窗口拖拽效果(可改变大小、最大化、关闭)

最新推荐文章于 2024-01-10 15:10:22 发布

原创

最新推荐文章于 2024-01-10 15:10:22 发布 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #html #javascript #css

本文介绍如何使用JavaScript实现一个具备拖动、改变大小、最大化和关闭功能的Vue窗口效果。该窗口支持八个方向调整大小，并且设置有最小宽度和高度限制。同时，通过isshow变量控制最大化和还原按钮的显示状态。

本文实例讲述了JS实现漂亮的窗口拖拽效果,供大家参考,具体如下:
特点：
① 窗口可以拖动；
② 窗口可以通过八个方向改变大小；
③ 窗口可以最大化、还原、关闭；
④ 限制窗口最小宽度/高度。
运行效果截图

html部分

<template>
  <!-- 可拖拽,放大缩小,最大化可视的窗口 -->
  <div id="drag" ref="drag">
    <div class="title">
      <div class="text">这是一个可拖拽窗口</div>
      <div class="opeater">
        // 最大化
        <i class="max el-icon-full-screen" @click="oMax" v-if="isshow"></i>
        // 还原
        <i class="revert el-icon-copy-document" @click="oRevert" v-else></i>
        // 关闭
        <i class="close el-icon-close" @click="close"></i>
      </div>
    </div>
    <div class="resize resizeL"></div>
    <div class="resize resizeT"></div>
    <div class="resize resizeR"></div>
    <div class="resize resizeB"></div>
    <div class="resize resizeLT"></div>
    <div class="resize resizeTR"></div>
    <div class="resize resizeBR"></div>
    <div class="resize resizeLB"></div>
    <div class="content">
      // 插槽,可以放需要的内容
      <slot name="content"></slot>
    </div>
  </div>
</template>

css部分

#drag {
   
   
  position: absolute;
  z-index: 99999999;
  top: 100px;
  left: 15%;
  width: 70%;
  height: 600px;
  background-color: #f3f3f3;
  border-radius: 5px;
  .title {
   
   
    cursor: move;
    position: relative;
    height: 32px;
    line-height: 32px;
    margin: 10px;
    .