用js实现一键复制功能

前导

这是一个很简单的功能,拆解出来其实只需要一步,调用clickboard的API即可实现

引入

首先要引入js
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

html代码:

• copyMessage 就是我们最后要复制的内容,这里我设置的是个变量.需要在API中绑定 class="clickboard"

<div id="app">
	<div id="copy-cont">
		<a @click="copyFn" class="clickboard">{{copyMessage}}</a>
	</div>
</div>

js代码

copyFn() {
	//复制方法
	var clickBoard = new ClipboardJS(".clickboard", {
		text: () => {
			return this.copyMessage;
		}
	});
	//复制成功
	clickBoard.on("success", (e) => {
		console.log(`已复制:${e.text}`)
	});
	//复制失败
	clickBoard.on("error", (e) => {
		console.log("error", e)
	})
}

• 这里有一个额外说明的事情,由于我们的copyMessage设置的是全局变量,所以clipboard取text的值的时候,要用到es6的箭头函数,否则作用域会在api方法中,无法识别这是一个全局变量.