使用 vue-clipboard2 复制文本

有时候,在你的Web应用程序中有一个小小的复制按钮是非常方便的。没有什么大问题,只是一个小小的按钮是正确的吗? 好吧,结果比你想象的要困难一些。复制文本需要创建或访问输入元素,设置选择,并执行复制命令。更糟糕的是,它只支持最近的浏览器。最常见的方式是使用 Clipboard.js,一个小型库,为你做这件事。

这是一个很好的和短的文章,因为Vue-clipboard2有一个非常简单的,毫无意义的API。

安装

假设您已经安装了 Vue 项目,请像其他任何 Yarn 或 NPM 包一样安装 vue-clipboard2。

1# Yarn
2$ yarn add vue-clipboard2
3# NPM
4$ npm install vue-clipboard2 --save

现在,像往常一样,在您的主要应用程序文件中启用插件。

 1[label src/main.js]
 2import Vue from 'vue';
 3import VueClipboard from 'vue-clipboard2'
 4import App from 'App.vue';
 5
 6Vue.use(VueClipboard);
 7
 8new Vue({
 9  el: '#app',
10  render: h => h(App)
11});

使用

现在,这只是在添加一个v-clipboard:复制指令到你的按钮的问题。

 1<template>
 2  <div>
 3    <p>Here, copy this thing: {{thingToCopy}}</p>
 4    <button v-clipboard:copy="thingToCopy"></button>
 5  </div>
 6</template>
 7
 8<script>
 9export default {
10  data() {
11    return {
12      thingToCopy: `A string that's not all that long or important. Sorry to disappoint.`
13    }
14  }
15}
16</script>

当然,你想能够向用户显示复制成功或失败时的反馈(特别是因为较旧的浏览器不使用这种方法),所以你可能应该在复制成功或失败时显示消息。

 1<template>
 2  <div>
 3    <p>Here, copy this thing: {{thingToCopy}}</p>
 4    <button
 5      v-clipboard:copy="thingToCopy"
 6      v-clipboard:success="handleCopyStatus(true)"
 7      v-clipboard:error="handleCopyStatus(false)"
 8    >
 9      Copy the thing!
10    </button>
11    <p v-if="copySucceeded === true">Copied!</p>
12    <p v-if="copySucceeded === false">Press CTRL+C to copy.</p>
13  </div>
14</template>
15
16<script>
17export default {
18  data() {
19    return {
20      copySucceeded: null
21      thingToCopy: `A string that's not all that long or important. Sorry to disappoint.`
22    }
23  },
24
25  methods: {
26    handleCopyStatus(status) {
27      this.copySucceeded = status
28    }
29  }
30}
31</script>

而且你有它! 非常简单的复制传输你的Vue.js应用程序,当你不能麻烦自己实现它。