【Vue 插件篇】粘贴板 clipboard

在前端项目开发过程中，文本的复制粘贴功能经常会被用到。如上图，将列表中的链接地址进行复制，到浏览器中粘贴打开。再或者一些网站上，通过按钮粘贴输入框中的代码的功能等等。今天，我们就来讲一下，Vue 项目中用于复制的一个插件 clipboard。

clipboard官网

clipboard 安装

npm install clipboard --save

这个项目中用的方式

封装到全局工具中 clipboard.js

import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess() {
  Vue.prototype.$message.success('复制成功')
}

function clipboardError() {
  Vue.prototype.$message.error('复制失败')
}

export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    clipboardSuccess()
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    clipboardError()
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

组件中使用

# template 模板代码

    


  
# 脚本代码
import clip from '@/utils/clipboard'
handleCopy(text, event) {
  clip(text, event)
}

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客地址

网上的另外一种指令用法（未验证）

安装同上，引入同上

import Clipboard from 'clipboard'

三个指令：

• v-clipboard:copy - copy 要复制的内容 cut 要剪贴的内容
• v-clipboard:success 复制或剪贴成功的回调函数
• v-clipboard:error 复制或剪贴失败的回调函数

代码：

  <a-modal
    v-model="visible"
    title="链接"
    @ok="handleOk"
  >
    <template #footer>
      <a-button key="submit" type="primary" @click="handleOk">好的</a-button>
    </template>
    <p>分享链接可以邀请其他人</p>
    <p>
      <a-tag color="blue">{{ roomShareUrl }}</a-tag>
      <a class="fs12" v-clipboard:copy="roomShareUrl" v-clipboard:success="onCopy">复制
      </a>
    </p>
  </a-modal>

  data() {
    return {
      visible: false,
      roomShareUrl: ''
    }
  }, 
 methods: {
    // 初始化方法
    show(roomId) {
      roomShare(roomId).then(res => {
        if (res.success) {
          this.visible = true
          console.log(res.data)
          this.roomShareUrl = res.data
        }
      })
    },
    handleOk() {
      this.roomShareUrl = ''
      this.visible = false
    },
    onCopy: function(e) {
      message.success('复制成功')
    }
  }