v-clipboard

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

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