博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
H5剪切板功能
阅读量:6256 次
发布时间:2019-06-22

本文共 1009 字,大约阅读时间需要 3 分钟。

    
最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴,然后发送到pc端,在电脑上进行打开。所有搜集找到了一下几种情况

1.不带input输入框的原生js方法

这种情况适用于复制非输入框中的文本到剪切板

被复制的内容

2.带输入框的原生js方法

用于复制input,textarea中的文本
 
    这种方法也可以进行延深,充当和方法1一样的用途。动态创建一个input输入框,将其内容置为想复制的内容,最后在将其移除或者隐藏即可。

3.js复制内容到剪贴板插件(clipboard.js)

引用方式:

  1. NPM   npm install --save clipboard
  2. CDN   <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>
里面还有很多高级用法,可以前往官网逻辑更多细节

4. Vue框架提供的剪切板插件    

import Vue from 'vue'    import VueClipboard from 'vue-clipboard2'         VueClipboard.config.autoSetContainer = true // add this line    Vue.use(VueClipboard)

Sample1

Sample2

转载地址:http://qmnsa.baihongyu.com/

你可能感兴趣的文章
浅谈MySQL 数据库性能优化
查看>>
《UNIX/Linux 系统管理技术手册(第四版)》——1.10 其他的权威文档
查看>>
灵动空间 创享生活
查看>>
《UNIX网络编程 卷1:套接字联网API(第3版)》——8.6 UDP回射客户程序:dg_cli函数...
查看>>
不要将时间浪费到编写完美代码上
查看>>
《算法基础:打开算法之门》一3.4 归并排序
查看>>
高德开放平台开放源代码 鼓励开发者创新
查看>>
《高并发Oracle数据库系统的架构与设计》一2.5 索引维护
查看>>
Firefox 是 Pwn2own 2014 上攻陷次数最多的浏览器
查看>>
阿里感悟(十八)- 应届生Review
查看>>
话说模式匹配(5) for表达式中的模式匹配
查看>>
《锋利的SQL(第2版)》——1.7 常用函数
查看>>
jquery中hover()的用法。简单粗暴
查看>>
线程管理(六)等待线程的终结
查看>>
spring boot集成mongodb最简单版
查看>>
DELL EqualLogic PS存储数据恢复全过程整理
查看>>
《Node.js入门经典》一2.3 安装模块
查看>>
《Java 开发从入门到精通》—— 2.5 技术解惑
查看>>
Linux 性能诊断 perf使用指南
查看>>
实操分享:看看小白我如何第一次搭建阿里云windows服务器(Tomcat+Mysql)
查看>>