vue复制粘贴功能插件-Vue-clipboard

最新推荐文章于 2025-03-13 12:00:00 发布

manda Liu

最新推荐文章于 2025-03-13 12:00:00 发布

阅读量1.1k

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_42398301/article/details/109853272

版权

本文介绍如何通过npm安装vue-clipboard2插件，并在Vue项目中配置及使用该插件实现文本复制功能。文章详细展示了在main.js中引入和注册插件的过程，以及在组件模板中具体应用的方法。

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

安装插件并引入

npm i --save vue-clipboard2

在main.js文件中挂载插件

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

在页面应用：

<template>
    <div >
      <van-button v-clipboard:copy="copyVal"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"  block type="info" @click="">复制</van-button>
    </div>
</template>
<script>
	export default {
	    components: {},
	    data() {
		    return {
		    	copyVal:''
		    }
	    },
	    mounted(){},
	    methods:{
			onCopy: function (e) {
	            console.log(e)
	            alert("复制成功") //在ipad上弹出框不起作用
	            //或者 this.$toast.success("复制成功") //左右设备均可弹出
	        },
	        onError: function (e) {
	            console.log(e)
	            alert('Failed to copy texts')
	        }
		}
    }
</script>