前端插件-（clipboard）--复制功能

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中

1、js项的使用

1、引入JS文件：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

2、HTML代码：

<input name="content" id="content" value="这里是需要复制的内容">
<button class="btn btn-sm btn-purple" id="copybtn" data-clipboard-action="copy" data-clipboard-target="#content">复制</button>

3、JS代码初始化插件：

<script>
  var clipboard = new ClipboardJS('#copybtn');
      clipboard.on('success', function(e) {
          alert('复制成功');
      });

      clipboard.on('error', function(e) {
          alert('复制失败');
      });
  </script>

2、vue的使用方法

1、无论什么插件第一步都是先引入：

yarn add clipboard
yarn add @types/clipboard

image.png

2、在你需要用到的文件中引用

import ClipboardJS from 'clipboard';

3、最后就是如何使用了

<div class="search_contariner">
      <el-input
         placeholder="搜索"
         clearable
         v-model="searchInput">
         <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
</div>
<img @click="onclip" title="点击复制MD5" .class="copy" :data-clipboard-text="searchInput" src="@/assets/images/copy.jpg" alt="" >
 
 
 
private onclip() {
      const _this = this
      const clipboard = new ClipboardJS('.copy');
      clipboard.on('success',(e: ClipboardJS.Event) => {
          e.clearSelection();
          _this.$message({
              message:'MD5值已复制到粘贴板',
              type:'success'
          })
      });
      clipboard.on('error', (e: ClipboardJS.Event) => {
          _this.$message({
              message:'复制错误，请重新复制！',
              type:'error'
          })
      });
  }