今天遇到一个需求，是点击复制按钮获取当前列表的档案号，然后复制这个获取到的档案号。复制的功能网上一搜，发现vue-clipboard2可以实现。但这里需要注意的是，如果你要复制没有特定按钮的文本请使用新方法this.$copyText。文档中有说明（所以还是要好好看文档）
GitHub
安装
npm install --save vue-clipboard2
main.js
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
两种使用方法
- 方式一
<template>
<a
v-clipboard:copy="url"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
>复制</a >
</template>
<script>
export default {
data() {
return {
url:'https://github.com/Inndy/vue-clipboard2#readme'
}
},
methods: {
onCopy(e) {
alert('复制成功' + e.text)
},
onError (e) {
console.log(e)
alert('复制失败')
}
}
}
</script>
- 方式二
<template>
<button @click="copyUrl">复制</button>
</template>
<script>
export default {
data() {
return {
url:'https://github.com/Inndy/vue-clipboard2#readme'
}
},
methods: {
copyUrl() {
//请求结果为res
let foundCode = res.data.foundCode;
this.$copyText(foundCode).then(
res => {
this.$message({
message: '复制成功',
type: 'success',
});
},
err => {
this.$confirm(
'由于您的浏览器版本较低，请手动复制档号：' + foundCode,
'提示',
{
showConfirmButton: false,
showCancelButton: false,
type: 'warning',
}
);
}
);
},
}
}
</script>
注意：
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
clipboard.js——兼容各种版本浏览器的剪切板库
https://blog.csdn.net/lg346426260/article/details/56708340
