vue |
您所在的位置：网站首页 › 触发点击事件改变元素的宽度 › vue |
vue
|
最近在看企业微信时，发现tapd的需求部分，分为左右两部分，左侧可以实现拖拽改变宽度。 vue——自定义指令，实现拖拽改变元素的宽度 效果图1.在`utils`里面添加`drag.js`2.在`main.js`里面引入并注册3.在页面上使用`v-drag`1、注册全局自定义指令2、注册局部自定义指令3、指令定义对象的钩子函数 效果图
上面的效果可以通过vue指令的形式来实现： 直接上代码： 1.在utils里面添加drag.js /** *拖拽改变宽度的指令 */ export default { install(Vue){ Vue.mixin({ directives:{ drag:{ inserted:function(el){ const dragDom = el; dragDom.style.cursor="e-resize"; dragDom.onmousedown = e=>{ //鼠标按下，计算当前元素距离可视区的距离 const disX = e.clientX; const w = dragDom.clientWidth; const minW = 240; const maxW = 600; var nw; document.onmousemove = function(e){ //通过事件委托，计算移动的距离 const l = e.clientX - disX; //改变当前元素宽度，不可超过最小最大值 nw = w + l; nw = nw maxW?maxW:nw; dragDom.style.width = `{nw}px`; } document.onmouseup = function(e){ document.onmousemove = null; document.onmouseup = null; } } } } } }) } } 2.在main.js里面引入并注册 import drag from './utils/drag.js' Vue.use(drag); 3.在页面上使用v-drag完成！！！多多积累，多多收获！！！ 下面补充一下自定义指令的内容： 1、注册全局自定义指令通过Vue.directive(id,definition)方法可以注册一个全局自定义指令，该方法可以接收两个参数：指令ID和定义对象。指令ID是指令的唯一标识，定义对象是定义的指令的钩子函数 2、注册局部自定义指令通过Vue实例中的directive选项可以注册一个局部自定义指令。 3、指令定义对象的钩子函数在注册指令的时候，可以传入definition定义对象，对指令赋予一些特殊的功能，一个指令定义对象可以提供的钩子函数如下表： 钩子函数说明bind只能调用一次，在指令第一次绑定到元素上时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化设置inserted被绑定元素插入父元素时调用update指令在bind之后立即以初始值为参数进行第一次调用，之后每次当绑定值发生变化之后时调用，接收的参数为新值和旧值componentUpdated指令所在组件及其子组件更新时调用unbind只调用一次，指令从元素上解绑时调用 属性说明name指令名，不包括v-前缀value指令的绑定值，例如：v-my-directive=“1+1”,value的值是2oldValue指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用expression绑定值的表达式或变量名，例如：v-my-directive=“1+1”,expression的值是"1+1"arg传给指令的参数，例如：v-my-directive:foo，arg的值是“foo”modifiers一个包含修饰符的的对象，例如：v-my-directive:foo.bar,修饰符对象modifiers的值是 {foo:true,bar:true} |
感觉这样的实现效果比较好，再联想到之前写绩效结构时，也是同样的左右布局。 
如果能实现同样的效果，则算是很好一种体验。【本文地址】
今日新闻 |
推荐新闻 |