当前位置: 首页 > Web前端 > vue.js

vueangular实现拖拽自适应页面布局指令

时间:2023-03-31 21:28:19 vue.js

Vue定义与使用mian.js中注册自定义指令Vue.directive('nsresize',{inserted(el){letstartY=0;letdown=false;letprevEl;letnextEl;$(el).bind("mousedown",event=>{startY=event.pageY;down=true;prevEl=event.target.previousElementSibling;nextEl=event.target.nextElementSibling;});$(document).bind("鼠标弹起",()=>{startY=0;down=false;});$(document).bind("mousemove",event=>{if(down){lety=event.pageY-startY;startY=event.pageY;$(prevEl).height($(prevEl).height()+y);$(nextEl).height($(nextEl).height()-y);}});}});Vue.directive('ewresize',{inserted(el){letstartX=0;letdown=false;letprevEl;letnextEl;$(el).bind("mousedown",event=>{startX=event.pageX;down=true;prevEl=event.target.previousElementSibling;nextEl=event.target.nextElementSibling;});$(document).bind("mouseup",()=>{startX=0;down=false;});$(document).bind("mousemove",event=>{if(down){letx=event.pageX-startX;startX=event.pageX;lettemp=$(prevEl).width()+x;让px=temp+"px";$(prevEl).width(temp);$(nextEl).css("left",px);$(nextEl).css("padding-right",px);$(el).css("left",px);}});}});css定义.h-split{margin-bottom:-1px;光标:s-调整大小;padding-top:10px;}.v-split{padding-right:7px;背景颜色:透明;游标:ew-resize;位置:绝对;高度:100%;左:500px;顶部:150px;z-index:10;}组中使用

angular定义义与使用common。js定义指令.directive('nsresize',function(){return{link:函数(作用域,el,attrs,ngModel){varstartY=0;下变种=假;变种前;varnextEl;$(el).bind("mousedown",function(event){startY=event.pageY;down=true;prevEl=event.target.previousElementSibling;nextEl=event.target.nextElementSibling;});$(文档).bind("mouseup",function(event){startY=0;down=false;});$(document).bind("mousemove",function(event){if(down){vary=event.pageY-startY;startY=event.pageY;$(prevEl).height($(prevEl).height()+y);$(nextEl).height($(nextEl).height()-y);}});}}}).directive('ewresize',function(){return{restrict:'EA',scope:{cell:'@'},link:function(scope,el,attrs,ngModel){varstartX=0;vardown=false;varprevEl;varnextEl;$(el).bind("mousedown",function(event){startX=event.pageX;down=true;prevEl=event.target.previousElementSibling;nextEl=event.target.nextElementSibling;});$(document).bind("mouseup",function(event){startX=0;down=false;});$(document).bind("mousemove",function(event){如果(向下){varx=event.pageX-startX;startX=event.pageX;vartemp=$(prevEl).width()+x;varpx=temp+"px";$(prevEl).width(temp);$(nextEl).css("左",px);if(!scope.cell){$(nextEl).css("padding-right",px);}$(el).css("左",px);}});}}})css定义.h-split{margin-bottom:-1px;光标:s-调整大小;padding-top:10px;}.v-split{padding-right:7px;背景颜色:透明;游标:ew-resize;位置:绝对;高度:100%;左:500px;顶部:150px;z-index:10;}组件中使用