美文网首页
前端插件-(clipboard)--复制功能

前端插件-(clipboard)--复制功能

作者: 宏_4491 | 来源:发表于2020-11-19 16:08 被阅读0次

    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'
              })
          });
      }
    

    相关文章

      网友评论

          本文标题:前端插件-(clipboard)--复制功能

          本文链接:https://www.haomeiwen.com/subject/dbkliktx.html