vue+element 实现点击复制验证码 (an按步骤操作复制就能用)

一、npm安装clipboard

npm install clipboard --save

二、引入Clipboard

import Clipboard from "clipboard";

三、页面结构

 //  ↓↓↓  (做成弹窗样式 )                                                               ↓↓↓ ( 控制弹窗显示隐藏的值)

<el-dialog  width="30%"  title="激活码已生成"  :visible.sync="innerVisible"   append-to-body>                        <div>{{ActivationCode}}</div>     //  ←←←  这里装生成的验证码(弹窗中间内容部分)

<div slot="footer" class="dialog-footer">

<button type="primary" class="tag-read jhbut" data-clipboard-text='' @click="copy" ref='fzbut'>

复制激活码</button>                                                         //   ↑↑↑  (这里装要复制的内容 很关键)

</div>

</el-dialog>

四、copy方法(点击复制验证码的事件)

// 复制激活码

copy() {

      var clipboard = new Clipboard('.tag-read')

                                       // (data里定义的变量装接口请求回来的验证码)    ↓↓↓ 

      this.$refs.fzbut.setAttribute('data-clipboard-text', this.ActivationCode)

      clipboard.on('success', e => {

            console.log('复制成功')

            this.msgSuccess('复制成功')

            clipboard.destroy()

      })

     clipboard.on('error', e => {

            console.log('该浏览器不支持自动复制')

            clipboard.destroy()

     })

},

 五 、data里定义变量

data{

  return{

        ActivationCode:'' ,       //装验证码用(接口请求回来的验证码放这里)

    }

}