您现在的位置是:网站首页> 编程资料编程资料

Html5剪切板功能的实现代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

2023-10-16 290人已围观

简介 本篇文章主要介绍了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

Sample2

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关内容

-六神源码网