码迷,mamicode.com
首页 > 移动开发 > 详细

Clipboard 自动复制功能,ios复制失败,换方案 user-select: text ;长按复制 (ios 兼容,长按复制)

时间:2019-12-10 13:21:32      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:lan   important   dex   his   form   编号   文字   方法   lang   

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>
 

Clipboard 自动复制功能,ios复制失败,换方案 user-select: text ;长按复制 (ios 兼容,长按复制)

标签:lan   important   dex   his   form   编号   文字   方法   lang   

原文地址:https://www.cnblogs.com/FACESCORE/p/12015676.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!