vue 中使用 clipboard.js 实现复制粘贴

前言

本文记录 vue 中使用 clipboard.js 实现复制粘贴的简易步骤。

步骤

安装 clipboard

npm install clipboard --save

main.js 中引入

import Vue from "vue"
import clipboard from 'clipboard'
Vue.prototype.Clipboard = clipboard

组件中使用

组件 template :

<span class="publish" @click.prevent="publishTemplate">发布</span>

貌似只支持原生的 Dom 元素。

组件 methods :

publishTemplate() {
  let self = this;
  new this.Clipboard('.publish', {
    text: function(trigger) {
      return 'hello world'
    }
  }).on('success', function () {
    self.$message.success('已复制到剪贴板！')
  }).on('error', function () {
    self.$message.error('复制失败！')
  })
}

text 函数返回需要复制的内容。