有时候,在你的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应用程序,当你不能麻烦自己实现它。