vue点击复制信息到粘贴板上

最新推荐文章于 2025-05-21 14:08:39 发布

原创最新推荐文章于 2025-05-21 14:08:39 发布 · 943 阅读

1 ·

CC 4.0 BY-SA版权

博客提醒要安装vue-clipboard2插件，该插件与前端开发相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-clipboard2 实现点击复制信息到粘贴板上

<template lang="pug">
	div
	     p 邀请码：
	         span {{icode}}
	         el-button(v-clipboard:copy="icode" v-clipboard:success="onCopy" v-clipboard:error="onError" size="small" round ) 复制
	     p 邀请链接：
	         span {{inviteUrl}}{{icode}}
	         el-button(v-clipboard:copy="inviteUrl + icode" v-clipboard:success="onCopy" v-clipboard:error="onError" size="small" round  ) 复制
</template>

<script>
import Vue from "vue";
import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);

export default {
	data(){
		return{
			icode:'邀请码',
			inviteUrl:'邀请地址'
		}
	}
    methods:{
        onCopy(e) {
            this.$message.success("复制成功");
        },
        onError(e) {
            this.$message.error("复制失败");
        },
    }
}
</script>