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)
		}
	}
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vgbire

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值