vue 中使用 clipboard 复制内容第一次点击两次才能成功问题修改

项目中需要实现复制的功能，采用clipboard实现,clipboard.js的官网网址：http://www.clipboardjs.cn/

使用步骤：

一、安装模块

npm install clipboard --save 或者 cnpm install clipboard --save

二、使用

开始我是写在方法里面实例化，导致第一次点击两次才复制成功，因为进入页面之后 clipboard 没有创建实例，再点击复制之后才开始创建实例，创建实例之后并没有完成复制

三、解决办法

在 mounted 方法里创建 clipboard 实例

代码如下（直接复制代码。放到vue项目里面即可）

<template><div class="flex-box-column-center pdf"><img src="~@/assets/img/common/pdfLogo.png" alt=""><p class="f38 color-333">会议发票.pdf</p><p class="f26 color-333 pdf-href">{{pdfUrl}}</p><pclass="pdf-btn flex-box-column-center"@click.stop.prevent="copy($event)"ref='copyBtn'>复制发票地址</p><p class="f26 color-999">复制发票地址在浏览器中打开并下载发票</p></div>
</template>
<script>
import Clipboard from 'clipboard'
export default {data () {return {pdfUrl: sessionStorage.getItem('pdfUrl'), // pdf的网址clipboardExample: null // clipboard的实例}},mounted () {this.clipboard = new Clipboard(this.$refs.copyBtn, { text: () => this.pdfUrl });},methods: {copy(e) {this.clipboard.on('success', e => {this.$dialog.toast({mes: '复制成功',timeout: 1500,icon: 'success'});});this.clipboard.on('error', e => {this.$dialog.toast({mes: '复制失败',timeout: 1500,icon: 'error'});});}}
}
</script>
<style scoped>
.pdf{img{width: 106px;margin: 200px auto 30px;}.pdf-href{margin: 60px auto 20px;padding: 0 80px;word-break: break-all;text-align: center;}.pdf-btn{width: 294px;height: 80px;font-size: 32px;color: #fff;border-radius: 40px;background: #1b82d2;margin-top: 60px;box-shadow: 0.05rem 0.05rem 0.1rem #cde4f5;cursor: pointer;margin: 60px auto 40px;}
}
</style>

vue 中使用 clipboard 复制内容第一次点击两次才能成功问题修改相关推荐

VUE 使用插件vue-clipboard2复制内容至剪切板(两种使用方法)
安装 npm install --save vue-clipboard2 main.js import Vue from 'vue' import VueClipboard from 'vue-cli ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
Vue中如何根据svg内容显示图片
概述在写前端项目中,我们免不了需要在页面上显示图片,有的是静态图片,需要直接访问项目内的文件:有的需要从后端接口动态获取图片信息,再在页面上显示. 因为svg图片有:矢量图形,不受像素影响:SVG的 ...
拼接的html点击事情不触发,关于在vue中拼接html的问题，点击事件无法执行
首先是在普通文档(也就是单个html文件中进行测试,能够正常执行) 普通情况下的结果,拼接的结果能够正常渲染并且控制台有输出: 但是在vue环境之下就会出错,点击事件并没有反应, js部分: for ...
vue中下载excel的使用，后端链接两种情况，一个是链接，一个是文件流
vue中下载excel使用一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {this.time ...
vue中读取本地文件内容
其实就是使用 FileReader对象,h5提供的异步api,可以读取文件中的数据. <input @change="uploadCode($event)" type=&qu ...
微信html5复制剪切板,微信h5实现复制内容到剪贴板，两种方法
先介绍第一种,这种方法对ios有一些不兼容,不过也看运气先写HTML内容微信:22 复制 JS代码首先引入jq $(".copy")[0].onclick = functio ...
vue中监听页面，禁止点击浏览器返回按钮返回
问题某个页面限制用户点击浏览器返回按钮返回解决方法在该页面的vue实例中添加mounted destroyed钩子,并且添加goBack方法加以限制 mounted () {if (window ...
微信h5实现复制内容到剪贴板，两种方法
先介绍第一种,这种方法对ios有一些不兼容,不过也看运气
VUE 实现复制内容到剪贴板的方法
VUE 复制内容至剪切板(两种使用方法) 复制内容至剪切板使用的是插件'vue-clipboard2',通过官方文档会发现共有两种使用方式. 第一种方式与大多数文章类似,只粘贴代码: <temp ...

vue 中使用 clipboard 复制内容第一次点击两次才能成功问题修改

vue 中使用 clipboard 复制内容第一次点击两次才能成功问题修改相关推荐

最新文章

热门文章

vue 中 使用 clipboard 复制内容第一次点击两次才能成功问题修改

vue 中 使用 clipboard 复制内容第一次点击两次才能成功问题修改相关推荐

最新文章

热门文章

vue 中使用 clipboard 复制内容第一次点击两次才能成功问题修改

vue 中使用 clipboard 复制内容第一次点击两次才能成功问题修改相关推荐