vue中使用clipboard 复制

1.安装

npm install --save clipboard

2.页面引用

import Clipboard from 'clipboard'

3.页面运用

html的运用

- 根据data-clipboard-text运用

data-clipboard-text 需要复制的文字，可以同时写几个复制内容在页面上

<span class="detailAdress" style="word-break:break-all;">
    <em class="copy clipboard" data-clipboard-text="复制内容1" @click="clipCopyText">复制</em>
</span>
<span class="detailAdress" style="word-break:break-all;"><br/>
    <em class="copy clipboard" data-clipboard-text="复制内容2" @click="clipCopyText">复制</em>
</span>

复制代码

- 根据data-clipboard-target运用

target必须是input,复制的是input里面的value值

//html
 <div>
   <!-- target -->
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">     
    <button class="clipboard" data-clipboard-target="#foo" @click="clipCopyText">  Copy to clipboard</button> 
   </div>
   //js复制链接，这里跟
   clipCopyText() {
             let clipboard = new Clipboard('#btn')
            clipboard.on('success', e => {
                console.log('复制成功')
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                console.log('该浏览器不支持自动复制')
                // 释放内存
                clipboard.destroy()
            })
        },
复制代码

js方法

//页面上是id，也可以是 let clipboard = new Clipboard('#clipboard')

//js复制链接
    clipCopyText(){
      let clipboard = new Clipboard('.clipboard') 
      clipboard.on('success', e => {
          console.log('复制成功')
          // 释放内存
          clipboard.destroy()
      })
      clipboard.on('error', e => {
          // 不支持复制
          console.log('该浏览器不支持自动复制')
          // 释放内存
          clipboard.destroy()
      })
    }, 
复制代码