v-click-outside.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. export default {
  2. install(app) {
  3. app.directive('click-outside', {
  4. mounted(el, binding) {
  5. function documentHandler(e) {
  6. if (el.contains(e.target)) {
  7. return false
  8. }
  9. if (binding.value) {
  10. binding.value(e)
  11. }
  12. }
  13. el.__vueClickOutside__ = documentHandler
  14. if (binding.modifiers.click) {
  15. document.addEventListener('click', documentHandler, {
  16. capture: binding.modifiers.capture
  17. })
  18. }
  19. if (binding.modifiers.mousedown) {
  20. document.addEventListener('mousedown', documentHandler, {
  21. capture: binding.modifiers.capture
  22. })
  23. }
  24. if (binding.modifiers.touchstart) {
  25. document.addEventListener('touchstart', documentHandler, {
  26. capture: binding.modifiers.capture
  27. })
  28. }
  29. },
  30. unMounted(el, binding) {
  31. document.removeEventListener('click', el.__vueClickOutside__, {
  32. capture: binding.modifiers.capture
  33. })
  34. document.removeEventListener('mousedown', el.__vueClickOutside__, {
  35. capture: binding.modifiers.capture
  36. })
  37. document.removeEventListener('tarchstart', el.__vueClickOutside__, {
  38. capture: binding.modifiers.capture
  39. })
  40. delete el.__vueClickOutside__
  41. }
  42. })
  43. }
  44. }