前言:前段时间项目业务涉及到一个分享链接的功能,然后需要一键复制功能,本来想通过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)
},
创作不易 三联支持!!!