Vueプロジェクトコピーテキストを貼り付けボードにコピー

Vueプロジェクトは、微信の公衆番号の開発に遭遇し、原生のDOM操作を利用して、iOSシステムがコピーして貼ることができず、互換性の問題が発生し、最後にclipboardを使って、互換性の問題を完璧に解決した.
最初のステップはnpmを使用してインストールします

npm install clipboard --save

ステップ2では、必要なページに導入します.

import Clipboard from "clipboard";

ステップ3、使用

<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>

以上でコピーが可能になり、アンドロイドとアップルは完璧に互換性があり、プロジェクトにコピーすれば使えます.伝言を歓迎します!