vue 复制文字的方法

vue 复制文字

vue 复制文字的方法

1. 使用原生方法
2. 使用Clipboard库 【该库的方法在elementUI部分组件中复制不了，例如Dialog 对话框、Popover 弹出框等】

使用原生方法

<template>
	<span		
		style="cursor: pointer; color: #4064ec; font-weight: 700"
		title="点击可复制"
		data-clipboard-text="我想你了"
		@click="copyText"
		>我想你了
	</span>
</templete>
methond(){
	  copyText(msg) {
            const save = function(e) {
                e.clipboardData.setData('text/plain', msg)
                e.preventDefault() // 阻止默认行为
            }
            const once = {
                once: true
            }
            document.addEventListener('copy', save, once) // 添加一个copy事件,当触发时执行一次,执行完删除
            document.execCommand('copy') // 执行copy方法
            this.$message({ message: '复制成功', type: 'success' })
        },
}

使用Clipboard库

<template>
	<span	
		class="tag-read"	
		style="cursor: pointer; color: #4064ec; font-weight: 700"
		title="点击可复制"
		data-clipboard-text="我想你了"
		@click="copyText"
		>我想你了
	</span>
</templete>
methond(){
	copyPresId() {
		let clipboard = new Clipboard('.tag-read');
		clipboard.on('success', (e) => {
			this.$message({
				message: '已复制到剪贴板',
				showClose: true,
				type: 'success',
			});
			// 释放内存
			clipboard.destroy();
		});
		clipboard.on('error', (e) => {
			this.$message({ message: '复制失败', showClose: true, type: 'error' });
			clipboard.destroy();
		});
	},
}