vue + 不使用插件 复制不是标签中的内容
没有input输入框 需手动创建input标签 将input的值设置为需要复制的内容
<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('复制成功!')
//移除input标签
document.body.removeChild(input)
},
},
}
</script>
vue + 不使用插件 手动输入需要复制的内容
使用input标签，通过execCommand(‘copy’)函数实现复制功能。
<template>
<div id="app">
想要复制的内容：<input id="copy" v-model="copyMsg"/>
<button v-on:click="copy()">复制</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
copyMsg: ''
}
},
methods: {
copy () {
//获取input对象
var input = document.getElementById('copy')
//选中input标签
input.select()
//执行复制
document.execCommand('copy')
this.$message.success('复制成功!')
},
},
}
</script>
使用插件（Clipboard）
1、在项目目录下安装Clipboard插件
cd 项目目录
npm install clipboard --save
2、导入插件
//全局导入，在main.js中导入（可选）
import clipboard from ‘clipboard’
Vue.prototype.clipboard = clipboard
//局部导入，在对应文件导入
import clipboard from ‘clipboard’
完整代码
<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')
//复制成功
clipboard.on('success', function() {
_this.$message.success('复制成功！')
clipboard.destory()
})
//复制失败
clipborad.on('error', function() {
_this.$message.error('复制失败！')
clipboard.destory()
})
},
},
}
</script>
vue-copy-to-clipboard
<copy-to-clipboard
text="复制的内容"
@copy="(result) => {
$message.success('复制成功！')
}"
>
<a>[复制]</a>
</copy-to-clipboard>
- npm install vue-copy-to-clipboard
- import CopyToClipboard from 'vue-copy-to-clipboard'
