vue实现一个指令用于鼠标点击一下就将内容复制到剪切板

Vue.directive('copy', {
	bind: function(el, binding, vnode) {
		el.onclick = function(){
			// 兼容v-copy="copyText"与v-copy="{content: copyText, tip: '复制成功后提示给用户的message'}"
			const content = binding.value.content || binding.value
			const input = document.createElement('input')
			// 这里的input元素不可见参考了Element框架的写法
			input.style.position = 'absolute'
			input.style.top = '-9999px'
			input.value = content
			// 将内容选中之后才可以调用js的copy复制进去，所以需要用到input标签，用完记得销毁
			document.body.appendChild(input)
			input.select()
			// execCommand MDN说明即将废弃，就算废弃了也依然可以使用很长一段时间，而且会有更好的API代替。
			document.execCommand('copy')
			input.parentNode.removeChild(input)
			// 这里提示消息放到业务组件里可能更好，因为有些时候他可能不需要提示消息。
			const tip = binding.vaule.tip || '已复制链接到剪贴板'
			vnode.context.$message.success(tip)
		}
	}
})