Javascript Vue

A minisize vue2/3 reactive clipboard1 min read

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>

GitHub

https://github.com/cinob/vue-reactive-clipboard

React Admin Templates and Themes

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest