作者:vhjkg | 来源:互联网 | 2020-09-02 14:52
本篇文章主要介绍了Html5剪切板功能的实现代码,内容挺不错的,现在分享给大家,也给大家做个参考。
最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴,然后发送到pc端,在电脑上进行打开。所有搜集找到了一下几种情况:
1.不带input输入框的原生js方法
这种情况适用于复制非输入框中的文本到剪切板
被复制的内容
点击复制
2.带输入框的原生js方法
用于复制input,textarea中的文本
复制输入框中内容
这种方法也可以进行延深,充当和方法1一样的用途。动态创建一个input输入框,将其内容置为想复制的内容,最后在将其移除或者隐藏即可。
3.js复制内容到剪贴板插件(clipboard.js)
clipboard.js官网 clipboard.js CDN地址
引用方式: NPM npm install --save clipboard
CDN
里面还有很多高级用法,可以前往官网逻辑更多细节 Clipboard官网
4. Vue框架提供的剪切板插件 vue-clipboard2
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetCOntainer= true // add this line
Vue.use(VueClipboard)
Sample1
Copy!
Sample2
Copy!
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!