Clipboard 自動複製功能，ios複製失敗，換方案 user-select: text ;長按複製 （ios 兼容，長按複製）

Clipboard 自動複製功能，嵌套app內跳轉的頁面，ios 自動複製失敗（該ios機子,微信，瀏覽器打開復制沒有問題）

暫時換方案    user-select: text ;長按複製 （ios 兼容低版本，長按複製）   

 

最好的 方案是讓 app 給出原生複製的 方法。直接調用 可 自動複製

 

 

 <div class="item-detail">

                  <div class="line" style>

   　　　　 <!-- user-select: text !important;  可複製文字  -->

                    <div style="user-select: text !important;">訂單編號：{{item.order_no}}</div>

                    <div class="line" >緣由：{{item.refuse}}</div>

                  </div>

                  <div>

                    <button

                      class="tag-read"

                      @click="copyText(item.order_no)"

                      style="cursor: pointer"

                      id="foo"

                      data-clipboard-action="copy"

                      :data-clipboard-text="item.order_no"

                    >複製單號</button>

                  </div>

                </div>

<script>

import Clipboard from "clipboard";

export default {

  name: "order",

  data() {

    return {

   

      orderData: [],

      pageVal: 1,

      pageSize: 10,

      pageTotal: 0,

      loading: true,

      isLoading: false,

      form: {

        user_id: this.$route.query.user_id,

        status: 0,

        pageIndex: 1

      }

    };

  },

  created() {

    this.form.pageIndex = 0;

    this.orderData = [];

  },

  methods: {

    /* eslint-disable */

    getList() {

      var order = [];

      this.$api.order(this.form).then(res => {

        if (!res.success) {

          util.toast(res.msg);

        } else if (res.data) {

          order = res.data.data.data;

          order.forEach(item => {

                      this.orderData.push(item);

          });

          this.dataTotal = res.data.data.dataTotal;

          this.pageSize = res.data.data.pageSize;

          this.pageTotal = res.data.data.pageTotal;

          this.loading = true; // 當還有多餘的數據時，將無限滾動給打開 ，就是能夠繼續滾動去請求後臺

          this.isLoading = true;

          if (this.pageTotal == this.form.pageIndex) {

            this.loading = false;

            this.isLoading = false;

          }

          if (this.pageTotal == 0) {

            this.cardListEmpty = true;

          }

        } 

      });

    },

    copyText(text) {

      var clipboard = new Clipboard(".tag-read", {

        text: function(trigger) {

          return text; // 返回須要複製的內容

        }

      });

      clipboard.on("success", e => {

        util.toast("複製成功!");

        // 釋放內存

        clipboard.destroy();

      });

      clipboard.on("error", e => {

        // 不支持複製

        util.toast("請長按進行手動複製!");

        // 釋放內存

        clipboard.destroy();

      });

    },

 

    loadMore() {

      if (this.pageTotal == this.form.pageIndex && this.form.pageIndex != 0) {

        this.loading = false; // 將無限滾動關閉

        this.isLoading = false;

        return;

      }

      setTimeout(() => {

        //發送請求有時間間隔第一個滾動時間結束後才發送第二個請求

        this.form.pageIndex++;

        this.getList();

      }, 500);

    },

};

</script>

 

// 父元素加個-webkit-user-select:text;纔有效，單獨子元素即便加-webkit-user-select:text!important也無效

<style lang="scss" scoped>

.item-detail {

  -webkit-user-select: text;

  -moz-user-select: text;

  -o-user-select: text;

  -ms-user-select: text;

  user-select: text;

}

</style>