vue2-clipboard

A simple vue 2 clipboard directive and $clipboard method

Install

npm install --save vue2-clipboard

Usage

For vue-cli user:

import Vue from 'vue'
import VueClipboard from 'vue2-clipboard'

Vue.use(VueClipboard)

For standalone usage:

<script src="vue.min.js"></script>
<!-- must place this line after vue.js -->
<script src="dist/vue2-clipboard.umd.min.js"></script>

Sample

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

<template id="tpl">
    <div @click="clickHandler1">Click 1</div>
    <div
      @click="clickHandler2"
      v-clipboard="text"
      v-clipboard:success="clipboardSuccessHandler"
      v-clipboard:error="clipboardErrorHandler"
    >
      Click 2
    </div>
</template>

<script>
new Vue({
  el: '#app',
  template: '#tpl',
  data() {
    return {
      text: "I LOVE vue2-clipboard directive!!!"
    };
  },
  methods: {
    clickHandler1() {
      this.$clipboard(this.text); // this.$clipboard copy any String/Array/Object you want
    },
    clickHandler2() {},
    clipboardSuccessHandler() {
      console.log("clipboardSuccessHandler");
    },
    clipboardErrorHandler() {
      console.log("clipboardErrorHandler");
    }
  }
})
</script>

License

MIT