vue 修改div宽度_vue 拖动调整左右两侧div的宽度
原文是左中右三种情况的拖动。由于项目需要,我删除掉了右边的,直接左右区域拖动调整div宽度
1、拖动,调整左右两侧宽度
- 西瓜
- 备注2
- 西瓜
- 备注2
export default {
name: 'Dashboard',
mounted () {
this.dragControllerDiv();
},
methods: {
dragControllerDiv: function () {
var resize = document.getElementsByClassName('resize');
var left = document.getElementsByClassName('left');
var mid = document.getElementsByClassName('mid');
var box = document.getElementsByClassName('box');
for (let i = 0; i < resize.length; i++) {
// 鼠标按下事件
resize[i].onmousedown = function (e) {
var startX = e.clientX;
resize[i].left = resize[i].offsetLeft;
// 鼠标拖动事件
document.onmousemove = function (e) {
var endX = e.clientX;
var moveLen = resize[i].left + (endX - startX); // (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
if (moveLen < 150) moveLen = 150; // 左边区域的最小宽度为150px
if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
resize[i].style.left = moveLen; // 设置左侧区域的宽度
for (let j = 0; j < left.length; j++) {
left[j].style.width = moveLen + 'px';
mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
}
}
// 鼠标松开事件
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
}
resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
}
}
}
}
}
ul,li{
list-style: none;
display: block;
margin:0;
padding:0;
}
.box{
width:100%;
height: 48%;
margin: 1% 0px;
overflow:hidden;
}
.left{
width:calc(30% - 10px);
height:100%;
background:#c9c9c9;
float:left;
}
.resize{
width:5px;
height:100%;
cursor: w-resize;
float:left;
}
.mid{
float:left;
width:70%;
height:100%;
background:#f3f3f3;
}
vue 修改div宽度_vue 拖动调整左右两侧div的宽度相关推荐
- vue的边距怎么设置_vue 拖动调整左右两侧div的宽度
原文是左中右三种情况的拖动.由于项目需要,我删除掉了右边的,直接左右区域拖动调整div宽度 1.拖动,调整左右两侧宽度 西瓜 备注2 西瓜 备注2 export default { name: 'Da ...
- vue中实现拖动调整左右两侧div的宽度
最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样 一.HTML代码 <template><div class="box" ...
- vue修改数据连接数据库_vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法 因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
- vue 修改模板{{}}标签_vue.js - Vue单文件的template标签
问 题 单文件中用template标签包含html模板内容,但我现在要用一个template标签+v-for来包含多个元素,此时webpack编译时报错了. 下面是vue文件部分内容: {{ bran ...
- fr4走线宽度_如何调整PCB中走线宽度的大小
铜是一种具有高熔点的强导体,但您仍应尽力保持低温.在这里,您需要适当调整走线宽度的大小,以将温度保持在一定范围内.但是,这是您需要考虑给定走线中流动的电流的地方.当使用电源轨,高压组件以及电路板的其他 ...
- vue修改计算属性的值_Vue语法高级之计算属性和侦听器
计算属性和侦听器都可以监听到data区数据的变化,当数据变化时可以触发方法的调用,从而在方法内部可以进行相应的逻辑处理. 计算属性的语法格式是:computed: {} 侦听器的语法格式是:watch ...
- vue多选框点击其中一个控制div隐藏_Vue 零碎知识点
一.指令 1.1.v-once: 通过使用v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上的其它数据绑定: <span v-once> ...
- 拖动 html表格单元格宽度,jQuery实现拖动调整表格单元格大小的代码实例
jQuery实现的拖动调整表格td单元格的大小: 在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小. 也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功 ...
最新文章
- 《新程序员003》正式上市!华为、阿里等 30+ 公司的云原生及数字化实战经验...
- mysql - AB复制
- Vue中添加新的路由并访问
- 基于Centos7构建Kubernetes平台
- 关于FI凭证的字段状态
- redis插件连接集群 shiro_Shiro经过Redis管理会话实现集群(转载)
- windows传真和扫描由于不能访问您的文档_扫描识别工具Dynamic Web TWAIN全年最低价来了!错过再等一年...
- 用gson得JSON,数值变为double类型 ,去掉double值中的小数位(3.0改为3)
- BUAA 436 孟竹的复习计划(二维树状数组)
- 如何修改默认浏览器_iPhone可以修改默认浏览器了
- IT职场人生系列之四:怎样写简历
- php获取客户端信息(浏览器/IP/操作系统)代码
- access mysql 升迁_随说秋色园从Access升迁到MSSQL过程
- 简单的Swagger生产环境中屏蔽
- Oracle loap函数,oracle分区表执行计划
- 用python制作动态二维码_用Python制作动态二维码
- 抽象类和接口的区别(之二)
- 投票动态代理proxy案例(java)
- 关于 Android O 的 treble/hidl
- python requests post 二进制流_Python的requests如何同时post图片二进制流和json数据application/octet-stream...