Vue 复制粘贴

一、在项目中安装插件clipboard.js

  yarn add clipboard

二、在需要的页面引入

import Clipboard from 'clipboard'

1、要重新命名clipboard

let clipboard = new Clipboard('.btn')

2、此时要注意位置

import Clipboard from 'clipboard'
let clipboard = new Clipboard('.btn')

export default {
  name: 'PersonalHealthy',
  data () {
      return {
          href: ''
      }
   }
}

三、HTML这样写

<p class="btn" @click="open" :data-clipboard-text="this.href">点击复制PDF报告地址</p>

1、data-clipboard-text：要复制的内容

2、data-clipboard-target：要复制的目标

四、js这样写

open () {
  clipboard.on('success', function (e) {
       // console.info('Action:', e.action)
       // console.info('Text:', e.text)
       // console.info('Trigger:', e.trigger)
       e.clearSelection()
   })
}

完成！