老师，自定义指令里面需要改组件里面的值有什么方法吗
来源：5-3 开发实现 Vue 中的自定义指令（1）
目訫
2021-01-21
老师您好，我在听完您的课之后，自己想实现一个复制的自定义指令，但是我有一个想法，就是在复制成功后可以弹出提示框提示用户“复制成功”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Directives</title>
<script src="./VUE//vue.global.js"></script>
</head>
<body>
<div id="el"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: '',
result: {
text: '',
callback: this.changeMessage
}
}
},
methods: {
changeMessage(text) {
this.message = text
}
},
template: `
<div>
<input v-model.lazy="result.text" />
<button v-copy="result">Copy</button>
<div>{{ message }}</div>
</div>
`
})
// v-copy：复制文本
app.directive('copy', {
mounted(el, binding, vnode) {
el.$value = binding.value.text
el.handler = () => {
let textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = el.$value;
textarea.select(); // 选中文本
document.execCommand('Copy'); // 执行浏览器复制命令
document.body.removeChild(textarea);
binding.value.callback('复制成功');
}
el.addEventListener('click', el.handler)
},
updated(el, binding) {
el.$value = binding.value.text
},
unmounted(el, binding) {
el.removeEventListener('click', el.handler)
}
})
const vm = app.mount('#el')
</script>
</html>
现在是这么实现的，通过传入回调实现提示用户“复制成功”
result: {
text: '',
callback: this.changeMessage
}
请问老师有没有更优雅的方法实现这个功能
写回答
1回答
-
目前看，指令里还要改数据，只能回调了
10
相似问题