复制到剪切板功能

通过利用npm 第三方插件库，安装如下

 npm install vue-clipboard2

引入，注册 — main.js

import VueClipboard from "vue-clipboard2";

VueClipboard.config.autoSetContainer = true  //解决模态框（弹窗组件失效）
Vue.use(VueClipboard)

组件：

<template>
  <div>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
      <el-form-item label="日期">
        <el-input v-model="formLabelAlign.date"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="formLabelAlign.address"></el-input>
      </el-form-item>
    </el-form>
    <button
      type="button"
      class="btn"
      v-clipboard:copy="formLabelAlign"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
    >复制</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        date: "2020-05-12",
        name: "大表哥",
        address: "广东省深圳市"
      }
    };
  },
  methods: {
    onCopy() {
      this.$copyText(
        `日期：${this.formLabelAlign.date}\n名称：    ${this.formLabelAlign.name}\n地址：${this.formLabelAlign.address}`
      ).then(
        res => {
          console.log(res.text,'已经复制成功，可直接去粘贴');
        }
      );
    },
    onError(e) {
      console.log("复制失败！");
    }
  }
};
</script>