在个人项目中为了更好的完善体验,需要有一个一键复制的功能复制,主要的实现方法有以下几个:
不使用插件
使用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)
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>
更多文章__> >> 码砖猿的技术博客