1. 程式人生 > >VUE 複製內容至剪下板

VUE 複製內容至剪下板

一般我們在移動端會用到點選複製內容到剪貼簿,當然我們也在pc用到,今天和大家分享下複製內容到剪下板的2種方法,各有利弊。
第一種我們可以用瀏覽器的複製命令完成,但是這個方法在蘋果系統上是不能用的。
程式碼:

<script type="text/javascript">
function savetext()
    {
        var Url2=document.getElementById("spanid").innerText;
        var oInput = document.createElement('input');
        oInput.
value = Url2; document.body.appendChild(oInput); oInput.select(); // 選擇物件 document.execCommand("Copy"); // 執行瀏覽器複製命令 oInput.className = 'oInput'; oInput.style.display='none'; alert('複製成功'); } </script> <span id="spanid">12345678</span> <
input type="button" onClick="savetext()" value="點選複製程式碼" />

這個方法比較常見,也比較簡單,如果你沒有蘋果的需求那麼完全可以的。
第二種clipboard.js
現代化的“複製到剪下板”外掛。不包含 Flash。
安裝
你可以通過 npm 來安裝它。

npm install clipboard --save

開始
首先,引入位於 dist 目錄下的指令碼檔案,或者引入一個第三方CDN。

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"
></script>

完事具備只欠東風了 上程式碼

	<span class="topword">{{promocode1}}</span>
	<button class="btn" @click="copyContent">Copy</button>
	data: {
		clipboard: null//存到vue的data裡	
	},
	copyContent() {
		this.clipboard = new ClipboardJS(".btn", {
			target: function () {
				return document.querySelector(".topword");
			}
		});
		this.clipboard.on("success", function(e) {
			console.log(e.text);
			alert('複製成功了~~~~~~~~~~~~')
			});
		//如果是vue模組話開發就這樣寫,先require一下,然後new
		const clipboard = require("clipboard");
		this.clipboard = new clipboard (".btn", {
			target: function () {
				return document.querySelector(".topword");
			}
		});
	},

注意了 如果你要複製input裡的內容,不能加disabled或者readonly屬性的,所以最後我還是採用了span。
喜歡小心心❤❤❤❤❤❤❤❤走起來