Html5剪切板功能的实现(2)-木庄网络博客

里面还有很多高级用法,可以前往官网逻辑更多细节 Clipboard官网

4. Vue框架提供的剪切板插件 vue-clipboard2

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
  
VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)

Sample1

<p id="app"></p>     
<template id="t">
  <p 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>
  </p>
</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>

Sample2

<p id="app"></p>     
<template id="t">
  <p class="container">
  <input type="text" v-model="message">
  <button type="button" @click="doCopy">Copy!</button>
  </p>
</template>
 
<script>
new Vue({
  el: '#app',
  template: '#t',
  data: function () {
    return {
      message: 'Copy These Text'
    }
  },
  methods: {
    doCopy: function () {
      this.$copyText(this.message).then(function (e) {
        alert('Copied')
        console.log(e)
      }, function (e) {
        alert('Can not copy')
        console.log(e)
      })
    }
  }
})
</script>