vue 复制自定义内容

copyText(){
	// 复制单行信息创建input,设置value值
	const input = document.createElement('input');
	document.body.appendChild(input);
    const value = '企业全称:北京xxxxxxx公司'
	input.setAttribute('value',value)
	input.select();
    if (document.execCommand('copy')) {
		document.execCommand('copy')
		this.$message({
			message:'复制成功!',
			type:'success',
		})
		// 复制成功后删除创建到页面的元素
		setTimeout(()=>{
			document.body.removeChild('input')
		},2000)
	}

	// 换行需要创建textarea,设置innerHTML的值
	const input = document.createElement('textarea');
	document.body.appendChild(input);
	input.innerHTML=  '企业全称:xxxxxxxxxxx' + '\n' + '银行账户:xxxxxxxxxxx' + '\n' + '开户行:xxxxxxxxxxx' + '\n' + '转账备注:' + this.form.remarks
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy')
		this.$message({
			message:'复制成功!',
			type:'success',
		})
		// 复制成功后删除创建到页面的元素
		setTimeout(()=>{
			document.body.removeChild('input')
		},2000)
	}
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中的自定义指令可以用于操作DOM元素,包括复制元素。在Vue 3中,我们可以通过调用`app.directive`来创建一个自定义指令。下面是一个例子,展示如何实现复制功能的自定义指令。 ```javascript // 在Vue 3中创建一个自定义指令 app.directive('copy', { mounted(el, binding) { // 绑定指令时执行的逻辑 el.addEventListener('click', () => { // 复制元素的内容到剪贴板 navigator.clipboard.writeText(el.textContent) .then(() => { // 成功复制的处理逻辑 console.log('Copied to clipboard!'); }) .catch(err => { // 复制失败的处理逻辑 console.error('Failed to copy text: ', err); }); }); } }) ``` 在上面的例子中,我们定义了一个名为`copy`的自定义指令,它会在元素被点击时将其内容复制到剪贴板。在`mounted`钩子函数中,我们为元素添加了一个点击事件监听器。当元素被点击时,我们使用`navigator.clipboard.writeText`方法将元素的内容写入剪贴板。如果复制成功,我们会在控制台打印一条成功消息,否则会打印一个错误消息。 要在模板中使用自定义指令,只需要将其绑定在需要添加指令的元素上。在下面的例子中,我们将自定义指令`copy`绑定在一个元素上。 ```html <template> <div> <p v-copy>This text will be copied when clicked.</p> </div> </template> ``` 在这个例子中,当这个`<p>`元素被点击时,它的内容将被复制到剪贴板。这是用Vue 3实现复制功能的简单例子,你可以根据自己的需求进行自定义指令的定义和实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值