vue 实现复制粘贴功能

vue 实现复制粘贴功能

这里使用到的是vue-clipboards插件，

首先安装依赖 yarn add vue-clipboards -s

然后引入项目main.js文件中，注册使用
import VueClipboards from “vue-clipboards”;
Vue.use(VueClipboards)

就可以直接在页面上使用：

<template>
<div>
	<span>{{copyText}}</span>
	<button  v-clipboard="copyText"   @success="handleCopy" @error="handleCopyFail">复制</button>
</div>
</template>

<script>
	export default {
	  name: "page",
	  data() {
	    return {
	      copyText: "想要复制的文本"
	    };
	  },
	  methods: {
	  		// 复制成功回调
	  	 handleCopy() {
		    this.$toast("复制成功");  // ui组件使用的是vant
		  }
		  // 复制失败回调
			handleCopyFail(){
			    this.$toast("复制失败");
			  }
	  }
	};
</script>