vue\js实现一键复制
PV
通过js或者插件实现一键复制
- Document.execCommand() （不推荐)
- 异步的 Clipboard API （推荐)
- 使用插件（Clipboard）（根据实际情况使用）
不使用插件（document.execComman）
使用input配合document.execComman方法可以实现；
这个特性已经过时了，它在一些浏览器中仍然可以工作，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它
// 复制input标签中的内容
<template>
<div id="app">
输入你需要复制的内容：<input id="copy" v-model="mes"/>
<button v-on:click="copy()">复制</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
mes: ''
}
},
methods: {
copy () {
//获取input对象
var input = document.getElementById('copy')
//选中input标签
input.select()
//执行复制
document.execCommand('copy')
this.$message.success('success!')
},
},
}
</script>复制一些不是标签中的内容时
<template>
<div id="app">
<button id="copy" v-on:click="copy()">复制</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
mes: '这就是需要复制的内容！'
}
},
methods: {
copy () {
//创建input标签
var input = document.createElement('input')
//将input的值设置为需要复制的内容
input.value = this.mes;
//添加input标签
document.body.appendChild(input)
//选中input标签
input.select()
//执行复制
document.execCommand('copy')
//成功提示信息
this.$message.success('success!')
//移除input标签
document.body.removeChild(input)
},
},
}
</script>不使用插件（Clipboard API）
Clipboard API是下一代的剪贴板操作方法，比传统的document.execCommand()方法更强大、更合理。
它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。
API
- navigator.clipboard.writeText：用于将文本内容写入剪贴板
- navigator.clipboard.write：用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。
- navigator.clipboard.readText ：用于复制剪贴板里面的文本数据
- navigator.clipboard.read ： 用于复制剪贴板里面的数据，可以是文本数据，也可以是二进制数据（比如图片）
navigator.clipboard.writeText 用于将文本内容写入剪贴板。 支持的浏览器 Chrome、Firefox 和 Safari
代码示例
async function writeDataToClipboard() {
const result = await navigator.clipboard.writeText("Hello");
console.log(result);
}
navigator.clipboard.write 用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。 支持的浏览器 Chrome、Safari，Firefox 则需要通过使用about:config设置 asyncClipboard 标志来支持。 代码示例
async function copyImage() {
const input = document.getElementById("file");
const blob = new Blob(["sample 2"], { type: "text/plain" });
const clipboardItem = new ClipboardItem({
"text/rt": blob,
"image/png": input.files[0],
});
const response = await navigator.clipboard.write([clipboardItem]);
console.log(response);
}当写入的 mimeType 不是文本、html 或图像时，Chrome 中会发生错误。
Safari 支持使用对 blob 的 promise 来创建剪贴板项，这在必须从服务器获取要写入的数据的情况下非常实用。
async function copyImage() {
const fetchImage = ()=>{
const input = document.getElementById("file");
return Promise.resolve(input.files[0]);
};
const clipboardItem = new ClipboardItem({
["image/png"]:fetchImage()
});
const reponse = await navigator.clipboard.write([clipboardItem]);
console.log(reponse)
}navigator.clipboard.readText 用于复制剪贴板里面的文本数据。
代码示例
async (e) => { const text = await navigator.clipboard.readText(); console.log(text); }
navigator.clipboard.read 用于复制剪贴板里面的数据，可以是文本数据，也可以是二进制数据（比如图片），该方法需要用户明确给予许可。
错误信息
- 读取权限被拒绝：在 navigator.clipboard.read 上有一个允许剪贴板访问的提示，如果用户在提示出现时单击阻止剪贴板访问，则会出现此错误。
- 剪贴板上没有有效数据：当剪贴板中没有文本、html 或图像并且包含一些其他数据类型或空剪贴板时，会出现此错误。
- 前上下文中用户代理或平台不允许该请求，可能是因为用户拒绝了权限：在 navigator.clipboard.read 上，如果剪贴板数据不是来自同一个浏览器按钮，则 Safari 中会显示一个额外的粘贴按钮。如果未单击此错误，则会引发此错误。
使用插件（Clipboard）
1、在项目目录下安装插件
npm install clipboard --save
2、引入插件
// 全局中引入 main.js import clipboard from 'clipboard' Vue.prototype.clipboard = clipboard // 局部引入 import clipboard from 'clipborad'
3、项目中使用
<template>
<div id="app">
<button id="copy" :data-clipboard-text="mes" v-on:click="copy()">复制</button>
</div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
name: 'App',
data() {
return {
mes: '这就是需要复制的内容！'
}
},
methods: {
copy () {
let _this = this
let clipborad = new Clipboard('#copy')
//复制成功
clipborad.on('success', function() {
_this.$message.success('复制成功！')
// 释放内存，如果缺少，复制成功的提示会一直累加
clipborad.destroy()
})
//复制失败
clipborad.on('error', function() {
_this.$message.error('复制失败！')
// 释放内存
clipborad.destroy()
})
},
},
}
</script>