Vue.js+Element：clipboard.js实现点击按钮复制内容到剪切板

本文链接：https://blog.csdn.net/qq_44419617/article/details/101370967

需求

点击某个按钮，将设置的目标内容(例如地址)复制到剪切板

引入

clipboardjs官网传送门
npm引入：npm install clipboard --save

使用

<template>
  <div class="drawer">
    <el-switch v-model="isopen" />
    <el-input placeholder="请输入" style="width: 180px"/>
    <div :class="isopen?'mask':''" @click="close"/>
    <div :class="isopen?'open':'close'">
      <div class="header">
        <p class="fl">示例</p>
      </div>
      <el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="name" label="name" width="120" />
        <el-table-column v-for="item in formThead" :key="item" :label="item">
          <template slot-scope="scope">
            {{ scope.row[item] }}
          </template>
        </el-table-column>
        <el-table-column label="action" width="80">
          <template slot-scope="{row}">
            <el-button size="mini" type="primary" icon="document" @click="handleCopy(row.address,$event)">
              copy
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px">
        <el-button size="mini" type="danger" class="fr mt-10" @click="close">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import clip from '@/utils/clipboard' // use clipboard directly
const defaultFormThead = ['address']
export default {
  data() {
    return {
      isopen: false,
      tableData: [
        {
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      key: 1, // table key
      formTheadOptions: ['address'],
      formThead: defaultFormThead // 默认表头 Default header
    }
  },
  methods: {
    close() {
      this.isopen = false
    },
    handleCopy(text, event) {
      clip(text, event)
    },
    clipboardSuccess() {
      this.$message({
        message: 'Copy successfully',
        type: 'success',
        duration: 1500
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .drawer {
    .mask {
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .1);
    }
    .close {
      position: absolute;
      z-index: 10;
      left: -800px;
      top: 0;
      width: 800px;
      height: 100%;
      background: #fff;
      transition: left linear 1s;
    }
    .open {
      position: absolute;
      z-index: 10;
      right: 0;
      top: 0;
      width: 600px;
      height: 100%;
      background: #fff;
      transition: left linear 1s;
      .header {
        margin: 0 20px;
        height: 40px;
        border-bottom: 1px solid #dddddd;
        p {
          margin-top: 30px;
        }
      }
    }
  }
</style>