思路：
- 使用浏览器自带的execCommand使用Copy，但此方法只能是被选中的值才能进行复制粘贴
- 动态创建一个文本域，将拿到的文字放在文本域中，然后自动选中，再调用浏览器方法即可
- 为了方便我们操作同一个方法或者value值，可以将一些方法或者属性绑定在el上
提示：想要选中文本框的内容，有如下两个方法可以
方法一：通过聚焦 然后设置光标的方法
textarea.focus()
textarea.setSelectionRange(0, textarea.value.length)
方法二：通过输入框的select方法 选中全部即可
textarea.select()
全部代码代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue自定义指令复制</title>
<!-- 引入VUE -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<p v-copy:foo="message + '今天去环球影城扮演威震天' + current">
<a href="javascript:;" @click="current++;">点击复制A{{current}}</a>
</p>
<p v-copy:foo="message + '我是为中华崛起而读书的抗日分子'">
点击复制B
</p>
<input v-focus type="text" placeholder="自定义聚焦指令">
</div>
<script>
window.onload = function() {
var app = new Vue({
el: '#app',
data() {
return {
current: 0,
message: '大家好！'
}
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
},
copy: {
bind: (el, binding, vnode) => {
el.$text = binding.value //防止内容没有更新情况下第一次点击弹窗
el.handel = () => {
if(!el.$text) {
alert('无复制的内容')
}
const textarea = document.createElement('textarea')
textarea.readOnly = 'readonly'
textarea.style.position = 'absolute'
textarea.style.left = '-9999px'
textarea.value = el.$text
document.body.appendChild(textarea)
// 被选中即可 方法一
textarea.focus()
textarea.setSelectionRange(0, textarea.value.length)
//方法二 textarea.select() //选中所有
const result = document.execCommand('Copy') //只有被选中的时候才能进行粘贴
if(result) {
console.warn(`复制成功: ${el.$text}`)
}
document.body.removeChild(textarea)
}
el.addEventListener('click', el.handel)
},
inserted: (el, binding, vnode) => {
console.log('2')
},
update: (el, {value}) => {
console.log('3')
},
componentUpdated:(el, { value }) => {
console.log('4')
el.$text = value
},
unbind: (el) => {
el.removeEventListener('click', el.handel)
}
}
}
})
}
</script>
</body>
</html>
