Vue项目复制文本到粘贴板

Vue项目，遇到微信公众号开发，利用原生DOM操作，iOS系统无法复制粘贴，出现不兼容问题，最后用clipboard，完美解决兼容问题。

第一步，使用npm 安装

npm install clipboard --save

第二步，在所需的页面引入

import Clipboard from "clipboard";

第三步，使用

<template>
	<div id="app">
    	<button class="tag-read" @click="copy(wechat)">复制微信</button>
	</div>
</template>
<script>
 	import Clipboard from "clipboard";
 	export default{
     
		data(){
     
			return {
     
				wechat:'', //此处可以根据需求去动态渲染
			}
		},
		methods:{
     
			copy(text) {
     
      			console.log(text);
      			var Url = index;
      			var clipboard = new Clipboard(".tag-read", {
     
        			text: function() {
     
          				return Url;
        			}
      			});
      			clipboard.on("success", e => {
     
        			this.$toast({
     
          			message: "已成功复制到剪切板",
          			type: "success"
        		});
        		console.log(e);
        		// 释放内存
        		clipboard.destroy();
      			});
      			clipboard.on("error", e => {
     
        			// 不支持复制
        			this.$toast("该浏览器不支持复制");
        			// 释放内存
        			clipboard.destroy();
      			});
    		},
		}
	}
</script>

以上就可以实现复制啦，安卓手机和苹果完美兼容，复制到项目就可以用了。
欢迎留言！