Vue组件封装之一键复制文本到剪贴板

npm install --save vue-clipboard2

import Vue from ‘vue‘
import VueClipboard from ‘vue-clipboard2‘

Vue.use(VueClipboard)

 1 <template>
 2   <div>    
 3     <slot name="content"></slot>
 4     <span class="copyContent" v-show="info" @click="$_copyInfo(info)">复制</span>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   name: ‘copyDialog‘,
11   props: {
12     info: {
13       type: [Number, String],
14       default: ‘‘,
15     },
16   },
17   methods: {
18     $_copyInfo(info) {
19       this.$copyText(info).then(() => {
20         this.$message.success(‘复制成功‘);
21       }, () => {
22         this.$message.error(‘复制失败‘);
23       });
24     },
25   },
26 };
27 </script>
28 
29 <style lang="less">
30   .copyContent {
31     cursor: pointer;
32     color: #357ef6;
33   }
34 </style>

import CopyDialog from ‘xxx/CopyDialog‘;

<CopyDialog info="information"></CopyDialog>