vue2项目中如何使用clipboard复制插件
更新时间:2024年07月27日 08:53:16 作者:小影_8978
这篇文章主要介绍了vue2项目中如何使用clipboard复制插件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue2使用clipboard复制插件
需求,点击页面中的某一个按钮,复制文字。
npm install clipboard --save
- 在组件中使用
import Clipboard from 'clipboard'
- html中的按钮
<div ref="main" class="main">
<button @click="copy">copy</button>
</div>- js的代码
.main容器,可以是任何页面上的容器
copy(code) {
let clipboard = new Clipboard(".main", {
text() {
// console.log(trigger);
//返回字符串
return code;
},
});
// 复制成功
clipboard.on("success", () => {
this.Message('You have successfully copied the code. Please paste in game to redeem.')
clipboard.destroy();
});
},【插件vue-clipboard2】复制文本
一个小插件【vue-clipboard2】,在vue项目中,有场景是需要点击按钮复制文本,使用这个插件可以轻松复制信息到剪切板中。
安装插件
npm i vue-clipboard2
引入到项目工程
在入口文件 mian.js 中
import Vue from 'vue' import VueClipBoard from 'vue-clipboard2' // ... Vue.use(VueClipBoard) // ...
页面应用
- v-clipboard:copy=“copyTxt” , 复制内容
- v-clipboard:success=“copySuc”,复制成功后的钩子函数
- v-clipboard:error=“onError” ,复制失败的钩子函数
<template>
<el-button
type="primary"
v-clipboard:copy="copyTxt"
v-clipboard:success="copySuc">
点我复制
</el-button>
</template>
export default {
data() {
return {
copyTxt:'我是复制的内容!'
}
},
methods:{
copySuc() {
return this.$message({
message: '复制成功',
type: 'success',
})
},
}
}总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
javascript中Set、Map、WeakSet、WeakMap区别
这篇文章主要介绍了javascript中Set、Map、WeakSet、WeakMap区别,需要的朋友可以参考下2022-12-12
vue-cli项目中img如何使用require动态获取图片
这篇文章主要介绍了vue-cli项目中img如何使用require动态获取图片,具有很好的参考价值,希望对大家有所帮助。2022-09-09
Vue.js中this如何取到data和method里的属性详解
methods属性是一个对象,通常我们会在这个对象中定义很多的方法,下面这篇文章主要给大家介绍了关于Vue.js中this如何取到data和method里的属性,需要的朋友可以参考下2022-12-12
vuex 解决报错this.$store.commit is not a function的方法
这篇文章主要介绍了vuex 解决报错this.$store.commit is not a function的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-12
vue3+vite+JS使用Echarts封装一个饼图完整代码(父子组件联动)
在Vue中绘制饼图有多种方式,其中最常用的是使用第三方图表库,如ECharts、Chart.js等,下面这篇文章主要介绍了vue3+vite+JS使用Echarts封装一个饼图(父子组件联动)的相关资料,需要的朋友可以参考下2026-03-03


最新评论