Vue中封装复制粘贴插件Clipboard
2023-06-13 09:13:11 时间
Clipboard是最常用的复制粘贴插件,以下代码展示如何在Vue中封装和调用该插件。
1. 安装插件
npm install clipboard --save
2. 插件封装
import Vue from 'vue'
import Clipboard from 'clipboard'
function clipboardSuccess() {
Vue.prototype.$message({
message: '复制成功',
type: 'success',
duration: 1500
})
}
function clipboardError() {
Vue.prototype.$message({
message: '复制失败',
type: 'error'
})
}
export default function handleClipboard(event,text) {
const clipboard = new Clipboard(event.target, {
text: () => text
})
clipboard.on('success', () => {
clipboardSuccess()
clipboard.destroy()
})
clipboard.on('error', () => {
clipboardError()
clipboard.destroy()
})
clipboard.onClick(event)
}
3. 调用插件
<template>
<div>
<el-table
border
:data="tableData"
style="width:100%;"
:height="800">
<el-table-column prop="url" label="推广链接">
<template slot-scope="obj">
<!-- 复制接口返回的推广链接 -->
<el-button type="default" @click="copyLink($event,obj.row.url)">
复制链接
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import handleClipboard from "@/utils/clipboard";
export default {
data() {
return {
tableData:[
{id:1,url:"https://www.baidu.com/"}
],
};
},
methods: {
// 复制链接
copyLink(event,text){
handleClipboard(event,text);
},
}
};
</script>
相关文章
- Vue专题 05_详解vue生命周期的每个节点
- vue开发环境搭建(win7)
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- Vue学习之从入门到神经(两万字收藏篇)
- Springboot+vue项目旅游管理系统
- Vue实现文件上传和文件下载
- vue md5.js_VUE.js
- vue模态框组件封装
- vue封装时间类函数方法大全
- vue.js中实现阻止事件冒泡
- Vue 路由
- VUE组件封装_vue组件内部双向绑定
- vue封装组件思路_前端封装组件
- vue封装使用公共组件_vue组件封装思路
- vue分页组件
- vue父组件向子组件传值_vue什么是父子组件
- 今天讲vue讲解专栏里的VUE组件
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- Vue响应式依赖收集原理分析
- Vue CLI 2 脚手架 TabBar 组件封装
- vue.js客服系统实时聊天项目开发(十一)处理发送消息enter事件以及实现ctrl+enter换行
- vue.js客服系统实时聊天项目开发(十九)使用正则将消息格式替换为产品卡片信息
- Vue Ant Admin学习笔记,持续记录
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- Vue CLI
- Vue.js 简介与入门指南
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue如何连接Redis数据库(vue怎么连接Redis)