vue中使用clipboard实现点击复制功能

1、在Vue中引入clipboard

npm install clipboard --save

2、在需要的组件中引入

import Clipboard from 'clipboard';

3、页面中使用

<view class="relation"><span>联系我们</span><span id="copy" class="mlr">{{copyEmail}}</span>// :data-clipboard-text="copyEmail" //     data-clipboard-text放置需要复制的内容//     copyEmail在data中定义// data-clipboard-action="copy"  操作方式为复制// data-clipboard-target="#copy"  复制的目标，指向#copy<a class="copy-email" :data-clipboard-text="copyEmail" data-clipboard-action="copy" data-clipboard-target="#copy" @click="copy()">点击复制邮箱</a>
</view>

copy(){let that = this;let clipboard = new Clipboard(".copy-email");clipboard.on('success', e => {that.$message.success("复制成功！")clipboard.destroy()})clipboard.on('error', e => {that.$message.error("复制失败，请手动复制！")clipboard.destroy()})
},

vue中使用clipboard实现点击复制功能相关推荐

vue中防止按钮重复点击提交的方法
vue中防止按钮重复点击提交的方法 vue中防止按钮重复点击提交的方法一.自定义全局指令二.自定义局部指令三.动态控制disabled属性 vue中防止按钮重复点击提交的方法经常会遇到的一个问 ...
Vue中实现页面上点击按钮下载文件(exe)
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面搭建起来的Vue前端项目中 ...
vue中实现音乐图标点击播放/暂停的组件
vue子组件(css定位代码自行修改),在componets文件夹下新建bgmusic.vue文件: <template><div class="music"&g ...
vue中触发按钮的点击事件
主动触发点击事件由vue代码触发点击事件,实现的效果是:点击按钮,触发输入框点击事件,从而实现选择文件. 示例如下: <template><input type="fi ...
vue中v-for循环选中点击的元素并对该元素添加样式
html: <div v-for = "(item,index) in items" :class = "active == index ? 'addclass' ...
vue中echarts纵轴添加点击事件
直接上代码 initChart () {this.ganttChart = echarts.init(document.getElementById('gantt-chart'))const _sel ...
vue中失焦事件和点击事件冲突，如何解决？
①可以通过添加setTimeout来实现(但是有时候会出问题,会失效) //设备号失焦事件blurInput(){setTimeout(() => {this.isShowAuto = fals ...
vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变, ...
vue中实现点击复制文本内容之clipboard
项目中有些场景需要点击复制某段内容并粘贴的功能如点击复制名称,订单号,文章段落等需要先安装引入使用对应的方法 1.安装 npm install clipboard --save 2.引入直接 ...
Vue 实现点击复制功能概述
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. 在实际项目开发中,用到复制的地方还挺多,如一些链接过长不显示,点击一下载复制到剪切板或者是将复制的内容自动填到其他组件中,这个复制功能 ...

vue中使用clipboard实现点击复制功能

vue中使用clipboard实现点击复制功能相关推荐

最新文章

热门文章