vue 剪贴板_带有Vue.js的轻量剪贴板库

vue 剪贴板

Vue.js剪贴板插件 (Vue.js Clipboard plugin)

(No dependencies, less than 2kb minified)

(无依赖项，最小不超过2kb)

安装 (Install)

npm install --save v-clipboard

import Vue       from 'vue'
import Clipboard from 'v-clipboard'

Vue.use(Clipboard)

用 (Use)

There are 2 ways of using this plugin:

有两种使用此插件的方法：

1. Using v-clipboard="mymodel" directive.

   使用v-clipboard="mymodel"指令。

When an element that contains v-clipboard directive is clicked, the value of mymodel will be copied into clipboard.

单击包含v-clipboard指令的元素时， mymodel的值将被复制到剪贴板。

1. Using this.$clipboard(value) function.

   使用this.$clipboard(value)函数。

This one is simple :-)

这个很简单:-)

例子 (Examples)

Option 1: Using template only.

选项1： 仅使用模板 。

<input v-model="foo">

<button v-clipboard="foo">
  Copy to clipboard
</button>

Option 2: Using javascript call.

选项2： 使用javascript调用 。

<button @click="copy">
  Copy to clipboard
</button>

methods: {
  copy () {
    this.$clipboard("Baaaaaaaaar")
  }
}

大事记 (Events)

<button v-clipboard="foo"
        @copy="clipboardSuccessHandler"      // Success event handler 
        @copy-error="clipboardErrorHandler"> // Error event handler
  Copy to clipboard
</button>

翻译自: https://vuejsexamples.com/a-clipboard-library-with-vue-js/

vue 剪贴板