vue项目如何实现剪切板功能--vue-clipboard2

看了几篇文章,可是只感受这个比较言简意赅html

1。vue

先安装vue-cli

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

2。json

若是是npm,检查package.json是否安装成功app

3。dom

npm run dev  启动一下。curl

4。url

main.js添加spa

import Vue

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

5。

<template id="t">
  <div class="container">
    <input type="textv-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',
  datafunction ({
    return {
      message'Copy These Text'
    }
  },
  methods{
    onCopyfunction (e{
      alert('You just copied: e.text)
    },
    onErrorfunction (e{
      alert('Failed to copy texts')
    }
  }
})
</script>