用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方法中,无法识别这是一个全局变量.