在vue2 中使用 clipboard.js 复制功能

前言

在手机或者web端复制粘贴是一个常用的功能，可以帮助用户方便的复制需要的内容，比如字符串或者图片

官方网站

https://github.com/zenorocha/clipboard.js

安装方式

npm install clipboard --save

导入clipboard

1.全局导入，在main.js中导入（可选）
import clipboard from ‘clipboard’
Vue.prototype.clipboard = clipboard
2.局部导入，在对应文件导入
import clipboard from ‘clipboard’

代码

<template>
  <div> 
    <span>{{msg}}</span>
    <div id="btn" @click="copy">复制</div>
  </div>
</template>
<script>
// 导入
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      msg: '来复制我吧'
    };
  },
   methods: {
    //复制方法
    copy () {
      let that = this;
      let clipboard = new Clipboard("#btn", {
        text(trigger) {
          console.log(trigger);
          //返回字符串
          return that.msg;
        },
      });
      // 复制成功
      clipboard.on("success", (e) => {
        console.log(e, '复制成功');
        clipboard.destroy();
      });
      // //复制失败
      clipboard.on("error", (e) => {
         console.log(e, '复制失败');
        clipboard.destroy();
      });
    },
  },
};
</script>
<style scoped>
#btn {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 6px;
  background-color: #eee;
  color: #333;
  cursor: pointer;
}
#btn:active {
  background-color: #ddd;
  color: #666;
}
</style>

展示效果