vue 适配微信浏览器 实现点击按钮复制文本 clipboard

之前写的复制功能发现用微信打开的浏览器页面不生效，所以又换了种方法实现

首先，安装 clipboard

npm install clipboard --save

然后，引入 clipboard

import Clipboard from 'clipboard'

对被点击的文本或按钮绑定动态变量 id="btn" :data-clipboard-text="scope.row.courseNo"

<!-- 这里scope.row.courseNo是我要复制的内容 -->
<template slot-scope="scope">
    <span id="btn" :data-clipboard-text="scope.row.courseNo" @click="copyValue()">{{ scope.row.courseNo }}</span>
 </template>

方法

copyValue() {
   const Message = this.$message
   var clipBoard = new Clipboard('#btn')
   clipBoard.on('success', function() {
       clipBoard.destroy() // 销毁上一次的复制内容
       clipBoard = new Clipboard('#btn')
       Message.success('复制成功')
   })
   clipBoard.on('error', function() {
       Message.info('复制失败，请手动复制')
   })
},

 这样就ok啦~