uniapp 复制到剪切板四端适配

记得很早的时候实现过一次，只不过那次是纯 vue 实现的 h5+，但是想用在 uniapp中还是不行。有些地方不能用！不过在 App 中的方法还是可以使用的：

Vue 复制内容到系统剪切板_唐僧的专栏-CSDN博客_paste vueVue 复制内容到系统剪切板板在具体生产环境中，经常会遇到将内容复制到剪切板的使用情况。由于我们项目是 h5+ 的项目。会打包成App;有时候在网页版中使用该功能是OK的，但是发布成APP 在 IOS中功能就不好使了。在这里我们将复制到剪切板功能细分为在Web中和APP中两种情况来...https://blog.csdn.net/nicepainkiller/article/details/90667650?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164274964116780271535911%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164274964116780271535911&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-90667650.nonecase&utm_term=%E5%89%AA%E5%88%87%E6%9D%BF.&spm=1018.2226.3001.4450

uniapp 复制到剪切板 android ios android-web ios-web

这里是实现了一个长按复制功能：后来发现有些手机的自带浏览器有冲突后来改为点击复制了（oppo 自带的浏览器就会出这个问题）

这里使用了卡槽的设计，只要有需要的复制的控件直接试用卡槽包裹就可以使用

longPressCopy.vue

<template><!--  <view class="long-press-copy" @touchstart="onTouchStart" @touchend="onTouchEnd"> --><view class="long-press-copy" @click="onTimerUp()"><slot name="contentBox"></slot></view>
</template><script>export default {data() {return {timeOut: 700,time: 0,timerCount: null}},props: {info: {}},methods: {onTouchStart() {this.time = (new Date()).getTime()if (this.timerCount) {clearInterval(this.timerCount)this.timerCount = null}this.timerCount = setInterval(this.onTimer, 100)},onTouchEnd() {if (this.timerCount) {clearInterval(this.timerCount)this.timerCount = null}},onTimer() {if (((new Date()).getTime() - this.time) >= this.timeOut) {this.time = (new Date()).getTime()this.onTimerUp()if (this.timerCount) {clearInterval(this.timerCount)this.timerCount = null}}},onTimerUp() {// #ifdef H5if (this.copyToClipboard(this.info)) {uni.showToast({title: 'Copied',position: 'bottom',duration: 1500,icon: 'none'})console.log('ok')} else {console.log('no ok')}// #endif// #ifdef APP-PLUSconst os = plus.os.nameif (os === 'iOS') {var pasteboard = plus.ios.invoke('UIPasteboard', 'generalPasteboard')plus.ios.invoke(pasteboard, 'setValue:forPasteboardType:', this.info, 'public.utf8-plain-text')} else {var main = plus.android.runtimeMainActivity()var clip = main.getSystemService('clipboard')plus.android.invoke(clip, 'setText', this.info)}uni.showToast({title: 'Copied',position: 'bottom',duration: 1500})// #endif},copyToClipboard(string) {let textarealet resulttry {textarea = document.createElement('textarea')textarea.setAttribute('readonly', true)textarea.setAttribute('contenteditable', true)textarea.style.position = 'fixed' // prevent scroll from jumping to the bottom when focus is set.textarea.value = stringdocument.body.appendChild(textarea)textarea.focus()textarea.select()const range = document.createRange()range.selectNodeContents(textarea)const sel = window.getSelection()sel.removeAllRanges()sel.addRange(range)textarea.setSelectionRange(0, textarea.value.length)result = document.execCommand('copy')} catch (err) {console.error(err)result = null} finally {document.body.removeChild(textarea)}// manual copy fallback using promptif (!result) {const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0const copyHotkey = isMac ? '⌘C' : 'CTRL+C'result = prompt(`Press ${copyHotkey}`, string) // eslint-disable-line no-alertif (!result) {return false}}return true},destroyed() {if (this.timerCount) {clearInterval(this.timerCount)this.timerCount = null}}}}
</script><style scoped lang="scss">.long-press-copy {}
</style>

具体使用的地方：

<long-press :info="goodInfo.spuCode"><view class="code-value" slot="contentBox">{{goodInfo.spuCode}}</view>
</long-press>

经过测试四端都能使用

uniapp 复制到剪切板四端适配相关推荐

html数据复制到剪切板
一.原生js指令复制 function copyUtil(info) {var $textArea = $('<textarea></textarea>');$textArea ...
微信小程序复制到剪切板及换行问题
wxml <textarea type="text" v-model="copyContent" placeholder="请输入内容" ...
clipboard.js 实现动态获取内容并复制到剪切板
一个按钮实现先ajax请求,再实现复制功能: 使用clipboard.js分为以下几个步骤: 1.引入一个clipboard.js的文件: 2.新建一个clipboard对象: 3.点击按钮获取目标对 ...
将内容复制到剪切板兼容主流浏览器的解决方案
html : <body><div class="demo-area"><label for="copy-input">输入 ...
微信小程序_把chatgpt聊天数据复制到剪切板
文章目录 ⭐ 前言 ⭐ 开始网格背景样式配置对话框样式配置复制到剪切板 ⭐ 结束 ⭐ 前言大家好,我是yma16,不止前端,本文将介绍微信小程序中 chatgpt聊天页面设计和复制聊天数据. ...
微信小程序之一键复制到剪切板
最近在开发小程序项目里遇到一个小难题-----一键复制在网页开发里我们可以引用大牛封装好的复制插件,比如无flash插件clipboard.js适用移动端,pc端------- 言归正装,打开微信 ...
Android将内容复制到剪切板
近期,项目里需要用到将部分内容复制到剪切板,以前用到都是随用随找,挺麻烦的,最近整理一下,在这里记录一下其实Android提供的剪贴板框架,Android提供ClipboardManager.Cli ...
Html将内容复制到剪切板.
Html将内容复制到剪切板. 引入clipboard.min.js /*!* clipboard.js v1.6.1* https://zenorocha.github.io/clipboard.js ...
Web功能之复制粘贴剪切板
目录一.展示 1.代码展示 2.实际效果展示二.具体实现简述步骤三.疑惑与解答一.展示 1.代码展示 <!DOCTYPE html> <html> <head& ...

uniapp 复制到剪切板四端适配

uniapp 复制到剪切板 android ios android-web ios-web

uniapp 复制到剪切板四端适配相关推荐

最新文章

热门文章

uniapp 复制到剪切板 四端适配

uniapp 复制到剪切板 android ios android-web ios-web

uniapp 复制到剪切板 四端适配相关推荐

最新文章

热门文章

uniapp 复制到剪切板四端适配

uniapp 复制到剪切板四端适配相关推荐