在vue或H5中如何使用复制粘贴功能

目录
  • vue或H5中使用复制粘贴
  • 复制粘贴功能 :H5或vue或uniapp

vue或H5中使用复制粘贴

1.使用原生的方法,一般都是在浏览器上使用,所以兼容性不是很好

我是直接使用原生方法创建的input,你也可以直接在DOM上加input标签,然后去获取它的value值.

copyUrl(){
   let url = 'https://blog.csdn.net/linfng023/article/details/101014133';
   let domInput = document.createElement('input');
   domInput.value = url;
   document.body.appendChild(domInput);  // 添加input节点
   domInput.select(); // 选择对象;
   document.execCommand("Copy"); // 执行浏览器复制命令
   this.$toast({
     message: `链接复制成功!`,
     duration: 2000
   });
   domInput.remove()
},

2.使用插件的方式clipboard.js,使用步骤:

安装clipboard.js,可以使用npm安装(也可以cnpm)

npm install clipboard --save

引入clipboard.js,可以mian.js上直接引用(全局使用),也可以在你需要复制粘贴的组件上引用(局部使用)

import clipboard from 'clipboard';
//注册到vue原型上
Vue.prototype.clipboard = clipboard;

然后复制粘贴

<a class="copyClassUrl" data-clipboard-action="copy" data-clipboard-text="https://blog.csdn.net/linfng023/article/details/101014133" @click="copyLink">复制链接</a>
copyLink() {
    let clipboardUrl = new this.clipboard(".copyClassUrl");
    clipboardUrl.on('success', function () {
      _this.$toast({
        message: `链接复制成功!`,
        duration: 2000
      });
    });
    clipboardUrl.on('error', function () {
      console.log(clipboardUrl)
    });
},

复制粘贴功能 :H5或vue或uniapp

1.原生的浏览器复制方式,一般都是在浏览器上使用

单独定义一个h5-copy.js文件。用于复用 复制粘贴功能

h5-copy.js

export default function h5Copy(content) {
  console.log(content);
  if (!document.queryCommandSupported('copy')) {
    // 不支持
    uni.showToast({
        title:'您当前的应用环境不支持自动复制内容......',
        icon:'none'
    })
    return false
  }
  
  let textarea = document.createElement("textarea")
  textarea.value = content
  textarea.readOnly = "readOnly"
  document.body.appendChild(textarea)
  textarea.select() // 选择对象
  textarea.setSelectionRange(0, content.length) //复制的内容的范围 
  let result = document.execCommand("copy") // 执行浏览器复制命令
  textarea.remove()
  return result
 
}

然后在文件中使用

<template>
	<view>
		<button type="primary" size="mini" @click="copy">文字复制</button>
	</view>
</template>
<script>
    import h5Copy from '@/utils/h5-copy.js'

	export default {
		data() {
			return {

			};
		},
        methods:{
            copy(){
                // #ifdef H5
                let res = h5Copy('传入要复制的内容')
                if (res) {
                    uni.showToast({
                        title:'复制成功',
                        icon:"success"
                    })
                	//window.location.href = "weixin://";
                } else {
                	uni.showToast({
                	    title:'复制失败',
                	    icon:"none"
                	})
                }
                // #endif   

               // #ifdef APP-PLUS
                uni.setClipboardData({
                    data: '要复制的内容',
                    success: () => {
                        //复制成功之后的回调 do something here
                        uni.showToast({
                            title: '复制成功'
                        })
                    },
                    fail: () => {
                        //复制失败之后的回调 do something here
                        uni.showToast({
                            title: '复制失败',
                            icon: "none"
                        })
                    }
                });
                // #endif
            }
        }
	}
</script>
<style lang="scss"></style>

如果要是在uniapp中使用app与h5 同时都实现复制粘贴功能的话:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue实现点击按钮复制文本内容的例子

    点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下: 1.引入clipboard.js,方法如下: 第一种直接npm安装:npm install clipboard --save 第二种:<script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.

  • 浅析vue深复制

    Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. const object1 = { a: 1, b: 2, c: 3 }; const object2 = Object.assign({}, object1); console.log(object2.c); // expected output: 3 或者使用 obj=JSON.parse(JSON.stringify(this.templateData)); //this.te

  • Vue使用Clipboard.JS在h5页面中复制内容实例详解

    安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引入clipboard.js import ClipboardJS from "clipboard"; 或 <script src="https://clipboardjs.com/dist/clipboard.min.js"></script>

  • 在vue或H5中如何使用复制粘贴功能

    目录 vue或H5中使用复制粘贴 复制粘贴功能 :H5或vue或uniapp vue或H5中使用复制粘贴 1.使用原生的方法,一般都是在浏览器上使用,所以兼容性不是很好 我是直接使用原生方法创建的input,你也可以直接在DOM上加input标签,然后去获取它的value值. copyUrl(){    let url = 'https://blog.csdn.net/linfng023/article/details/101014133';    let domInput = document

  • JS插件clipboard.js实现一键复制粘贴功能

    一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js. 官网地址 下载到本地后,将其放入项目中,直接引用即可.具体实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一键复制粘贴</title> <style> .transfer { width: 90%; margin: 20px auto; fon

  • 如何用python实现复制粘贴功能

    楔子 pandas里面有这么一个方法:pd.read_clipboard,可以根据你复制的内容生成DataFrame.是的,就是我们平时选中,然后复制.或者Ctrl+C时拷贝的内容,所以比较神奇,那么pandas到底是怎么做到的,它是怎么读出我们使用Ctrl +C复制的内容呢. 看了一下源码,非常的复杂,方法是使用了ctypes,然后调用了操作系统的一个动态库实现的.ctypes是专门来调用C.C++使用的,但是我们知道Python有一个pywin32模块,对于Windows操作系统提供的接口进

  • VirtualBox安装CentOS实现鼠标自动切换和复制粘贴功能

    1. 输入命令: cd /media 2. 输入命令: sh VBoxLinuxAdditions.run 3. 可能会出现错误: 解决的办法是依次输入命令: yum install update yum update kernel yum update kernel-devel yum install kernel-headers yum install gcc yum install gcc make 然后再运行: sh VBoxLinuxAdditions.run 就可以了: 以上所述是小

  • html5+CSS 实现禁止IOS长按复制粘贴功能

    因为在移动端APP需要实现长按执行别的事件,但是在iOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法. 项目是APP,已经经过多款手机适配此时,因此可以放心使用. /*设置IOS页面长按不可复制粘贴,但是IOS上出现input.textarea不能输入,因此将使用-webkit-user-select:auto;*/ *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:non

  • VMware虚拟机中的linux复制粘贴详解

    一,VMware Workstation下的linux: 1.更新源(非必须) vi /etc/apt/sources.list 调整国内的源地址,自行网上搜索. #kali官方源 deb http://http.kali.org/kali kali-rolling main non-free contrib #清华大学源 deb http://mirrors.tuna.tsinghua.edu.cn/kali kali-rolling main contrib non-free deb-src

  • 复制粘贴功能的Python程序

    今天因为给BeauBeau提供的抽奖号码做SQL文件,一开始收到ZIP文件解开压缩之后被吓到了--29个CSV文件,每个文件保存了1000个奖券ID和号码-_-! 照上次一样,打开每个CSV文件做先做单独的SQL文件,每个SQL中有1000条插入语句,随后将29个文件的所有SQL语句都复制粘贴到同一个总的SQL文件中. CSV文件中的结构是"ID,NUMBER"的结构,其中ID是7位数字,NUMBER是11位数字.这样用正则式来进行捕捉的时候就比较方便了,在Eclipse的查找/替换功

  • JS input文本框禁用右键和复制粘贴功能的代码

    复制代码 代码如下: function click(e) { if (document.all) { if (event.button==1||event.button==2||event.button==3) { oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { docume

  • 详解如何使用Vuex实现Vue后台管理中的角色鉴权

    目录 前言 功能分析 实现思路 代码实现 vuex中定义user模块,存储用户信息以及用户侧边导航数据 router中路由meta中新增roles 定义当前路由可以访问的所有的角色 router新增路由前置首位 做权限拦截 侧边导航页面 使用 getters中的 authMenus 循环侧边导航 最后一步 登录页登录时调用 请求登录的action即可大功告成 总结 前言 一直以来,我们使用vue做后台管理时,不同角色的权限功能,都是我们老大难的问题,本篇文章我将手把你带你实现vue后台管理中的用

  • 探索PowerShell (八) 数组、哈希表(附:复制粘贴技巧)

    我们经常在程序设计中用到的数组,同样在脚本中很常用.本节就详细介绍一下数组,以及哈希表在PowerShell中的使用. 数组 在PowerShell中,声明一个变量为数组时,需要使用符号"@",例如: $strUsers=@(""user1","user2","user3) <enter> 这样,我们就声明了一个具有3个成员的数组.查看它的值,使用: $strUsers <enter> 还有一些其他的操

随机推荐