vue实现复制功能clipboard组件封装方法

最新推荐文章于 2024-06-14 09:46:41 发布

@Kacie

最新推荐文章于 2024-06-14 09:46:41 发布

阅读量533

点赞数

分类专栏： # Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Joye_7y/article/details/127884290

版权

clipboard.js Ant Design Vue 文本复制事件监听组件封装

关键词由CSDN通过智能技术生成

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

（一）npm 安装

npm install clipboard --save

（二）封装 clipboard.js 文件，在 man.js 中挂载

import Clipboard from 'clipboard'
import { message } from 'ant-design-vue'

export default function (e, text) {
  const clipboard = new Clipboard('info', { text: () => text }) // info 是输入框的 id
  clipboard.on('success', () => {
    message.success(`复制成功!`);
    clipboard.destroy();
  })
  clipboard.on('error', () => {
    message.error(`复制失败!`);
    clipboard.destroy();
  })
  clipboard.onClick(e);
}

（三）封装组件

<template>
  <div class="copy-input">
    <input readonly="readonly" id="info" :value="text" />
    <button class="btn" @click="onCopy($event,text)">
      <a-icon type="copy" />
    </button>
  </div>
</template>
<script>
export default {
  props: {
    text: {
      type: [String],
      default: null
    }
  },
  methods: {
    onCopy (e, text) {
      this.$clipboard(e, text);
    },
  }
}
</script>

（四）调用

<a-card class="card"
        :bordered="false">
  <div class="item"
       v-for="(item,i) in list"
       :key="i">
    <copy-input :text='item.text'></copy-input>
  </div>
</a-card>