vue項目如何實現剪切板功能--vue-clipboard2

看了幾篇文章，可是隻感受這個比較言簡意賅

1。

先安裝

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

2。

若是是npm，檢查package.json是否安裝成功

3。

npm run dev  啓動一下。

4。

main.js添加

import Vue

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

5。

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