vue项目如何实现复制粘贴剪切板功能--vue-clipboard2

vue项目如何实现复制粘贴剪切板功能–vue-clipboard2

1. 先安装

• npm install --save vue-clipboard2 or use dist/vue-clipboard.min.js

2. main.js添加

import Vue
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

3. 第一种方式

<template id="t">
  <div class="container">
    <input type="text" v-model="message">
    <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">Copy!</button>
  </div>
</template>
<script>
new Vue({
  el: '#app',
  template: '#t',
  data: function () {
    return {
      message: 'Copy These Text'
    }
  },
  methods: {
    onCopy: function (e) {
      alert('You just copied: ' + e.text)
    },
    onError: function (e) {
      alert('Failed to copy texts')
    }
  }
})
</script>
 

4 第二种方式 点击事件

<template id="t">
  <div class="container">
    <input type="text" v-model="message">
    <button type="button" @click="copyActiveCode($event,message )">Copy!</button>
  </div>
</template>
<script>
import Clipboard from 'clipboard'
 export default  {
  data: function () {
    return {
      message: 'Copy These Text'
    }
  },
  methods: {
    copyActiveCode(e, text) {
      const clipboard = new Clipboard(e.target, { text: () => text })
      clipboard.on('success', e => {
        this.$message({ type: 'success', message: '复制成功' })
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.onClick(e)
    },
  }
}
</script>