vue2 使用clipboard封装一个复制小组件

复制按钮是一个很使用的小功能，vue2中有第三方插件clipboard可以使用~

组件设计思路：一个小图标，可鼠标悬浮提示，点击即复制，并提示复制结果~ 组件起个名字copyOpt~

具体实现过程如下~

安装下载

使用npm安装clipboard

npm install clipboard --save

引用

具体页面中引用 import Clipboard from 'clipboard'

效果展示

可以放在页面中想使用的地方，展示效果

引用的组件代码

import copyOpt from '@/components/copyOpt'

components: { copyOpt },

表格列中用渲染方法定义使用

// 渲染自定义组件
renderDom.push(
  h(
    copyOpt,
    {
      props: {
        copyContent: cellValue,
        suspendedTitle: '点击复制文件证据编号'
      }
    }
  )
)

组件代码

<template>
  <el-tooltip effect="dark" :content="suspendedTitle" placement="top-start">
    <img v-show="copyContent" :src="imgSrc" class="opt-copy" :data-clipboard-text="copyContent" @click="handleCopy">
  </el-tooltip>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'SvgIcon',
  props: {
    /**
     * 需要复制的内容
     */
    copyContent: {
      type: String,
      default: () => ''
    },
    /**
     * 鼠标移到复制图标上，展示的内容
     */
    suspendedTitle: {
      type: String,
      default: () => '点击复制到剪切板'
    }
  },
  data() {
    return {
      imgSrc: require('@/assets/copy.png')
    }
  },
  computed: {

  },
  methods: {
    /**
     * 调用保存方法
     */
    handleCopy() {
      const clipboard = new Clipboard('.opt-copy')
      clipboard.on('success', (e) => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        const arr = ['', '复制失败,请手动复制到剪切板', '']
        arr.push(e.text)
        const str = arr.join(' <br/> ')
        this.$message({
          duration: 0,
          type: 'warning',
          showClose: true,
          dangerouslyUseHTMLString: true,
          message: str
        })
        clipboard.destroy()
      })
    }
  }
}
</script>

<style scoped>
.opt-copy {
  margin-left: 4px;
  cursor: pointer;
}
</style>