clipboard.js使用超详细

clipboard.js使用教程

前言

我们开发的中，有的应用需要用户拷贝页面的内容，方便用户操作。此时，就是需要是用粘贴板功能。

clipboard.js的作用就正好满足了我们的需求

一、基本使用步骤

1.npm安装

npm install clipboard --save

2. 在js文件中引入

import Clipboard from "clipboard";

3.页面结构

<div class="btn" id="copyText" :data-clipboard-text="currentPageUrl" data-clipboard-action="copy" data-clipboard-target="#target" @click="copyText">复制</div>

4.方法调用

copyText() {
    let _this = this;
    let clipboard = new Clipboard("#copyText");
    clipboard.on("success", function(e) {
        alert("复制成功");
        e.clearSelection();
    });
},

二、项目使用案例

1.文件封装

clipboard.js

import Clipboard from 'clipboard'
import { message } from 'ant-design-vue'

function clipboardSuccess(text) {
  message.success(`复制${text}成功`)
}

function clipboardError(text) {
  message.error(`复制${text}失败`)
}

/**
 * @description 复制数据
 * @param text
 * @param event
 */
export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text,
  })
  clipboard.on('success', () => {
    clipboardSuccess(text)
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    clipboardError(text)
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

2.页面使用

（1）引入封装文件

import clip from '@/utils/clipboard'

（2）页面

<a-col
        v-for="(item, index) in queryIcon"
        :key="index"
        :lg="2"
        :md="3"
        :sm="8"
        :xl="2"
        :xs="6"
      >
        <a-card shadow="hover" @click="handleCopyIcon(item, $event)">
          <vab-icon :icon="item"></vab-icon>
        </a-card>
        <div class="icon-text" @click="handleCopyText(item, $event)">
          {{ item }}
        </div>
      </a-col>

（3）方法调用

handleCopyText(item, event) {
        clip(item, event)
      },
handleCopyIcon(item, event) {
        clip(`<vab-remix-icon icon-class="${item}"></vab-remix-icon>`, event)
      },

总结

基础+小实战