# vue-clipboard3

**Repository Path**: fla126/vue-clipboard3

## Basic Information

- **Project Name**: vue-clipboard3
- **Description**: 改写vue-clipboard2，使之能用于vue3
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 3
- **Created**: 2020-11-06
- **Last Updated**: 2024-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-clipboard3

A simple vuejs 3 binding for clipboard.js

## Install

`npm install --save https://gitee.com/fla126/vue-clipboard3.git` or use `dist/vue-clipboard.min.js` without webpack

## Usage

For vue-cli user:

```javascript
import VueClipboard from 'vue-clipboard3'

import { createApp } from 'vue';
const app = createApp();
app.use(VueClipboard)
```

For standalone usage:

```html
<script src="vue.min.js"></script>
<!-- must place this line after vue.js -->
<script src="dist/vue-clipboard.min.js"></script>
```

## I want to copy texts without a specific button!

Yes, you can do it by using our new method: `this.$copyText`. See
[sample2](https://github.com/Inndy/vue-clipboard2/blob/master/samples/sample2.html),
where we replace the clipboard directives with a v-on directive.

Modern browsers have some limitations like that you can't use `window.open` without a user interaction.
So there's the same restriction on copying things! Test it before you use it. Make sure you are not
using this method inside any async method.


## It doesn't work with bootstrap modals

See [clipboardjs](https://clipboardjs.com/#advanced-usage) document

```js
let container = this.$refs.container
this.$copyText("Text to copy", container)
```

Or you can let `vue-clipboard3` set `container` to current element by doing this:

```js
import { createApp } from 'vue';
import VueClipboard from 'vue-clipboard2'
const app = createApp();
VueClipboard.config.autoSetContainer = true // add this line
app.use(VueClipboard)
```

## Sample

```html
<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>
new Vue({
  el: '#app',
  template: '#t',
  data: function () {
    return {
      message: 'Copy These Text'
    }
  },
  methods: {
    onCopy: function (e) {
      alert('You just copied: ' + e.text)
    },
    onError: function (e) {
      alert('Failed to copy texts')
    }
  }
})
</script>
```

## Sample 2

```html
<div id="app"></div>

  <template id="t">
    <div class="container">
    <input type="text" v-model="message">
    <button type="button" @click="doCopy">Copy!</button>
    </div>
  </template>

  <script>
  new Vue({
    el: '#app',
    template: '#t',
    data: function () {
      return {
        message: 'Copy These Text'
      }
    },
    methods: {
      doCopy: function () {
        this.$copyText(this.message).then(function (e) {
          alert('Copied')
          console.log(e)
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      }
    }
  })
  </script>

```

You can use [your Vue instance ```vm.$el```](https://vuejs.org/v2/api/#vm-el) to get DOM elements via the usual traversal methods, e.g.:

```this.$el.children[1].children[2].textContent```

This will allow you to access the *rendered* content of your components, rather than the components themselves.

### 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.

### License

[MIT License](https://gitee.com/fla126/vue-clipboard3/master/LICENSE)