1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| import Vue from 'vue'
| import Clickoutside from 'element-ui/src/utils/clickoutside'
|
| // 自定义聚焦指令
| Vue.directive('focus', {
| inserted(el) {
| el.focus()
| },
| })
|
| // 自定义粘贴指令
| Vue.directive('paste', {
| bind(el, binding, vnode) {
| el.addEventListener('paste', function(event) {
| //这里直接监听元素的粘贴事件
| binding.value(event)
| })
| },
| })
|
| // 自定义拖拽指令
| Vue.directive('drag', {
| bind(el, binding, vnode) {
| // 因为拖拽还包括拖动时的经过事件，离开事件，和进入事件，放下事件，
| // 浏览器对于拖拽的默认事件的处理是打开拖进来的资源，
| // 所以要先对这三个事件进行默认事件的禁止
| el.addEventListener('dragenter', function(event) {
| event.stopPropagation()
| event.preventDefault()
| })
| el.addEventListener('dragover', function(event) {
| event.stopPropagation()
| event.preventDefault()
| })
| el.addEventListener('dragleave', function(event) {
| event.stopPropagation()
| event.preventDefault()
| })
| el.addEventListener('drop', function(event) {
| // 这里阻止默认事件，并绑定事件的对象，用来在组件上返回事件对象
| event.stopPropagation()
| event.preventDefault()
| binding.value(event)
| })
| },
| })
|
| // 点击其他地方隐藏指令
| Vue.directive('outside', Clickoutside)
|
|
