iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >在vue或H5中如何使用复制粘贴功能
  • 573
分享到

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

2024-04-02 19:04:59 573人浏览 八月长安
摘要

目录Vue或H5中使用复制粘贴复制粘贴功能 :H5或vue或uniappvue或H5中使用复制粘贴 1.使用原生的方法,一般都是在浏览器上使用,所以兼容性不是很好 我是直接使用原生方

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 同时都实现复制粘贴功能的话:

  • H5可使用上述方式实现,
  • app可以用uniapp官网的复制粘贴的api接口

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

--结束END--

本文标题: 在vue或H5中如何使用复制粘贴功能

本文链接: https://www.lsjlt.com/news/167191.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 在vue或H5中如何使用复制粘贴功能
    目录vue或H5中使用复制粘贴复制粘贴功能 :H5或vue或uniappvue或H5中使用复制粘贴 1.使用原生的方法,一般都是在浏览器上使用,所以兼容性不是很好 我是直接使用原生方...
    99+
    2024-04-02
  • vue如何实现粘贴复制功能
    这篇文章主要介绍了vue如何实现粘贴复制功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。引言项目中如果实现粘贴复制功能,目前市面上共有三种方法,均有利有弊,大家可以根据自己...
    99+
    2023-06-29
  • javaScript如何实现复制粘贴功能
    小编给大家分享一下javaScript如何实现复制粘贴功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2024-04-02
  • 如何用python实现复制粘贴功能
    目录楔子实现复制实现粘贴macOS实现复制粘贴Linux实现复制粘贴楔子 pandas里面有这么一个方法:pd.read_clipboard,可以根据你复制的内容生成DataFra...
    99+
    2024-04-02
  • 如何在阿里云远程服务器中使用复制粘贴功能
    在阿里云远程服务器上使用复制粘贴功能可以帮助我们更方便快捷地完成一些操作。本文将详细说明如何在阿里云远程服务器中使用复制粘贴功能。 步骤一:连接远程服务器 首先,我们需要连接到阿里云远程服务器。这可以通过阿里云控制台进行,也可以通过命令行...
    99+
    2023-11-14
    阿里 器中 功能
  • 详解如何使用Python实现复制粘贴的功能
    目录楔子Windows 上的复制粘贴macOS 上的复制粘贴Linux 上的复制粘贴pyperclip 实现复制粘贴楔子 pandas 里面有一个 pd...
    99+
    2023-01-03
    Python实现复制粘贴功能 Python复制粘贴 Python复制 Python粘贴
  • jQuery如何实现复制到粘贴板功能
    这篇文章主要为大家展示了“jQuery如何实现复制到粘贴板功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现复制到粘贴板功能”这篇文章吧。用...
    99+
    2024-04-02
  • vue粘贴复制功能的实现过程记录
    目录引言1. 项目需求图展示:1. 安装第三方插件方法(不推荐)2. 浏览器自带Document.execCommand()复制方法(不推荐)3. Clipboard.writeTe...
    99+
    2024-04-02
  • 如何使xclip在Linux命令行中复制粘贴
    这篇文章主要讲解了“如何使xclip在Linux命令行中复制粘贴”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使xclip在Linux命令行中复制粘贴”吧!了解如何在 Linux 中使用...
    99+
    2023-06-16
  • JS代码如何实现粘贴板复制功能
    这篇文章将为大家详细讲解有关JS代码如何实现粘贴板复制功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用剪贴板是一项基本技能。作为码农都应知道, Tab , Ctrl...
    99+
    2024-04-02
  • 怎么用python实现复制粘贴功能
    这篇文章主要介绍“怎么用python实现复制粘贴功能”,在日常操作中,相信很多人在怎么用python实现复制粘贴功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用python实现复制粘贴功能”的疑惑有所...
    99+
    2023-06-08
  • win10电脑复制粘贴功能失效如何解决
    当Win10电脑的复制粘贴功能失效时,可以尝试以下几种解决方法:1. 重新启动电脑:有时候只需简单地重新启动电脑,就可以解决复制粘贴...
    99+
    2023-09-06
    win10
  • 电脑不能复制粘贴如何解决
    如果电脑无法复制粘贴,可以尝试以下解决方法:1. 检查剪贴板功能是否启用:在开始菜单中搜索“剪贴板”或按下Win + V键,确保剪贴...
    99+
    2023-08-24
    电脑
  • 如何解决xp不能复制粘贴问题
    小编给大家分享一下如何解决xp不能复制粘贴问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!无法使用复粘贴功能,可以用注册表修复,注册表是系统的核心部分,所以操作时为谨慎。修复方法,先进入注册表,从开始菜单中打开“运行”程...
    99+
    2023-06-28
  • Git 中如何进行复制和粘贴
    在使用 Git 进行开发时,常常会需要复制、粘贴一些代码片段或命令。但是,如果你在终端中直接使用 Ctrl+C、Ctrl+V 等组合键进行复制和粘贴,很可能会遇到一些问题。本文将介绍 Git 中如何进行复制和粘贴。复制在 Git 执行命令时...
    99+
    2023-10-22
  • ubuntu终端不能复制粘贴如何解决
    如果在Ubuntu终端中无法复制和粘贴,可能是由于某些设置错误或终端本身的限制导致的。您可以尝试以下方法来解决这个问题:1. 检查终...
    99+
    2023-08-29
    ubuntu
  • 云主机不能复制粘贴如何解决
    如果云主机不能复制粘贴,有几种可能的解决方法:1. 检查云主机的远程连接工具设置:有些远程连接工具(如远程桌面)可能需要手动启用剪贴...
    99+
    2023-09-17
    云主机
  • 如何使用JavaScript创建复制和粘贴按钮
    本篇内容主要讲解“如何使用JavaScript创建复制和粘贴按钮”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用JavaScript创建复制和粘贴按钮”吧...
    99+
    2024-04-02
  • 两个excel不能互相复制粘贴如何解决
    如果两个Excel文件不能互相复制粘贴,可能有以下几种解决方法:1. 使用拷贝和粘贴值:打开一个Excel文件,选择要复制的单元格或...
    99+
    2023-09-09
    excel
  • 笔记本电脑中复制粘贴不能用怎么办
    这篇文章主要介绍了笔记本电脑中复制粘贴不能用怎么办,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。首先打开任务管理器(同时按下 ctrl+shift+esc),如图所示:在“W...
    99+
    2023-06-28
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作