124 lines
2.4 KiB
Markdown
124 lines
2.4 KiB
Markdown
# vue3-clipboard
|
|
|
|
|
|
|
|
|
|
[Clipboard.js](https://clipboardjs.com/) bindings for Vue 3.
|
|
|
|
This repository is a port of Inndy's
|
|
[vue-clipboard2](https://github.com/Inndy/vue-clipboard2) plugin for Vue3.
|
|
|
|
## Install
|
|
|
|
`npm install --save @soerenmartius/vue3-clipboard`
|
|
|
|
## Usage
|
|
|
|
### Import the `v-clipboard` directive globally
|
|
|
|
**`src/main.ts`**
|
|
|
|
```typescript
|
|
import { createApp } from 'vue'
|
|
import App from './App.vue'
|
|
import { VueClipboard } from '@soerenmartius/vue3-clipboard'
|
|
|
|
createApp(App).use(VueClipboard).mount('#app')
|
|
|
|
```
|
|
|
|
### Import the `v-clipboard` directive for a specific component
|
|
|
|
## Examples
|
|
|
|
### Apply the v-clipboard directive to an element
|
|
|
|
```typescript
|
|
<template>
|
|
<input v-model="value" />
|
|
<button v-clipboard="value">Copy</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const value = ref('lorem')
|
|
|
|
return { value }
|
|
},
|
|
})
|
|
</script>
|
|
```
|
|
|
|
### Copy value of an input, and handle events separately.
|
|
|
|
```typescript
|
|
<template>
|
|
<input v-model="value" />
|
|
<button
|
|
v-clipboard:copy="value"
|
|
v-clipboard:success="onSuccess"
|
|
v-clipboard:error="onError"
|
|
>
|
|
Copy
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const value = ref('lorem')
|
|
|
|
const onSuccess = () => {
|
|
console.log('success')
|
|
}
|
|
|
|
const onError = () => {
|
|
console.log('error')
|
|
}
|
|
|
|
return { value, onSuccess, onError }
|
|
},
|
|
})
|
|
</script>
|
|
```
|
|
|
|
### Standalone usage of the toClipboard function
|
|
|
|
```typescript
|
|
<template>
|
|
<input v-model="value" />
|
|
<button @click="toClipboard(value)">Copy</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue'
|
|
|
|
import { toClipboard } from '@soerenmartius/vue3-clipboard'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const value = ref('lorem')
|
|
|
|
return { value, toClipboard }
|
|
},
|
|
})
|
|
</script>
|
|
```
|
|
|
|
## Contributing
|
|
|
|
Contributions are always encouraged and welcome!
|
|
For the process of accepting changes, we use
|
|
[Pull Requests](https://github.com/soerenmartius/vue3-clipboard/pulls).
|
|
For feature requests please fill an
|
|
[issue](https://github.com/soerenmartius/vue3-clipboard/issues/new).
|
|
|
|
## License
|
|
|
|
[](https://opensource.org/licenses/MIT)
|