vue directive 上下文问题

2020-05-23 19:36:02 +08:00
 faceRollingKB
我需要写一个 directive,directive 绑定的值是 data 中的一个状态,bind 只能获取到状态的初始值,update 只能获取到状态的更新值,我在 bind 中给 el 添加了一个点击事件,现在的问题是这个事件只能获取到初始值,我想问一下是否有办法在事件中获取到 directive 的最新值?
已经尝试过如下代码:
export default function(Vue) {
Vue.directive('copy', {
value: '-',
listener: null,
bind (el, binding) {
const fn = function(){
copyToClipboard(this.value)
}
binding.def.listener = fn.bind(binding.def)
binding.def.value = binding.value
el.addEventListener('click',binding.def.listener)
},
unbind (el, binding) {
el.removeEventListener('click',binding.def.listener)
},
update(el, binding){
binding.def.value = binding.value
}
})
}
但这段代码问题是所有的 directive 实例都会共享同一个 binding.def ,我看了文档并没有发现 directive 有上下文的概念,不知道应该怎么搞
2136 次点击
所在节点    Vue.js
3 条回复
doommm
2020-05-24 12:35:42 +08:00
下面这么写似乎是可以的,不知道有没有更好的办法

```
<template>
<div>
<div v-copy="text">
{{ text }}
</div>

<input type="text" v-model="text" />
</div>
</template>

<script>
export default {
name: 'LabelSmall',
directives: {
copy: {
bind(el, binding) {
const copy = {};
Reflect.defineProperty(el, '__copy__', { value: copy });

copy.value = binding.value;
const fn = () => {
console.log('val', copy.value);
};
copy.cb = fn;

el.addEventListener('click', fn);
},

componentUpdated(el, binding) {
const copy = Reflect.get(el, '__copy__');
copy.value = binding.value;
},

unbind(el, binding) {
const copy = Reflect.get(el, '__copy__');
el.removeEventListener('click', copy.cb);

Reflect.deleteProperty(el, '__copy__');
},
},
},
data() {
return {
text: 'small',
};
},
};
</script>
```
faceRollingKB
2020-05-24 14:13:17 +08:00
@doommm 也就是说可以使用 el 来实现 directive 实例的上下文概念,把所有上下文内容绑定到 el 的 property 上,我先试试看
faceRollingKB
2020-05-24 16:46:41 +08:00
@doommm 可行的

export default function(Vue) {
const key = 'copy'
const property = '__v_'+key+'__'
Vue.directive(key, {
bind (el, binding) {
el[property]={
value:binding.value,
listener:function(){
copyToClipboard(this.value)
}
}
el[property].listener = el[property].listener.bind(el[property])
el.addEventListener('click',el[property].listener)
},
unbind (el) {
el.removeEventListener('click',el[property].listener)
},
update(el, binding){
el[property].value = binding.value
}
})
}

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/674746

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX