Inndy/vue-clipboard2

以下示例中会出现copy失败，特别是在ios或者安卓手机端。

duzhenyi opened this issue · 2 comments

duzhenyi commented 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-clipboard2 sample app</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
  <script src="../dist/vue-clipboard.js"></script>
</head>
<body>
  <div id="app"></div>

  <template id="t">
    <div class="container">
    <input type="text" v-model="message">
    <button type="button" @click="doCopy">Copy!</button>
    </div>
  </template>

  <script>
  new Vue({
    el: '#app',
    template: '#t',
    data: function () {
      return {
        message: 'Copy These Text'
      }
    },
    methods: {
      doCopy: function () {
		let that = this
	   **// 请求后端接口，等待返回参数，再进行copy，会copy失败，例如：**
	   that.api.get('api/getUserName').then(res=>{
	   
		that.$copyText(res.userName).then(function (e) {
                   alert('Copied')
                    console.log(e)
               }, function (e) {
                   alert('Can not copy')
             console.log(e)
            })
		
	   })
      }
    }
  })
  </script>
</body>
</html>
vibing commented

我也遇到这个问题：

在 PC 上没问题，在手机上几乎 100% 复制失败

duzhenyi commented

我解决了，换了种方式：


<a
          v-clipboard:copy="localhostPath + item.ecode"
          v-clipboard:success="handleSuccess"
          v-clipboard:error="handleError"
          v-action:productDev_copyUrl
          ><a-icon type="share-alt" />复制</a
        >


   // 获取当前页面地址，如http://localhost:8080/admin/index
      let wPath = window.document.location.href
      // 获取当前页面主机地址之后的目录，如：/admin/index
      let pathName = this.$route.path
      let pos = wPath.indexOf(pathName)
      // 获取主机地址，如：http://localhost:8080
      this.localhostPath = wPath.substring(0, pos) + '/d?'


 handleSuccess() {
      this.$message.success('复制成功')
}, handleError() {
      this.$message.error('复制失败')
    },