Vue-clipboard（剪贴板）使用

康康康快看看

于 2024-09-06 13:13:56 发布

阅读量870

点赞数 20

CC 4.0 BY-SA版权

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Zxk912/article/details/141954489

前言：前段时间项目业务涉及到一个分享链接的功能，然后需要一键复制功能，本来想通过DOM操作方法去做，无意之间想起来clipboard插件，所以今天分享下clipboard插件

clipboard:npm地址

首先安装：

npm install clipboard --save

然后在main全局引入：

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

页面使用：

 <el-button
     v-clipboard:copy="scope.row.projectUrl"  //要复制的内容
     v-clipboard:success="handleCopy"  //成功的回调方法
     v-loading.fullscreen.body="fullscreenLoading" //加载的动画效果
     icon="el-icon-document-copy"
     size="mini
     title="复制"
     type="primary"
 ></el-button>

成功的回调方法：

handleCopy () {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
        this.$message({
          message: '复制成功，然后浏览器粘贴访问',
          type: 'success'
        })
      }, 1000)
    },