相思资源网 Design By www.200059.com
点击复制功能主要通过 clipboard.js 来实现
在vue中使用clipboard.js 时候发现一个问题，就是如果不是input或者button 按钮的话，则复制不成功，使用步骤如下：
1、引入clipboard.js，方法如下：
第一种直接npm安装：npm install clipboard --save
第二种：<script src="/UploadFiles/2021-04-02/clipboard.min.js">
2、在需要使用的组件中import
引用方法：import Clipboard from 'clipboard';
3、添加需要复制的内容
例如：<button class="tag-read" data-clipboard-text="我是可以复制的内容，请点击复制" @click="copy">立即阅读</button>
解析： data-clipboard-text 后边跟需要复制的内容
4、添加点击后的方法
copy() {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
}
以上这篇Vue实现点击按钮复制文本内容的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
Vue,点击按钮,复制文本
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无Vue实现点击按钮复制文本内容的例子的评论...