ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue项目中使用vue-clipboard2复制文本

2022-05-06 18:33:50  阅读:149  来源: 互联网

标签:vue clipboard 步骤 复制 clipboard2 message 文本


步骤一终端安装:

npm install --save vue-clipboard2

 步骤二main.js 配置:

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard);

 

步骤三页面使用:

<div>
<span>
H5页面链接:{{url}}
<span
style="color:#169BD5;cursor: pointer;margin-left:10px"
v-clipboard:copy="url"       //复制的变量,在这里面
v-clipboard:success="onCopyUrl"   //复制成功之后执行这个函数,可以在里面塞成功提示
v-clipboard:error="onErrorUrl"      //复制失败之后执行这个函数,可以在里面塞失败提示
>复制链接</span>
</span>
</div>

onCopyUrl() {
this.$message.success("复制成功!");
},
onErrorUrl() {
this.$message.error("复制失败!");
},

结论:反正比clipboard好用,操作步骤少,不搞心态

标签:vue,clipboard,步骤,复制,clipboard2,message,文本
来源: https://www.cnblogs.com/zhao-qin/p/16229942.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有