vue动态设置div宽度,vue实现元素拖拽
本文主要介绍了某视频剪辑软件中的可拖拽宽度差异的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
主要思路
在需要拖拽宽度的区域设置一个div，高度设为100%,宽度尽量窄一些（也不要太窄，3~6px左右)在此差异上绑定当"鼠标按下"时，触发文件绑定"鼠标移动"方法和鼠标抬起方法通过鼠标移动方法不断获取当前鼠标位置，设置需要变化大小差异的宽高。鼠标抬起时取消鼠标移动方法和鼠标抬起方法的绑定模板。
div class=容器id=内容框
div class=tab 左侧制表符/格
菜单 ref=菜单
左侧菜单
menu-resize ref= menu resize /div
/div
div class=内容
中心区域
歌剧
div class= opera-resize ref= opera resize /div
操作区域
/div
/div
/div
/模板
脚本
导出默认值{
名称：" dropWidth "，
已安装(){
这个. nextTick(()={
这个。dropsize()；
})
},
方法：{
dropSize() {
让那个=这个，
menuWidth=200，
操作高度=200
这个参考文献。菜单大小。onmousedown=function(){
文档。onmousemove=function(e){
设clientX=e.clientX
//最大宽度
if(clientX=330){
clientX=330
}
//最小宽度
if(clientX=230){
clientX=230
}
//TODO这里减的是最左侧标签的宽度
菜单宽度=clientX-30；
那个参考文献。菜单。风格。width=clientX-30 px ；
}
document.onmouseup=function () {
console.log(当前宽度，菜单宽度)；
document.onmousemove=null
document.onmouseup=null
那个。释放捕捉那个。释放捕获()
}
}
这个参考文献。opera调整大小。onmousedown=function(){
文档。onmousemove=function(e){
让客户=e .客户
console.log(客户端)
//最大宽度
if(clientY=100){
客户数=100;
}
//最小宽度
if(clientY=300){
客户=300;
}
运营高度=客户
//TODO这里需要取反向
那个参考文献。歌剧。风格。高度=400-clientY px ；
}
document.onmouseup=function () {
console.log(当前宽度、歌剧高度)；
document.onmousemove=null
document.onmouseup=null
那个。释放捕捉那个。释放捕获()
}
}
}
}
}
/脚本
样式范围。容器{
宽度：1000像素
高度：400像素
边框：2px固体# dddddd
显示器：flex
对齐-内容：居中；
}。选项卡{
宽度：30px
身高：100%;
背景色：# EC8C32
伸缩：0;
灵活增长：0;
}。菜单{
宽度：200像素
背景色：# AAB6E0
伸缩：0;
灵活增长：0;
位置：相对；
}。内容{
宽度：100%;
位置：相对；
}。歌剧{
宽度：100%;
高度：200像素
位置：绝对；
底部：0;
背景色：# F2BE25
}。菜单-调整大小{
宽度：5px
身高：100%;
位置：绝对；
top:0；
右：0;
光标：列-调整大小；
}。歌剧-调整大小{
宽度：100%;
高度：5px
位置：绝对；
top:0；
左：0;
光标：行-调整大小；
}
/风格
实现效果
到此这篇关于某视频剪辑软件中的可拖拽宽度差异的实现示例的文章就介绍到这了，更多相关某视频剪辑软件可拖拽宽度差异内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。