vue 适配微信浏览器 实现点击按钮复制文本 clipboard
之前写的复制功能发现用微信打开的浏览器页面不生效,所以又换了种方法实现
首先,安装 clipboard
npm install clipboard --save
然后,引入 clipboard
import Clipboard from 'clipboard'
对被点击的文本或按钮绑定动态变量 id="btn" :data-clipboard-text="scope.row.courseNo"
<!-- 这里scope.row.courseNo是我要复制的内容 -->
<template slot-scope="scope"><span id="btn" :data-clipboard-text="scope.row.courseNo" @click="copyValue()">{{ scope.row.courseNo }}</span></template>
方法
copyValue() {const Message = this.$messagevar clipBoard = new Clipboard('#btn')clipBoard.on('success', function() {clipBoard.destroy() // 销毁上一次的复制内容clipBoard = new Clipboard('#btn')Message.success('复制成功')})clipBoard.on('error', function() {Message.info('复制失败,请手动复制')})
},
这样就ok啦~
vue 适配微信浏览器 实现点击按钮复制文本 clipboard相关推荐
- vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子 点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
- 点击按钮复制文本框内容
点击按钮复制文本框内容 复制文本框内容的方法如下: function Copy(){var e=document.getElementById("content");//对象是co ...
- JS复制文本到粘贴板,前端H5移动端点击按钮复制文本到粘贴板。
最近做手机端H5网页里面有个活动:点击按钮复制邀请码.查过一些方法,在电脑端可以复制粘贴,一放在手机上面打开网页就不能复制粘贴了. 直接进入正题 使用开源项目 clipboard.js, 官网:点击打 ...
- html 复制文本按钮,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 ...
- js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- html5点击复制文本框内容,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 ...
- 实现点击按钮复制文本(Clipboard包)
操作如下: npm install clipboard --save import Clipboard from 'clipboard'; Vue.use(VueClipboard) <temp ...
- 实现点击按钮 复制文本内容
一.原生方法 1.结构 <li><span>运单号码:</span><b id="waybill_number">{$order-& ...
- 点击按钮复制文本框中的内容
下面是自己整理的简单例子 <!DOCTYPE html> <html lang="en"> <head> <meta ...
最新文章
- 基础、数据、开发、部署,AI 时代企业的全方位升级
- C语言宏定义、宏替换
- 安川交流伺服电机的驱动
- linux python syslog,Centos下python 对syslog重写进行日志记录
- ios7 uuid的获取方法
- Debian/Ubuntu下安装Apache的Mod_Rewrite模块的步骤分享
- Adobe air 安装软件解析
- Lecture 9 Random built Binary Search Trees BSTs
- RedHat系列软件管理(第二版) --二进制软件包管理
- 0057-简单的累加
- 4月第一个惊喜:iPhone 9现已直接上架苹果中国官网?
- Leetcode每日一题:147.insertion-sort-list(对链表进行插入排序)
- labelImg(pyqt4 )出现错误(segmentation fault(core dumped) )
- 《马克思主义哲学原理》考点知识串讲-自考
- [leetcode] (周赛)869. 重新排序得到 2 的幂
- CVE-2022-21999 Windows Print Spooler(打印服务)特权提升漏洞
- 统计推断——假设检验中 p 值的含义具体是什么?
- BeanUtils.populate 的使用
- arm-linux平台的锐捷认证工具Mentohust移植
- java运算符(算数运算符、三目运算符、位运算符)