Clipboard-vue NPM

clipboard-vue

一个简单的基于clipboard.js开发的可以在VUE2.x使用的复制文本插件

安装

npm install --save clipboard-vue

或者引入

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

开始使用

全局引入:

// main.js
import Vue from 'vue'
import VClipboard from 'clipboard-vue'

Vue.use(VClipboard)

组件内按需引入:

// component.vue
import { copy, copyText } from 'clipboard-vue'
// copy 复制指令
// copyText 复制函数
export default {
    name: 'ComponentName',
    directives: {
      // 注册指令
      copy
    },
    methods: {
      clickHandle() {
        copyText('copy content').then(e => {
          ...
        }).catch(e => {
          ...
        })
      }
    }
    ...
}

单独引入:

<!-- index.html -->
<script src="vue.min.js"></script>
<script src="dist/clipboard-vue.min.js"></script>
<script>
Vue.use(VClipboard)
new Vue({
...
})
</script>

复制没有特定按钮的文本

您可以使用我们的新方法来做到这一点 this.$copyText。请参阅 Example，其中我们将剪贴板指令替换为v-on指令。

现代浏览器有一些局限性，例如window.open没有用户交互就无法使用。因此，复制内容也有相同的限制！在使用前对其进行测试。确保您没有在任何异步方法中使用此方法。

使用此功能之前，请先阅读：此问题和本页。

在 bootstrap 的 modals 使用失效？

参阅 clipboardjs 文档, 使用container 选项如下所示:

let container = this.$refs.container
this.$copyText("Text to copy", container)

例子 1

// main.js
  Vue.use(VClipboard)
  new Vue({
    el: '#app',
    data: function () {
      return {
        message: '复制的内容'
      }
    },
    methods: {
      // 使用 v-copy 指令复制
      copySuccess() {
      // 复制成功回调
        console.log('copy success')
      },
      copyError() {
      // 复制失败回调
        console.log('copy error')
      },
      
      // 使用函数的方式复制
      copyFuction(text) {
        this.$copyText(text).then(e => {
        // 复制成功
          console.log('copy succ!')
        }).catch(e => {
        // 复制失败
          console.log('copy err!')
        })
      }
    }
  })

例子 2

<template>
    <div class="container">
      <input type="text" v-model="message">
      <button type="button" v-copy="message" v-copy:success="copySuccess" v-copy:error="copyError">使用指令复制!</button>
      <!-- 剪切的变相实现 -->
      <button type="button" v-copy="message" v-copy:success="cutSuccess">剪切!</button>
      <button type="button" @click="copyFuction(message)">使用copyText复制</button>
    </div>
</template>

<script>
  import { copy, copyText } from 'clipboard-vue'
  export default {
    name: 'Example',
    data() {
      return {
        message: 'Copy These Text'
      }
    },
    directives: {
      copy
    },
    methods: {
      // 使用 v-copy 指令复制
      copySuccess() {
      // 复制成功回调
        console.log('copy success')
      },
      copyError() {
      // 复制失败回调
        console.log('copy error')
      },
      
      // cut 剪切的实现
      cutSuccess() {
        this.message = ''
        console.log('cut success')
      },
      
      // 使用函数的方式复制
      copyFuction(text) {
        this.$copyText(text).then(e => {
        // 复制成功
          console.log('copy succ!')
        }).catch(e => {
        // 复制失败
          console.log('copy err!')
        })
      }
    }
  }
</script>

您可以使用 Vue实例 vm.$el 通过通常的遍历方法来获取DOM元素，例如:

this.$el.children[1].children[2].textContent

这将允许您访问组件的渲染内容，而不是组件本身。