自定义指令
V_AYA_V
且就洞庭赊月色,将船买酒白云边
展开
-
vue自定义指令实现图片懒加载
在vue项目开发过程中,为了优化体验经常会有给图片添加懒加载的功能。vue给我们提供了自定义指令,通过自定义指令,我们可以方便快捷的实现改需求。什么是vue自定义指令?具体见vue官方文档——vue自定义指令封装自定义指令你需要知道:指令的定义,需要用到Vue.directive方法(以注册一个v-focus为例):// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: f.原创 2020-06-18 14:09:42 · 534 阅读 · 0 评论 -
vue实现监听元素尺寸变化自定义指令
在某些业务场景中,我们需要监听元素的尺寸变化处理一些逻辑问题。但是没有像window的resize方法一样的方法直接能够监听到DOM尺寸的变化,所以只能采用曲线救国的方式。实现思想动态创建 Object标签,追加到容器中,宽高继承容器100%;load完成后获取 Object中的contentDocument,通过defaultView添加resize事件监听;实现过程实现domResize.jsconst domResize = { bind(el, binding) { .原创 2021-05-21 10:01:54 · 1146 阅读 · 0 评论 -
vue自定义指令实现点击元素以外区域隐藏当前元素
经常接到这样的需求,自己实现一个弹窗,点击弹窗以外地方隐藏当前弹窗,抽空安排一下vue自定义指令。实现思想监听点击事件判断点击事件target会否为当前dom主意取消监听事件实现过程实现clickoutside .jsconst clickoutside = { bind(el, binding) { const documentHandler = (e) => { if (el.contains(e.target)) return false .原创 2021-06-18 13:30:29 · 988 阅读 · 3 评论