官網(wǎng)使用

簡介

通過該插件可以將輸入框，文本域，DIV元素中的文本等文本內(nèi)容復(fù)制到剪貼板中
clipboard.js支持主流的瀏覽器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

官網(wǎng)地址

使用

引入js

1. script引入

<script src="dist/clipboard.min.js"></script>

2. npm安裝

npm install clipboard --save

復(fù)制方式

1. 從target復(fù)制目標(biāo)內(nèi)容
2. 通過function復(fù)制內(nèi)容
3. 通過屬性返回復(fù)制內(nèi)容

從target復(fù)制目標(biāo)內(nèi)容

• input

  1. data-clipboard-target指向復(fù)印節(jié)點，這里指input的目標(biāo)id
  2. data-clipboard-action這里使用copy，同時也可以使用cut，則點擊按鈕后，內(nèi)容里的值被剪切。如果沒有指定，則默認(rèn)值是copy。cut只能在input和textare中起作用

<input id="foo" type="text" value="hello">
<button
    class="btn"
    data-clipboard-action="copy"
    data-clipboard-target="#foo"
>Copy</button>

• textare

與input用法差不多

<textarea id="bar">hello</textarea> 
<button
    class="btn"
    data-clipboard-action="cut"
    data-clipboard-target="#bar">Cut</button>

• div

與input用法差不多

<div>hello_div</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

初始化js

const clipboard = new ClipboardJS('.btn')

clipboard.on('success', (e) => {
    console.log(e)
    /*
        {
            action: 'copy',
            text: 'hello_div',
            trigger: 'button',
            clearSelection: f()
        }
    */
})

clipboard.on('error', (e) => {
    console.log(e)
})

通過function復(fù)制內(nèi)容

1. 通過target的function復(fù)制內(nèi)容

通過target來指定要復(fù)制的dom元素

• html

<button class="btn">Copy_target</button>
<div>copy content</div>

• js

const clipboard = new ClipboardJS('.btn', {
    // 這里是指定要復(fù)制的dom元素
    target: () => document.querySelector('div')
})
clipboard.on('success', (e) => {
    console.log(e)
})
clipboard.on('error', (e) => {
    console.log(e)
})

2. 通過text的function復(fù)制內(nèi)容

通過text來指定要復(fù)制的內(nèi)容

• html

<button class="btn">Copy</button>

• js

const clipboard = new ClipboardJS('.btn', {
    // 直接通過text返回了要復(fù)制的內(nèi)容
    text: () => 'copy content'
})
clipboard.on('success', (e) => {
    console.log(e)
})
clipboard.on('error', (e) => {
    console.log(e)
})

通過屬性返回復(fù)制內(nèi)容

通過data-clipboard-text屬性返回復(fù)制的內(nèi)容

1. 單節(jié)點

通過id指定節(jié)點對象，并做為參數(shù)傳送給Clipboard。這里的返回值的內(nèi)容是data-clipboard-text的內(nèi)容

• html

<div id="btn" data-clipboard-text="123">copy</div>

• js

const btn = document.getElementById('btn')
const clipboard = new ClipboardJS(btn)
clipboard.on('success', (e) => {
    // 返回的是 123
    console.log(e)
})
clipboard.on('error', (e) => {
    console.log(e)
})

2. 多節(jié)點

通過button返回所有button按鈕，并做為參數(shù)傳送給Clipboard。每個按鈕被點擊時，返回值的內(nèi)容是其對應(yīng)的data-clipboard-text的內(nèi)容，分別是111，222，333

• html

<button class="btn" data-clipboard-text="111">Copy</button>
<button class="btn" data-clipboard-text="222">Copy</button>
<button class="btn" data-clipboard-text="333">Copy</button>

• js

// 通過標(biāo)簽獲取所有
const btns = document.querySelectorAll('button')
const clipboard = new ClipboardJS(btns)

// 或者通過傳入類名
const clipboard = new ClipboardJS('.btn')

clipboard.on('success', (e) => {
    // 返回的是 111, 222, 333
    console.log(e)
})
clipboard.on('error', (e) => {
    console.log(e)
})

Vue中的使用

非組件化使用

為什么要區(qū)分看，看后面的組件化使用就知道了

<template>
    <div>
        <div id="copyContent">要復(fù)制的內(nèi)容</div>
        <a
          href="javascript:void(0);"
          ref="copyBtn"
          title="點擊復(fù)制內(nèi)容"
          data-clipboard-action="copy"
          data-clipboard-target="#copyContent"
          @click="clickHandle">
          復(fù)制
        </a>
    <div>
</template>
<script>
import Clipboard from 'clipboard'

export default {
    data() {
        return {
            copyBtn: null
        }
    },
    mounted() {
        const copyBtn = this.$refs.copyBtn
        this.copyBtn = new Clipboard(copyBtn)
    },
    methods: {
        clickHandle() {
          this.copyBtn.on('success', (e) => {
            console.log(e)
          })
          this.copyBtn.on('error', (err) => {
            console.error('copy error', err)
          })
        }
    }
}
</script>

組件化使用

如果做成了copy組件，會出現(xiàn)一個問題，如果一個頁面里面有多個copy組件，那么id會不是唯一，當(dāng)不管點擊那個復(fù)制，復(fù)制的內(nèi)容都會是最后一個加載好的組件里面的內(nèi)容

通過Vue里面的唯一標(biāo)識_uid來動態(tài)設(shè)置id使其不會相同

<template>
    <div>
        <div :id="`copyContent${_uid}`">
            <!-- 外面要復(fù)制的內(nèi)容的插槽 -->
            <slot></slot>
        </div>
        <a
          href="javascript:void(0);"
          ref="copyBtn"
          title="點擊復(fù)制內(nèi)容"
          data-clipboard-action="copy"
          :data-clipboard-target="`#copyContent${_uid}`"
          @click="clickHandle">
          復(fù)制
        </a>
    <div>
</template>
<script>
import Clipboard from 'clipboard'

export default {
    data() {
        return {
            copyBtn: null
        }
    },
    mounted() {
        const copyBtn = this.$refs.copyBtn
        this.copyBtn = new Clipboard(copyBtn)
    },
    methods: {
        clickHandle() {
          this.copyBtn.on('success', (e) => {
            console.log(e)
          })
          this.copyBtn.on('error', (err) => {
            console.error('copy error', err)
          })
        }
    }
}
</script>

因為內(nèi)容是slot插入進來的，所以不知道是什么內(nèi)容，無法使用text的function方式去實現(xiàn)