欢迎访问优讯网!
您当前的位置:首页 > 爱编程

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

时间:2020-03-05 09:16:22  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要介绍了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%,鼠标光标也相应设置一下:

1
2
3
4
5
6
7
8
9
10
11
.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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>

它对应的把手代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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管理后台之鼠标拖放改变窗口大小 的文章就介绍到这了

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/article/181935.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
    无相关信息
栏目更新
栏目热门