vue-reactive-clipboard

A minisize vue2/3 reactive clipboard

Install

Install with yarn:

$ yarn add vue-reactive-clipboard

Install with npm:

$ npm i vue-reactive-clipboard --save

Usage

Vue3

<template>
  <p @click="copy(content)"> {{ content }} </p>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { useClipboard } from 'vue-reactive-clipboard'
const { text, copy } = useClipboard()

const content = ref('click me to copy!')
watchEffect(() => {
  if (text.value) {
    console.log('copy successed: ' + text.value)
  }
})
</script>

Vue2

Install @vue/composition-api as a dependency.

<template>
  <div>
    <p @click="copy(content)"> {{ content }} </p>
  </div>
</template>

<script>
import { ref, watchEffect, defineComponent } from '@vue/composition-api'
import { useClipboard } from 'vue-reactive-clipboard'
export default defineComponent({
  setup () {
    const { text, copy } = useClipboard()
    const content = ref('click me to copy!')
    watchEffect(() => {
      if (text.value) {
        console.log('copy successed: ' + text.value)
      }
    })
    return {
      content,
      copy
    }
  }
})
</script>