当前位置: 首页 > news >正文

vue中复制内容

vue中复制内容

  • vue2+vue-clipboard2
    • 依赖项
    • 在main.js引入
    • 使用
  • vue3+vue-clipboard3
    • 依赖项
    • 引入
    • 使用

更新于:2023-02-15

vue2+vue-clipboard2

依赖项

“vue”: “^2.6.11”
“vue-clipboard2”: “^0.3.1”

在main.js引入

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

使用

<button v-clipboard:copy="copyValue" v-clipboard:success="onCopy" v-clipboard:error="onError">
</button>
// 复制成功
onCopy(e) {this.$message.success("复制成功!");
},
// 复制失败
onError(e) {this.$message.error("复制失败!");
},

vue3+vue-clipboard3

依赖项

“vue”: “^3.2.45”
“vue-clipboard3”: “^2.0.0”

引入

import useClipboard from 'vue-clipboard3'

使用

<button @click="toCopy()">copy</button>
const toCopy = async () => {try {await toClipboard("Any text you like");console.log("Copied to clipboard");} catch (e) {console.error(e);}
};
http://www.lryc.cn/news/8097.html

相关文章:

  • MySQL CAST()函数用法
  • 【测试工程师面试】详细记录 自己的一次面试
  • Elasticsearch 安装(二)
  • Java基础:异常与错误(ExceptionError)
  • VAmPI:一个包含了OWASP Top10漏洞的REST API安全学习平台
  • springboot(6)之前端传递参数的方式 普通 集合 数组
  • redis分布式锁的演变过程
  • leaflet 修改popup的样式,个性化弹窗(069)
  • 注解ConfigurationProperties、EnableConfigurationProperties的用法
  • 自适应布局之淘宝无限适配+rem+微信rpx自适应
  • esxi不能识别不兼容网卡解决方案
  • Sizeof与Strlen的区别与联系
  • 力扣(LeetCode)413. 等差数列划分(2023.02.15)
  • 蓝桥杯刷题——基础篇(一)
  • Java基础知识快速盘点(三)
  • vscode编程小插件之Doxygen和Better Align
  • 指 针
  • 安卓小游戏:俄罗斯方块
  • NC113 验证IP地址
  • 珠宝企业如何利用私域实现业绩增长?
  • 回收站清空了还能找回来吗?回收站恢复的4个方法(最全)
  • 深度解析React性能优化API
  • 算法刷题打卡第91天:统计一个圆中点的数目
  • sentinel持久化方案
  • 软件项目进度安排与跟踪:关键路径的计算
  • mac m2 处理器 iterm2 sz rz 出错/无限重试
  • Mysql 与 磁盘交互的过程
  • Spring Cloud Gateway集成Nacos实现负载均衡
  • Excel图表教程_编程入门自学教程_菜鸟教程-免费教程分享
  • 2023最新的接口自动化测试面试题