官网使用

简介

通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

官网地址

使用

引入js

1. script引入

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

2. npm安装

npm install clipboard --save

复制方式

1. 从target复制目标内容
2. 通过function复制内容
3. 通过属性返回复制内容

从target复制目标内容

• input

  1. data-clipboard-target指向复印节点，这里指input的目标id
  2. data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是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复制内容

1. 通过target的function复制内容

通过target来指定要复制的dom元素

• html

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

• js

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

2. 通过text的function复制内容

通过text来指定要复制的内容

• html

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

• js

const clipboard = new ClipboardJS('.btn', {
    // 直接通过text返回了要复制的内容
    text: () => 'copy content'
})
clipboard.on('success', (e) => {
    console.log(e)
})
clipboard.on('error', (e) => {
    console.log(e)
})

通过属性返回复制内容

通过data-clipboard-text属性返回复制的内容

1. 单节点

通过id指定节点对象，并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容

• 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. 多节点

通过button返回所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是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

// 通过标签获取所有
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中的使用

非组件化使用

为什么要区分看，看后面的组件化使用就知道了

<template>
    <div>
        <div id="copyContent">要复制的内容</div>
        <a
          href="javascript:void(0);"
          ref="copyBtn"
          title="点击复制内容"
          data-clipboard-action="copy"
          data-clipboard-target="#copyContent"
          @click="clickHandle">
          复制
        </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组件，会出现一个问题，如果一个页面里面有多个copy组件，那么id会不是唯一，当不管点击那个复制，复制的内容都会是最后一个加载好的组件里面的内容

通过Vue里面的唯一标识_uid来动态设置id使其不会相同

<template>
    <div>
        <div :id="`copyContent${_uid}`">
            <!-- 外面要复制的内容的插槽 -->
            <slot></slot>
        </div>
        <a
          href="javascript:void(0);"
          ref="copyBtn"
          title="点击复制内容"
          data-clipboard-action="copy"
          :data-clipboard-target="`#copyContent${_uid}`"
          @click="clickHandle">
          复制
        </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>

因为内容是slot插入进来的，所以不知道是什么内容，无法使用text的function方式去实现