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

 更新时间:2022年09月09日 08:35:19   作者:linfeng_023  
这篇文章主要介绍了在vue或H5中如何使用复制粘贴功能,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

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

相关文章

  • Vue项目中使用mock.js的完整步骤

    Vue项目中使用mock.js的完整步骤

    这篇文章主要给大家介绍了关于在Vue项目中使用mock.js的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue实现路由切换改变title功能

    vue实现路由切换改变title功能

    这篇文章主要介绍了vue实现路由切换改变title功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • 基于ant-design-vue实现表格操作按钮组件

    基于ant-design-vue实现表格操作按钮组件

    这篇文章主要为大家介绍了基于ant-design-vue实现表格操作按钮组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue中的全局指令防止按钮重复点击

    Vue中的全局指令防止按钮重复点击

    这篇文章主要介绍了Vue中的全局指令防止按钮重复点击,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vuex + keep-alive实现tab标签页面缓存功能

    vuex + keep-alive实现tab标签页面缓存功能

    这篇文章主要介绍了vuex + keep-alive实现tab标签页面缓存功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 实例解析Vue.js下载方式及基本概念

    实例解析Vue.js下载方式及基本概念

    vue是一套用于构建用户界面的渐进式框架。接下来通过本文给大家分享Vue.js下载方式及基本概念,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • vue3.0公共组件自动导入的方法实例

    vue3.0公共组件自动导入的方法实例

    这篇文章主要给大家介绍了关于vue3.0公共组件自动导入的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue3的二维码组件vue3-next-qrcode

    vue3的二维码组件vue3-next-qrcode

    这篇文章主要为大家介绍了vue3的二维码组件vue3-next-qrcode示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Echarts实现一张图现切换不同的X轴(实例代码)

    Echarts实现一张图现切换不同的X轴(实例代码)

    这篇文章主要介绍了Echarts 如何实现一张图现切换不同的X轴,通过动图给大家展示效果,实例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
    2021-11-11
  • Vue.js实现可配置的登录表单代码详解

    Vue.js实现可配置的登录表单代码详解

    这篇文章主要介绍了Vue.js实现可配置的登录表单实例代码详解,文中给大家补充介绍了vue.js 全选与取消全选的实例代码,需要的朋友可以参考下
    2018-03-03

最新评论