快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → vue实现拖拽边框改变元素宽度

vue实现拖拽边框改变元素宽度

时间:2022-10-10 17:05:14人气:作者:快盘下载我要评论

效果;
vue实现拖拽边框改变元素宽度

代码如下;
html

<div class=;content-box;>
	<el-input v-model=;content; ref=;input;  type=;textarea; :rows=;10;></el-input>
	<div class=;bar; ;Mouse+down=;down($event); ref=;bar; >=</div>
	<div class=;res;></div>
</div>

建立一个父子节点;父级元素必须是定位元素;设置样式如下

注意;offsetLeft代表距离当前元素最近的定位元素左边缘的距离。如果父辈元素中没有定位元素;那么就返回相对于body左边缘距离。如果没有设置position;元素找不到offsetLeft属性

style:

.content-box{
    display: flex;
    position: relative;/*必须*/
    .el-textarea{
        min-width: 20%/*设置宽度范围*/
        max-width: 80%
    }
    .res{
        flex-grow: 1;
        border: 1px solid #dedede;
    }
    .bar{
        cursor: col-resize;
        width: 10px;
        display: inline-block;
        line-height: 200px;
        vertical-align: middle;
        border: 1px solid #dedede;
    }
}

核心;
setCaptrue;设置鼠标捕获(之后的事件捕获会作用在当前元素上)
releaseCaptrue释放鼠标捕获
js;

down(e){
	console.log(e);
	const startX=e.clientX;
	const offsetX=e.target.offsetLeft;//元素左边到窗口左边的距离
	e.target.setCaptrue;//设置鼠标捕获(之后的事件捕获会作用在当前元素上)
    document.onmousemove=(e)=>{
		const endX=e.clientX;
		const width=offsetX-(startX-endX);
		if(width>200) this.$refs.input.$el.style.width=width;;px;;
    }
     document.onmouseup=(e)=>{
       	document.onmousemove=null;
        document.onmouseup=null;
        e.target.releaseCaptrue;//释放鼠标捕获
     }
}

关于定位元素;

  • 就是元素的position属性值为;fixed;absolute;relative三其者之一;则为定位元素。
  • static的元素为常规流元素。网页布局中;元素的排列方式一般三种;常规流;浮动;定位

相关文章

  • Vue3---Pinia-状态管理(环境搭建安装及各属性使用教程)详细使用教程

    Vue3---Pinia-状态管理(环境搭建安装及各属性使用教程)详细使用教程,vue3 状态管理工具 pinia 使用,Vue3状态管理之Pinia的入门使用教程,Pinia使用详解(vue3默认状态管理),详解Vue3状态管理库Pinia的使用方法,Vue3 使用Pinia状态管理,vue3新一代状态管理器 — pinia的学习与使用,vue3使用pinia管理状态,vue3全家桶之-状态管理器pinia的使用,Vue3中Pinia的基本使用,上手Vue 新的状态管理 Pinia,一篇文章就够了,Pi...
  • vscode无法识别vue文件的问题

    vscode无法识别vue文件的问题,vscode无法识别vue文件的问题...

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。