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 相关文章推荐
JavaScript基本编码模式小结
May 23 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
JavaScript数组复制详解
Feb 02 Javascript
js实现自定义进度条效果
Mar 15 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
使用refresh_token实现无感刷新页面
Apr 26 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的单引号和双引号 字符串效率
2009/05/27 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
学籍证明模板
2015/06/18 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
在Docker容器中部署SQL Server
2022/04/11 Servers