首页 > 其他分享 >vue 手动调节上下左右

vue 手动调节上下左右

时间:2024-03-23 15:11:07浏览次数:20  
标签:style vue const 手动 moveLen 上下左右 document resize left

<template>
  <div class="Drag2">
    <div class="box" ref="box">
      <div class="topBox">
        <div class="left">
          sdjklsajdasljdlaskdj
        </div>
        <div class="resize" title="左右侧边栏">⋮</div>
        <div class="mid">  asdjasljdlaskjdasljdas</div>
      </div>
      <div title="上下侧边栏" class="move">⋯</div>
      <div class="downBox">
       asjdlasjdaskjdasjdlasl
      </div>
    </div>
  </div>
</template>

<script>

export default {
  mounted () {
    this.dragControllerLR()
    this.dragControllerUD()
  },
  methods: {
    // 左右拖动事件
    dragControllerLR () {
      const resize = document.getElementsByClassName('resize')
      const left = document.getElementsByClassName('left')
      const mid = document.getElementsByClassName('mid')
      const box = document.getElementsByClassName('topBox')
      console.log(document.getElementsByClassName('resize'))
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          // 颜色改变提醒
          resize[i].style.background = '#818181'
          const startX = e.clientX
          resize[i].left = resize[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            const endX = e.clientX
            let moveLen = resize[i].left + (endX - startX) // (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            const maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

            if (moveLen < 50) moveLen = 50 // 左边区域的最小宽度为50px
            if (moveLen > maxT - 150) moveLen = maxT - 150 // 右边区域最小宽度为150px

            resize[i].style.left = moveLen // 设置左侧区域的宽度

            for (let j = 0; j < left.length; j++) {
              left[j].style.width = moveLen + 'px'
              mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'
            }
          }
          // 鼠标松开事件
          // eslint-disable-next-line no-unused-vars
          document.onmouseup = function (evt) {
            // 颜色恢复
            resize[i].style.background = '#d6d6d6'
            document.onmousemove = null
            document.onmouseup = null
            resize[i].releaseCapture && resize[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resize[i].setCapture && resize[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
    },

    // 上下拖动事件
    dragControllerUD () {
      const resize = document.getElementsByClassName('move')
      const topBox = document.getElementsByClassName('topBox')
      const topLeft = document.getElementsByClassName('left')
      const topRigtt = document.getElementsByClassName('mid')
      const downBox = document.getElementsByClassName('downBox')
      const box = document.getElementsByClassName('box')
      console.log(document.getElementsByClassName('move'))
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          console.log(resize[i].top)
          // 颜色改变提醒
          resize[i].style.background = '#818181'
          const startY = e.clientY
          resize[i].top = resize[i].offsetTop
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            const endY = e.clientY
            let moveLen = resize[i].top + (endY - startY) // (endY - startY)=移动的距离。resize[i].top+移动的距离=上边区域最后的高度
            const maxT = box[i].clientHeight - resize[i].offsetHeight // 容器高度 - 上边区域的高度 = 下边区域的高度
            if (moveLen < 50) moveLen = 50 // 上边区域的最小高度为50px
            if (moveLen > maxT - 150) moveLen = maxT - 150 // 下边区域最小高度为150px

            resize[i].style.top = moveLen // 设置上边区域的高度

            for (let j = 0; j < topBox.length; j++) {
              topBox[j].style.height = moveLen + 'px'
              topLeft[j].style.height = moveLen + 'px'
              topRigtt[j].style.height = moveLen + 'px'
              downBox[j].style.height = box[i].clientHeight - moveLen - 10 + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function () {
            // 颜色恢复
            resize[i].style.background = '#d6d6d6'
            document.onmousemove = null
            document.onmouseup = null
            resize[i].releaseCapture && resize[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resize[i].setCapture && resize[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
    }
  }
}
</script>
<style>
/* 拖拽相关样式 */

/*包围div样式*/
.box {
  height: 100vh;
  width: calc(98vh - 10px);
  margin: 1% 0px;
  overflow: hidden;
  box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}

/*左侧div样式*/
.left {
  width: calc(32% - 10px); /*左侧初始化宽度*/
  background: #71ad88;
  float: left;
}

/* 拖拽区div样式 */
.resize {
  cursor: w-resize;
  float: left;
  position: relative;
  top: 45%;
  background-color: #d6d6d6;
  border-radius: 5px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  /*z-index: 99999;*/
  font-size: 32px;
  color: white;
}

/*拖拽区鼠标悬停样式*/
.move:hover {
  color: #444444;
}

/*右侧div'样式*/
.mid {
  float: left;
  width: 68%; /*右侧初始化宽度*/
  background: #f3f3f3;
  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
  /*上方div'样式*/

  .topBox {
    width: 100%;
    height: 60%;
    background-color: #3ff53f;
    display: flex;
  }

  /*下方div'样式*/

  .downBox {
    width: 100%;
    height: calc(40% - 10px);
    background-color: #f0fd35;
    display: flex;
  }

  /* 拖拽区div样式 */

  .move {
    cursor: s-resize;
    width: 100%;
    height: 10px;
    background-color: #d6d6d6;
    margin: 0 auto;
    border-radius: 5px;
    text-align: center;
    line-height: 3px;
    font-size: 32px;
    color: white;
  }

  /*拖拽区鼠标悬停样式*/

  .move:hover {
    color: #444444;
  }
}
</style>

  

标签:style,vue,const,手动,moveLen,上下左右,document,resize,left
From: https://www.cnblogs.com/qtfwax/p/18091148

相关文章

  • 基于SpringBoot+MyBatis+Vue的电商智慧仓储管理系统的设计与实现
    前言博主简介......
  • 基于ssm+vue.js的游戏销售系统附带文章和源代码设计说明文档ppt
    文章目录前言详细视频演示具体实现截图技术栈后端框架SSM前端框架Vue持久层框架MyBaits系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于ssm+vue.js的中学课内小说阅读与学习系统附带文章和源代码设计说明文档ppt
    文章目录前言详细视频演示具体实现截图技术栈![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/26c90735e94d4c69bdcaca3dff0c2d21.png)后端框架SSM前端框架Vue持久层框架MyBaits系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参......
  • 基于ssm+vue.js的网络音乐系统附带文章和源代码设计说明文档ppt
    文章目录前言详细视频演示具体实现截图技术栈后端框架SSM前端框架Vue持久层框架MyBaits系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • Vue入门(一)
    基于Vue官网教程(1-9)的自学笔记,记录自己对概念的粗浅理解。欢迎交流,如有不对请留言指正~目录1、单文件组件2、选项式API3、声明式渲染:4、v-model5、v-for渲染列表/数组6、compute计算属性计算属性便利在哪?7、模板引用1、单文件组件Vue的单文件组件会将一个组件......
  • ros2:手动编译包
    首先需要colcon库支持sudoaptinstallpython3-colcon-common-extensions github上拉个包(这里使用示例程序)gitclonehttps://github.com/ros2/examplessrc/examples-bfoxy其中-bfoxy代表选择foxy版本分支 编译colconbuild 进入包所在目录cd/src/ex......
  • 关于Vue MV 设计模型
      在Vue.js中,MV(Model-View)设计模型是一个非常重要的概念,它帮助我们组织和管理应用程序中的数据、用户界面和业务逻辑。在这篇文章中,我们将探讨如何在Vue.js中设计一个优秀的MV模型。###ModelModel层代表着应用程序的数据和业务逻辑。在Vue.js中,我们通常使用Vuex......
  • 基于SpringBoot+Vue的宠物猫售卖管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我自己的网站自己的小程序(小蔡coding)代码参考数据库参考源码获取前言......
  • Vue开发日志:自定义组件:通用开发流程
    自定义组件:通用开发流程通用流程一组概念:key,value,labelProps:required和default同时存在的必要性让我们简单梳理一下通用流程在Vue.js中开发自定义组件的通用流程如下:定义组件模板:创建一个.vue文件,里面包含模板、样式和脚本部分。例如:<!--MyCustomCompone......
  • Vue-组件
    Vue组件一、概念Vue基于可以重用、独立的思想,设计出组件这一概念,组件可以使程序员对每个部分进行单独设计。如下图为组件很形象的定义![image-20240322222233651](/Users/zhangqi/Library/ApplicationSupport/typora-user-images/image-20240322222233651.png)二、非单文件......