vue+el-button实现复制链接

vue+el-button实现复制链接

这里结合组件  vue-clipboard2

step1：

下载 vue-clipboard依赖包

      npm install --save vue-clipboard2

step2：

在项目中的main.js引入

import VueClipboard from 'vue-clipboard2'    // 引入

Vue.use(VueClipboard)    // vue全局使用插件

step3：

HTML: 要在标签在上绑定三个属性

  v-clipboard:copy="url" ：要复制的内容

  v-clipboard:success="onCopy" ：复制成功时执行的方法

  v-clipboard:error="onError" ：复制失败时执行的方法

  <el-button 

            type="text"

            size="small" 

            v-if="scope.row.state == 0" 

            v-clipboard:copy="url"

            v-clipboard:success="onCopy"

            v-clipboard:error="onError"

            >

            复制考试链接</el-button>

step4：获得 host 拼接成要复制的链接

data() {

    return {

      url: '',

    };

  },

  created() {

    this.initTable();

    this.url = `${location.host}/#/examlogin`

  },