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>