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>