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


Posted in Javascript onMarch 04, 2020

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

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

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

先看效果:

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

布局原理

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

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

细实线描述的是各个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 鼠标拖放改变窗口大小 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 #Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 #Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 #Javascript
jquery实现垂直手风琴菜单
Mar 04 #jQuery
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 #Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 #Javascript
js回调函数原理与用法案例分析
Mar 04 #Javascript
You might like
php 获取页面中指定内容的实现类
2014/01/23 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
利用Python破解斗地主残局详解
2017/06/30 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
在python 中实现运行多条shell命令
2019/01/07 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
J2EE面试题大全
2016/08/06 面试题
《我的信念》教学反思
2014/02/15 职场文书
团委竞选演讲稿
2014/04/24 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
社团活动总结书
2014/06/27 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书