Vue組件封裝之一鍵復制文本到剪貼板

前言

　　為了提高組件的復用性，所以利用插件vue-clipboard2，封裝組件CopyDialog以實現一鍵復制文本到剪貼板的功能。

安裝

npm install --save vue-clipboard2

插件的使用（引入）

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

組件的封裝 copyDialog.vue

<template>
  <div>    
    <slot name="content"></slot>
    <span class="copyContent" v-show="info" @click="$_copyInfo(info)">復制</span>
  </div>
</template>

<script>
export default {
  name: 'copyDialog',
  props: {
    info: {
      type: [Number, String],
      default: '',
    },
  },
  methods: {
    $_copyInfo(info) {
      this.$copyText(info).then(() => {
        this.$message.success('復制成功');
      }, () => {
        this.$message.error('復制失敗');
      });
    },
  },
};
</script>

<style lang="less">
  .copyContent {
    cursor: pointer;
    color: #357ef6;
  }
</style>

　　參數的解釋：info 要復制的文本，類型是String/Number

組件的使用

import CopyDialog from 'xxx/CopyDialog';

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