记得很早的时候实现过一次,只不过那次是 纯 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 H5 if (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-PLUS const os = plus.os.name if (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 textarea let result try { 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 = string document.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 prompt if (!result) { const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0 const copyHotkey = isMac ? '⌘C' : 'CTRL+C' result = prompt(`Press ${copyHotkey}`, string) // eslint-disable-line no-alert if (!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>
经过测试四端 都能使用