MaybeQHL/v-clipboard

A Compoent for Vue 2 & 3 base on clipboard.js

v-clipboard

A Compoent for Vue 2 & 3 base on clipboard.js.

If you think it's good , give me a star.Thanks.

Online Demo

Demo

Install

Vue3

yarn add @maybecode/v-clipboard

Vue2

yarn add @maybecode/v-clipboard @vue/composition-api

Register

Vue3

import { createApp } from 'vue';
import VClipboard from '@maybecode/v-clipboard'
import '@maybecode/v-clipboard/dist-lib/style.css'

const app = createApp();

app.use(VClipboard);

Vue2

import Vue from 'vue';
import VClipboard from '@maybecode/v-clipboard'
import '@maybecode/v-clipboard/dist-lib/style.css'

Vue.use(VClipboard);

Basic Usage

<template>
 <v-clipboard text="text 1" @success="onSuccess">text 1</v-clipboard>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import VClipboard, { SuccessCallback, Config } from '@maybecode/v-clipboard'
import '@maybecode/v-clipboard/dist-lib/style.css'

const config = ref<Config>({})

const clipboard = ref<VClipboard>();

const clickCopy = () => {
  clipboard.value?.clickCopy();
}
const onSuccess: SuccessCallback = (e,c) => {
  alert(`Copy ${e.text} succeeded!`);
}

Props

name	type	default	remark
config	{}		clipboard.jsOptions
btnText	string	Copy	copy button text

Events

name	type
success	(e: Event,cbjs: ClipboardJS) => void
error	(e: Event,cbjs: ClipboardJS) => void

Slots

name	explain
default	content
trigger	custom trigger element

Ref

name	explain	params
clickCopy	Click to trigger copy	-

Browsers support

Edge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

License

MIT