关于Clipboard.js的使用

最近项目中需要做一个H5页面，需要点击按钮来直接复制textaera中的内容。所以我找到了Clipboard.js这个插件。
github地址：https://github.com/zenorocha/clipboard.js

应用场景

我的需求就是点击按钮复制文本框的内容。

代码实现：

HTML：

<div class="model">
<div class="top"><img class="top-img" src="/static/yxms/4.png" alt=""><span style="position: absolute;top: 1rem;">贴心的推荐语提高成功率哦~</span>
  <div class="close"> <img  class="close-image" src="/static/yxms/5.png" alt=""> </div>
</div>
<hr />
<div class="middle"><textarea  cols="35" rows="8" id="bar">{$res.text}</textarea></div>
<div class="mark-bottom"><div class="bottom-btn" data-clipboard-action="copy">复制推荐语</div> </div>
<div class="toast"><img src="/static/yxms/2.png" alt=""> </div>

JS（引入JQ库）：

let clipboard = new ClipboardJS('.bottom-btn', {
    text: function() {
        return $('.middle>textarea').val()
    }
});

效果实现

点击复制

复制之后

小结：

大家可以到github中下载dom自己研究一下用法，自己实践后才会合理运用这个插件。