vue 如何实现复制到粘帖板

vue-clipboard2 

A simple vuejs 2 binding for clipboard.js

Install

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

Usage

For vue-cli user:

   
   

    
    import Vue
   
   
   
   

    
    import VueClipboard from 'vue-clipboard2'
   
   
   
   

    
     
   
   
   
   

    
    Vue.use(VueClipboard)
   
   

For standalone usage:

   
   

    
    <script src="vue.min.js"></script>
   
   
   
   

    
    <!-- must place this line after vue.js -->
   
   
   
   

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

Sample

   
   

    
    <div id="app"></div>
   
   
   
   

    
     
   
   
   
   

    
    <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>