v-clipboard3
Easily copy to clipboard in Vue 3 (composition-api) using clipboard.js 📋
Install
npm install –save v-clipboard3
Usage
For vue-cli user:
import { createApp } from 'vue';
// If the directive scheme is not used, no global registration is required
import Clipboard from 'v-clipboard3';
const app = createApp(App);
app.use(Clipboard);
For standalone usage:
<script src="vue.min.js"></script>
<!-- must place this line after vue.js -->
<script src="dist/v-clipboard3.min.js"></script>
Sample
<div id="app"></div>
<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 lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App',
setup() {
const message = '8888';
function onCopy(params: any) {
console.log(params);
}
function onError(params: any) {
console.log(params);
}
return { onCopy, onError, message };
},
});
</script>
Sample 2
<div id="app"></div>
<template id="t">
<div class="container">
<input type="text" v-model="message" />
<button type="button" @click="handleCopy">Copy!</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useClipboard } from 'v-clipboard3';
export default defineComponent({
name: 'App',
setup() {
const message = '8888';
async function handleCopy() {
try {
await useClipboard(message);
alert('copy ok！');
} catch (error) {
console.log(error);
alert('copy error!');
}
},
return { handleCopy, message };
},
});
</script>
Contribution
PRs welcome, and issues as well! If you want any feature that we don’t have currently, please fire an issue for a feature request.