vue clipboard复制文本

一 安装引入依赖

npm install clipboard --save

import Clipboard from 'clipboard'; 

二 代码

<template>
  <div class="content">
      <div v-for="(item, index) in list" :key="index" class="item" @click="copy"  :data-clipboard-text="item.label">
        {
   
   {item.value}} --- {
   
   {item.label}}
      </div>
  </div>
</template>

<script>
import Clipboard from 'clipboard';

export default {
  name: 'ctrl',
  data() {
    return {
      list: [
        { label: '测试1', value: 1 },
        { label: '测试2', value: 2 },
        { label: '测试3', value: 3 },
      ]
    }
  },
  methods: {
    copy() {
      let clipboard = new Clipboard('.item')
      clipboard.on('success', (e) => {
        console.log('复制成功')
        console.log(e)
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        console.log(e)
        // 释放内存
        clipboard.destroy()
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.item {
  margin: 40px;
  cursor: pointer;
}
</style>