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。
喜欢小心心❤❤❤❤❤❤❤❤走起来

VUE 复制内容至剪切板

猜你喜欢