Vue实现拖拽式分割布局
本文实例为大家分享了Vue实现拖拽式分割布局的具体代码，供大家参考，具体内容如下
示例展示
代码
特地写了一个demo代码，可以直接复制下来运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div class='container' id='container'>
<div id='top' class='top'>top</div>
<div id='bar' class='bar'></div>
<div id='bottom' class='bottom'>bottom</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
},
mounted(){
this.dragChangeHeight('bar','top')
},
methods:{
dragChangeHeight(drag, panel) {
var dragEl = document.getElementById(drag)
var panelEl = document.getElementById(panel)
dragEl.onmousedown = function(ev) {
var disH = panelEl.offsetHeight
var disY = ev.clientY
var disT = panelEl.offsetTop
var b = ''
document.onmousemove = function(ev) {
panelEl.style.height = disH + (ev.clientY - disY) + 'px'
// panelEl.style.top = disL - (ev.clientY - disY) + 'px'
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null
}
return false
}
},
dragChangeWidth(drag, panel) {
var dragEl = document.getElementById(drag)
var panelEl = document.getElementById(panel)
dragEl.onmousedown = function(ev) {
var disW = panelEl.offsetWidth
var disX = ev.clientX
var disL = panelEl.offsetLeft
var b = ''
document.onmousemove = function(ev) {
panelEl.style.width = disW + (ev.clientX - disX) + 'px'
// panelEl.style.left = disL - (ev.clientX - disX) + 'px'
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null
}
return false
}
},
}
})
</script>
<style>
body{
margin: 0;
}
.container{
/* padding: 20px; */
height: 90vh;
width: 90vw;
display: flex;
flex-direction: column;
}
.top{
width: 100%;
height: 300px;
background-color: blue;
}
.bar{
width: 100%;
height: 10px;
cursor: n-resize;
background-color: black;
}
.bottom{
width: 100%;
flex: auto;
background-color: red;
}
</style>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue3 可拖动的左右面板分割组件实现
目录 分解组件 左侧面板 右侧面板 入参分解 props slots 具体实现 如何拖动呢? 事件监听 宽度处理 优化 bug git地址 最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,本文就整理一下,分享给大家,具体如下: 效果图 分解组件 整体使用flex布局 左侧面板 面板的具体内容通过slot具名插槽传入. title通过prop传入 可拖动,为了保证内容样式不会被拖动所破坏,对面板的宽度设定最大值/最小值 右侧面板 右侧面板宽度随着左侧面板的宽度变化而
-
vue实现多栏布局拖拽
本文实例为大家分享了vue实现多栏布局拖拽的具体代码,供大家参考,具体内容如下 一.目标 vue 实现多个盒子(用户根据实际场景决定盒子数量)自由拖拽,改变宽度. 二.应用场景 可自由拖动宽度的多栏布局. 最典型的案例:编辑器(eg:vscode,idea等) 三.组件设计 由于该组件盒子数量不确定,所以我们设计组件时参考了Vuetify中的Form和FormItem的设计.即:外层大盒子处理分发的拖拽事件,里层的盒子负责展示各个Item的内容. 组件设计实现目标: <drag-box styl
-
vue代码分割的实现(codesplit)
在vue单页应用中,若不做任何处理,所有vue文件会打包为一个文件,这个文件非常的大,造成网页在首次进入时比较缓慢.做了代码分割后,会将代码分离到不同的bundle中,然后进行按需加载这些文件,能够提高页面首次进入的速度,网站性能也能够得到提升. 一.未分割时浏览器加载js的情况 可以看到,只有一个app.js,大小为595kb,若在实际的大型项目中,这个大小会更大 二.做了代码分割后浏览器加载js情况 发现多了一个js文件,且app.js大小也变小了,下面看看点击到其他页面时加载情况 点到其他
-
vuex Module将 store 分割成模块的操作
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块--从上至下进行同样方式的分割: const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, gette
-
Vue3.0利用vue-grid-layout插件实现拖拽布局
目录 1.插件 2.插曲 3.实现 4.校验函数 1.插件 首先,我们选择的插件是vue-grid-layout npm i vue-grid-layout --save 官网:https://jbaysolutions.github.... 2.插曲 安装完依赖,发现项目能启动起来,按照官网demo发现页面空白,控制台提示没有找到子组件 改变思路,不使用局部引入组件,使用全局引入组件. 3.实现 const layout = ref<LayoutItem[]>([ { x: 0, y: 0,
-
Vue实现拖拽式分割布局
本文实例为大家分享了Vue实现拖拽式分割布局的具体代码,供大家参考,具体内容如下 示例展示 代码 特地写了一个demo代码,可以直接复制下来运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
-
vue实现拖拽滑动分割面板
本文实例为大家分享了vue实现拖拽滑动分割面板的具体代码,供大家参考,具体内容如下 需求背景 左边是列表,右边是详情. 想更大范围的查看详情,所以要拖拽滑块,进行面板的分割 整体思路 在布局上,采用flex布局,单位采用百分比.设置flex:1,让其自动伸缩 滑动滑块,计算滑块在滑动过程中,占整个页面的百分比 将百分比,通过动态样式赋值给列表页的宽度 同时改变滑块的位置(也是百分比形式) 其次就是在vue里对鼠标事件的使用 代码实现 在template里 写事件 @mousedown.preve
-
vue实现移动端可拖拽式icon图标
本文实例为大家分享了vue实现移动端可拖拽式icon图标的具体代码,供大家参考,具体内容如下 需求描述:在移动端页面悬浮一个可随便拖拽的图标,类似于苹果手机的辅助触控小圆点,并且可随意拖动. 预览: 组件代码如下: <template> <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':to
-
vue 实现拖拽动态生成组件的需求
产品需求 开完产品需求会议,遇到了一个需求,首先页面分成两栏布局,左侧展示数据组件,支持拖拽排序,点击按钮清除组件.右侧支持将组件的缩略图拖拽至左侧生成一个新的组件. 思路 对于动态生成组件来说每一次都要是生成全新的一个组件,那么就可以把 组件放进函数当中 return.在JSX中调用函数,每次调用函数都会返回一个全新的组件.这对React来说非常简单,但是对于Vue来说,直接将组件返回是不可能的.尽管这个 return 写法不适合Vue,但是我们不可否认,思路是非常正确的,所以我们应该考虑一个
-
vue实现拖拽或点击上传图片
本文实例为大家分享了vue实现拖拽或点击上传图片的具体代码,供大家参考,具体内容如下 一.预览图 二.实现 点击上传思路:将input的type设置为"file"类型即可上传文件.隐藏该input框,同时点击按钮时,调取该input的点击上传功能.剩下的就是css优化页面了. 拖拽上传思路:通过给拖拽框dropbox绑定拖拽事件,当组件销毁时解绑事件.在拖拽结束,通过event.dataTransfer.files获取上传的文件信息.然后在对文件进行上传服务器操作. 接下来请允许我简单
-
Vue实现拖拽穿梭框功能四种方式实例详解
目录 一.使用原生js实现拖拽 二.VUe使用js实现拖拽穿梭框 三.Vue 拖拽组件 vuedraggable 四.Awe-dnd指令封装 一.使用原生js实现拖拽 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue;
-
原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方js库和插件 3.多图形绘制(支持画笔.线条.箭头.三角形.矩形.平行四边形.梯形以及多边形和圆形绘制) 4.拖拽式绘制(鼠标移动过程中不断进行canvas重绘) 5.图片绘制(作为背景图片时重绘会发生闪烁现象,暂时有点问题,后面继续完善) 5.清空绘制功能 6.新版本优化绘制性能(使用共享坐标变量数
-
vue实现拖拽的简单案例 不超出可视区域
本文实例为大家分享了vue实现拖拽x效果的具体代码,供大家参考,具体内容如下 实现拖拽之前,先了解几个小常识: 这两种获取鼠标坐标的方法,区别在于基于的对象不同: pageX和pageY获取的是鼠标指针距离文档(HTML)的左上角距离,不会随着滚动条滚动而改变: clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离,会随着滚动条滚动而改变: 1.clientX : 是用来获取鼠标点击的位置距离 当前窗口 左边的距离 2.clientY: 是用来获取鼠标点
-
基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: <div id="box"> 位置 <br>x:{{val.x}} <br>y:{{val.y}} <div v-drag="greet" id="drag" :style="style"> //注意这里要通过指令绑定函数将当前元素的位置数据传出来 </div> &l
-
Vue.Draggable拖拽功能的配置使用方法
本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下 使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedraggable' 注册组件 components:{ draggable } vue的template代码如 <draggable v-model="itemlis" //开始移动方法 :move=