h5在手机端实现简单复制

<a href="https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js">下载clipborrdjs</a>　

下载地址：https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js

html中：

　　<a href="javascript:;" @click="copyClick" class="copy" data-clipboard-text="要让复制的内容" data-clipboard-action="copy" >点击复制ID</a>

</div>

在js中:

new Vue({
　　el: '#app',
　　data: function () {
　　　　return {
　　　　}
　　},
　　methods: {
　　　　copyClick: function(){
　　　　　　var clipboard = new Clipboard("#copyBtn");
　　　　　　clipboard.on('success', function(e) {
　　　　　　　　MINT.Toast("复制成功:"+e.text);
　　　　　　});
　　　　　　clipboard.on('error', function(e) {
　　　　　　　　MINT.Toast("请重试");
　　　　　　});
　　　　}
　　},
　　created: function(){
　　　　var that = this;
　　})

如此简单的就实现复制了

在vue中使用

1. 引入clipboard.js

　　npm install clipboard --save

2. 在需要使用的组件中import

import Clipboard from 'clipboard';

3. 添加需要复制的内容　　

4. methods中写入copy方法

　　copy() { 　　

　　　　let that = this;
　　　　let clipboard = new Clipboard('#copyBtn')
　　　　clipboard.on('success', e => {
　　　　　　that.$toast("复制成功:"+e.text)
　　　　　　clipboard.destroy()
　　　　})
　　　　clipboard.on('error', e => {
　　　　　　console.log('该浏览器不支持自动复制')
　　　　　　clipboard.destroy()
　　　　})

}

转载于:https://www.cnblogs.com/sklhtml/p/9361197.html

h5在手机端实现简单复制相关推荐

apkrenamer_不怕应用名字乱在手机端轻松给APK重命名
很多Android手机用户都喜欢收集APK安装包并保存在存储卡内.可是,网上下载的APK大都以英文或乱码命名,管理起来好不麻烦.那么,无需借助PC,我们能否在手机端直接简单且批量地给APK改名吗? 混 ...
h5端登录是什么意思_如何让电脑端配置的host在手机端生效（MVVM项目开发测试）...
如何让电脑端配置的host在手机端生效 1.电脑上安装node版本不要太老下载地址: 安装完成后验证命令 :node -v 2.安装全局whistle 安装命令:npm install whistl ...
h5 调起相机_Html5在手机端调用相机的方法实现
input调用设备录像,相机等- HTML5官方文档解释:capture属性用于调用设备的摄像头或麦克风. 当accept="audio/或video/"时capture只有两种值 ...
基于 TensorFlow 在手机端实现文档检测
手机端运行卷积神经网络的一次实践 - 基于 TensorFlow 和 OpenCV 实现文档检测功能 1. 前言本文不是神经网络或机器学习的入门教学,而是通过一个真实的产品案例,展示了在手机客户端上 ...
HBulider 连接手机，在手机端展示
连接手机端一般有俩种方法: 1. 真机调试(app) 2. 设置外部web 服务器调用url(h5页面) 1. 真机调试(app) 这个方法比较常用,步骤: 1.插上数据线 2.手机打开开发者模式( ...
HTML5在手机端如何全屏展示
这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧最近做项目,遇到一个问题 ...
解决uni-app视频组件h5手机端全屏后无法横屏播放的问题
最近接到需求要做一个内嵌到手机游戏里的web视频播放器,一个视频列表加一个播放页面. 很简单,一会就做好了. 但是遇到了一个问题却困扰了很久,uni-app的video组件在手机端全屏播放视频时居然无 ...
当心啊！仅仅50行Python，就可以在手机端看小姐姐的电脑桌面！
看上心意的小姐姐,想看她平时都浏览什么网页,如何才能看她的桌面呢,都说Python很厉害,这次我们做一个利用移动端访问电脑来查看电脑的界面的神器! 不知道大家以前有没有做过这方面的东西呢?也许大家听起 ...
KindEditor解决上传视频不能在手机端显示的问题
KindEditor自带的上传视频生成的HTML代码为<embed>,在手机端并不支持.于是可以自己在控件里增加生成video标签相关代码. 参考https://www.jianshu.c ...

h5在手机端实现简单复制

h5在手机端实现简单复制相关推荐

最新文章

热门文章