在前端项目开发过程中,文本的复制粘贴功能经常会被用到。如上图,将列表中的链接地址进行复制,到浏览器中粘贴打开。再或者一些网站上,通过按钮粘贴输入框中的代码的功能等等。今天,我们就来讲一下,Vue 项目中用于复制的一个插件 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 模板代码
<el-table-column prop="webUrl" label="H5链接" width="300">
<template slot-scope="scope">
<el-link
:underline="false"
type="primary"
@click="handleCopy(scope.row.webUrl, $event)"
>{
{ scope.row.webUrl }}
</el-link>
</template>
</el-table-column>
# 脚本代码
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('复制成功')
}
}