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 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>

经过测试四端 都能使用

猜你喜欢

转载自blog.csdn.net/nicepainkiller/article/details/122622347