资讯专栏INFORMATION COLUMN

vue自定义指令clickoutside扩展--多个元素的并集作为inside

ivan_qhz / 3370人阅读

摘要:指令中自定义的指令之一,顾名思义,就是当鼠标点击了指令所绑定元素的外部时,就会触发绑定方法。在鼠标放开触发事件处理时,通过获取到他们的对象。使用示例原来的使用方式不受影响,只是添加了多个元素并集作为的功能。指令中的参数学习

都是个人理解,如果发现错误,恳请大家批评指正,谢谢。还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅。

1.前言

产品使用vue+element作为前端框架。在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如要求选择器的弹出框中,增加搜索过滤(跟目前element的输入建议不太一样)。于是想说说之前修改element组件,并定制为业务组件过程中遇到的问题。

ps:因为对某些组件改动很大,所以是直接拷贝了一份源码,然后再进行修改,但是这样会遇到挺多问题,建议对于vue组件如果改动不大,只是简单功能扩展,就直接使用继承的方式修改。
2.clickoutside指令

element中自定义vue的指令之一,clickoutside顾名思义,就是当鼠标点击了指令所绑定元素的外部时,就会触发绑定方法。用途就以el-select为例,当选择器的下拉框展示时,监听鼠标点击事件,如果鼠标位置在整个选择器外部时,进行隐藏下拉框。

2.1使用方式

引入Clickoutside.js

import Clickoutside from "element-ui/src/utils/clickoutside"

声明指令使用

directives: { Clickoutside },

模板中正式使用

2.2实现介绍

简要说明下原理,首先vue自定义指令本身(不了解可以点击链接查看官网介绍)。主要就是利用vue指令的功能,获取所绑定元素的dom对象dom_A以及传递过来的回调方法fun_A,然后监听浏览器的mousedown和mouseup事件(mousedown作为辅助信息,真正触发传递的回调方法的是mouseup事件),当前事件中鼠标位置对应的dom对象dom_B不属于dom_A,则代表鼠标点击了dom_A外部,触发clickoutside回调方法。

2.3扩展介绍

理论上clickoutside只能也只需要绑定一个元素作为inside,但是一些特殊的原因(可能是代码不够好),要求clickoutside可以选定多个元素作为inside,当鼠标点击了这些元素所构成的inside的外部时,再触发事件。
结合下图,A与B两个元素作为一个inside,当鼠标点击在click1位置时,触发clickoutside,当鼠标点击click2或者click3位置时都不触发clickoutside。

2.3扩展实现

要实现上述功能,就必须获取到A和B的dom对象,然后在原先鼠标事件的监听的基础上,判断鼠标位置是否都不包含在A和B中,如果是的话再触发clickoutside。
实现方式为,在A和B的父级parent元素上绑定v-clickoutside:yourClassName="handleClickOutside",在A和B元素上添加同一个class样式,样式名称与指令冒号后面内容一致class="yourClassName"。主要在处理指令绑定时,通过binding.arg即可获取到A和B共有的class,存放在dom变量中。在鼠标放开触发事件处理时,通过class获取到他们的dom对象。

2.3.1使用示例

clickoutside原来的使用方式不受影响,只是添加了多个元素并集作为inside的功能。
引入改为自己修改后的clickoutside.js,声明不变,扩展功能在模板中的使用方式

Parent
A
B
2.3.2代码
// 引入Vue用以判断当前运行环境
import Vue from "vue"
// element封装的一些常用dom操作,这里on可以先当做是addEventListener的封装
import { on } from "element-ui/src/utils/dom"
// 所有绑定了clickoutside指令的元素的dom对象数组
const nodeList = []
// 用来做存放于dom对象中clickoutside相关参数对象的key
const ctx = "@@clickoutsideContext"

let startClick
let seed = 0
// 鼠标按下时,记录此时事件信息
!Vue.prototype.$isServer && on(document, "mousedown", e => (startClick = e))
// 鼠标松开时候,遍历绑定clickoutside的节点,进行判断是否在节点外部以触发回调
!Vue.prototype.$isServer && on(document, "mouseup", e => {
  nodeList.forEach(node => node[ctx].documentHandler(e, startClick))
})

// 是否在特殊限定范围内
function ifInExact (exactElms, target1, taget2) {
  for (let i = 0; i < exactElms.length; i++) {
    let elm = exactElms[i]
    if (elm.contains(target1) || elm.contains(taget2) || elm === target1) return true
  }
  return false
}

// 是否有特殊限定范围
function ifHasExact (el, exactArea) {
  if (!exactArea) return false
  return el.getElementsByClassName(exactArea)
}

function createDocumentHandler (el, binding, vnode) {
  return function (mouseup = {}, mousedown = {}) {
    if (!vnode ||
      !vnode.context ||
      !mouseup.target ||
      !mousedown.target ||
      (vnode.context.popperElm &&
        (vnode.context.popperElm.contains(mouseup.target) ||
          vnode.context.popperElm.contains(mousedown.target)))) return
    let exactElms = ifHasExact(el, el[ctx].exactArea)
    // 如果是有特殊限定范围的,则进行判断当前点击是否在 限定范围内
    if (exactElms) {
      if (ifInExact(exactElms, mouseup.target, mousedown.target)) {
        return
      }
    // 无特殊限定范围,则判断点击是否在默认的指令所在范围内
    } else if (el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target) {
      return
    }
    if (binding.expression &&
      el[ctx].methodName &&
      vnode.context[el[ctx].methodName]) {
      vnode.context[el[ctx].methodName]()
    } else {
      el[ctx].bindingFn && el[ctx].bindingFn()
    }
  }
}

export default {
  bind (el, binding, vnode) {
    nodeList.push(el)
    const id = seed++
    el[ctx] = {
      id,
      documentHandler: createDocumentHandler(el, binding, vnode),
      methodName: binding.expression,
      bindingFn: binding.value,
      // 特殊限定范围的class,限定范围为该class的所有元素的并集
      exactArea: binding.arg
    }
  },

  update (el, binding, vnode) {
    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode)
    el[ctx].methodName = binding.expression
    el[ctx].bindingFn = binding.value
    // 附加 真正起作用部分
    el[ctx].exactArea = binding.arg
  },

  unbind (el) {
    let len = nodeList.length

    for (let i = 0; i < len; i++) {
      if (nodeList[i][ctx].id === el[ctx].id) {
        nodeList.splice(i, 1)
        break
      }
    }
    delete el[ctx]
  }
}
3.最后

以上就是关于clickoutside的学习和扩展。

1.引用element的popup注意事项,如el-select-menu即el-select中的select-dropdown.vue。

2.使用cropperjs制作头像裁剪。浏览器读取本地图片并展示,仿微博头像排版,裁剪后上传服务器。

3.vue指令中的参数vnode学习

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94012.html

相关文章

  • Vue 定义指令实现点击元素外触发事件

    摘要:前置知识既然要用的自定义指令,那么肯定要了解一下自定义指令的相关知识啦,关于这部分的内容,看我之前写过的自定义指令或者直接看官方文档就可以啦,这里我就不再多讲了。 前言 最近搞了毕设,需要实现一个场景,点击一块区域,弹出一个编辑区域,点击页面的其他地方的时候,这个编辑区域就隐藏,本想想之前写模态框一样写个方法的时候,突然showImg(https://segmentfault.com/...

    Youngs 评论0 收藏0
  • Vue.js 定义指令使用场景及案例

    摘要:使用场景代码复用和抽象的主要形式是组件当需要对普通元素进行底层操作,此时就会用到自定义指令但是,对于大幅度的变动,还是应该使用组件钩子函数详情查阅文档示例输入框自动聚焦注册一个全局自定义指令当被绑定的元素插入到中时聚焦元素下拉菜单点击 1. 使用场景 代码复用和抽象的主要形式是组件 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令 但是,对于大幅度的 DOM 变动,...

    chanjarster 评论0 收藏0
  • JavaScript30秒, 从入门到放弃之Array(六)

    摘要:从数组索引为开始删除元素,直到对数组元素运用指定方法为为止。对两个数组的元素分别调用指定方法后,返回以运行结果为判定基准的并集,并集是原始数组元素的并集而不是运行结果的并集。 原文地址:JavaScript30秒, 从入门到放弃之Array(六)博客地址:JavaScript30秒, 从入门到放弃之Array(六) 水平有限,欢迎批评指正 tail Returns all elem...

    Freeman 评论0 收藏0
  • Redis基础:基本介绍、redis的应用场景、五种数据类型、持久化操作、主从模式

    摘要:区别的是会周期性的把更新的数据写入磁盘或者把修改操作写入追加的记录文件,并且在此基础上实现了主从同步。存盘可以有意无意的对数据进行写操作。二的应用场景缓存常常作为数据缓存。如果只用类型,就可以被看作加上持久化特性的。 一、Redis基本概念介绍和特性 1.1 Redis基本概念介绍     showImg(https://segmentfault.com/img/bVWpvd?w=50...

    QLQ 评论0 收藏0

发表评论

0条评论

ivan_qhz

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<