好用的前端插件一:(clipboard)--复制功能

现在很多地方在输入框后面都会带一个直接复制框内内容的功能,省去了选中内容进而ctrl+c的步骤。这个功能看起来好厉害,其实clipboard插件可以很轻易的实现。下面介绍如何在项目中使用该插件:

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

yarn add clipboard

yarn add @types/clipboard

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

看到贴出的代码是不是觉得超级好用啊?

经验分享 程序员 微信小程序 职场和发展