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>