VUE实现Studio管理后台之鼠标拖放改变窗口大小

近期改版RXEditor，把改版过程，用到的技术点，记录下来。昨天完成了静态页面的制作，制作过程并未详细记录，后期已经不愿再补了，有些遗憾。不过工作成果完整保留在github上，地址：https://github.com/vularsoft/studio-ui

这个项目下面的html-demo.html，便是静态文件。

话不多说，今天就把昨天的HTML转化成VUE。

先看效果：

布局原理

页面采用纯弹性盒子flex box布局，无float postion等，页面分成如下几个区域：

细实线描述的是各个DIV之间的嵌套关系，粗黑线是独立的DIV，我称它们为把手（HADLE），主要用来接受鼠标拖动事件，以完成拖动操作。handle非为两种，横向x-handle，纵向y-handle，css中定义x-handle宽度为3px，高度为100%，y-handle高度为3px，宽度为100%，鼠标光标也相应设置一下：

.vular-studio .x-handle{
 width: 3px;
 cursor: w-resize;
 z-index: 10;
}

.vular-studio .y-handle{
 height: 3px;
 cursor: s-resize;
 z-index: 10;
}

拖动原理

带有把手的区域固定大小（固定宽度或者高度），不带把手的部分跟随弹性盒子变化。把手handle是一个独立的VUE组件，它把拖动信息传递给父窗口，父窗口改变自身大小。以bottom-area为例，这是一个可以改变自身大小的DIV：

<template>
 <div class="bottom-area" :style="{height:height + 'px'}">
 <YHandle @heightChange="heightChange"></YHandle>
 <div class="bottom-inner">
  <slot></slot>
 </div>
 </div>
</template>

<script>
import YHandle from './YHandle.vue'
export default {
 name: 'BottomArea',
 components:{
 YHandle,
 },
 data () {
 return {
  height:220,
 }
 },
 methods: {
 heightChange(movement){
  this.height += movement
  if(this.height < 30){
  this.height = 30
  }
  if(this.height > 600){
  this.height = 600
  }
 },
 },
}
</script>

它对应的把手代码：

<template>
 <div class="y-handle"
 @mousedown="mouseDown"
 ></div>
</template>

<script>
export default {
 name: 'YHandle',
 data () {
 return {
  lastY:''
 }
 },

 created () {
 document.addEventListener('mouseup', this.mouseUp)
 },

 destroyed() {
 document.removeEventListener('mouseup', this.mouseUp)
 },

 methods: {
 mouseDown(event){
  document.addEventListener('mousemove', this.mouseMove)
  this.lastY = event.screenY
 },
 mouseMove(event){
  console.log('move')
  this.$emit('heightChange', this.lastY - event.screenY)
  this.lastY = event.screenY
 },
 mouseUp(event){
  this.lastY = ''
  document.removeEventListener('mousemove', this.mouseMove)
 },
 },
}
</script>

制作步骤

先建一个VUE项目：
1、安装node
2、安装webpack
3、安装VUE
4、新建VUE项目：vue init webpack-simple
5、根据相应布局制作VUE组件
具体代码，请参考：https://github.com/vularsoft/studio-ui，根据标注，获取相应的版本记录即可。

到此这篇关于VUE实现Studio管理后台之鼠标拖放改变窗口大小 的文章就介绍到这了,更多相关vue 鼠标拖放改变窗口大小 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue实现可视化可拖放的自定义表单的示例代码

    实现如例子所示的可视化可拖放表单功能.整个页面,分为左中右三栏布局,左栏的部件库的部件(组件)作为key,拖放到中间区域时,往vuex存放数组数据,拖一个就push一个.点击某个组件时,在右栏显示其属性,其实也就是在vuex存放的数据中查找数据迭代属性. 左中右三栏 左右固定 中间自适应布局 首先,布局上来看,左右都是可以拉伸的,中间是自适应的布局. 左右分别float left和float right, 中间栏使用margin撑开布局,即可完成布局 动态缩放浏览器窗口来查看效果 动态显示tem

  • Vue.js实现拖放效果的实例

    Vue.js实现拖放效果的实例

    页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>

  • vue 中基于html5 drag drap的拖放效果案例分析

    事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动. 案例一: 开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码! move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft let disY = e.clientY - o

  • Vue实现拖放排序功能的实例代码

    Vue中实现拖放排序,啥也不说,贴上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> ul { min-height: 100px; width: 200px; margin: 20px auto; backgrou

  • VUE实现Studio管理后台之鼠标拖放改变窗口大小

    近期改版RXEditor,把改版过程,用到的技术点,记录下来.昨天完成了静态页面的制作,制作过程并未详细记录,后期已经不愿再补了,有些遗憾.不过工作成果完整保留在github上,地址:https://github.com/vularsoft/studio-ui 这个项目下面的html-demo.html,便是静态文件. 话不多说,今天就把昨天的HTML转化成VUE. 先看效果: 布局原理 页面采用纯弹性盒子flex box布局,无float postion等,页面分成如下几个区域: 细实线描述的

  • 详解Vue Elememt-UI构建管理后台

    安装 我使用的是 vue-cli 初始化项目,命令如下: npm i -g vue-cli mkdir my-project && cd my-project vue init webpack 修改 package.json 文件: ... "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1", "element-ui&

  • Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)

    昨天做的tabs窗口,非常满意,今天乘胜追击,把它做成了可以根据自身大小改变显示样式,自身宽度过小时,tab页可以浮动停靠其一侧.具体效果: 左侧 右侧 向来喜欢简单明了的东西,所以想实现的简单一点,无奈现实不允许啊,功能实在有一丢丢复杂.硬着头皮搞了整整一下午,终于完成. 左侧跟右侧窗口,要使用同一个控件,尽量增加代码的可复用性,控件的状态就有些多:正常显示(普通tabs窗口),列表(显示图标跟标题,点击时弹出tab页),迷你列表(只显示图标,点击时弹出tab页). 控件在界面左侧时,tab页

  • 使用vue开发移动端管理后台的注意事项

    独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台),还是有些经验不足,包括对产品的全局思考,对插件的选择等,都有考虑不周的缺点,导致自己中途想换图形界面插件,浪费了点时间,这里记录下,总结下经验,理一下思路. 1.对于项目的一些心得与体会 首先的一点,就是,对于图形界面框架的选型,这个很重要,对于一项目来说,开始动手前就要对项目的设计图有个完整的了解,以便于自己选择插件或者框架: 然后就是,对于交互性操作,比如:上传图片,预览图片啥的,应该选择是否是用图形界面框架来实现还是另选专门的

  • vue.js管理后台table组件封装的方法

    目录 问题分析 为什么封装 封装的内容都有哪些 封装table组件 确认数据格式 封装组件 封装全局组件 table组件封装 分页组件封装 数据定义 封装 总结 最近开了新的项目,简单说了自己的table封装. 问题分析 为什么封装 首先为什么封装,是因为追求技术吗,不,是因为懒,不想一直的去粘贴复制代码,所以就想把table封装下,可以在创建新的table的时候,只需要填充数据就行了. 封装的内容都有哪些 主要有两个,一个是table组件,一个是分页组件 搞清楚这个些,就可以开始封装组件了.

  • vue中如何实现后台管理系统的权限控制的方法步骤

    vue中如何实现后台管理系统的权限控制的方法步骤

    一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单中的页面是否能被访问 页面中的按钮(增.删.改)的权限控制是否显示 下面我们就看一看是如何实现这些个权限控制的. 二.接口访问的权限控制 接口权限就是对用户的校验.正常来说,在用户登录时服务器需要给前台返回一个Token,然后在以后前台每次调用接口时都需要带上这个Token, 然后服务端获取到这个Token后进行比对,如果通过则可以

  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项

  • vue项目接口管理,所有接口都在apis文件夹中统一管理操作

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理 本文使用vue-cli生成的项目举例 使用接口管理之前 在项目的某个具体组件中调接口,把调用接口的方法直接写在mounted中,或在是methods中 比如: xxx.vue <template> <div id="areaTree"> <!-- 标题 --> <div

  • 利用vue3+ts实现管理后台（增删改查）

    简单的管理后台基本上就是数据的增删改查.主要就是 列表 + form 表单.每个页面的逻辑基本上都相同.不同的地方就是每个页面需要调用的具体 API 及参数. 以前 vue2 的时候最简单的做法是写出来一个页面的逻辑,然后直接 copy 到各个页面中,修改 API 及参数即可.高级一点的是利用 mixin 函数,将可复用逻辑抽离,每个页面引入 mixin. vue3 之后新增了composition API.本文就是利用composition API,将可复用的逻辑抽离到composition

随机推荐