H5 复制到剪贴板

文章目录

• 问题描述
• 案例
• 兼容性问题

问题描述

今天要做一个复制的功能，以前浏览器处于安全考虑是不能直接访问内存的，但是现在chrome强大的功能，提供了各种新特性，而且使用过的很多软件，是有复制功能的，因此，在网上查找到了解决办法，再次做个笔记

案例

<!--  -->
<template>
  <div class="copy-unionid-page" style="height: 100%">
    <x-button type="primary" class="mybtn" @click.native="copyAction">复制</x-button>
  </div>
</template>

<script>
import { XButton, Icon } from "vux";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    XButton,
  },
  data() {
    //这里存放数据
    return {
      unionid: ''
    };
  },
  //方法集合
  methods: {
    // 生成支付条形码
    copyAction: function() {
        this.copyToClipboard(this.unionid);
        alert("已复制好，可贴粘。");
    },
    copyToClipboard(s){
        if(window.clipboardData){
            window.clipboardData.setData('text',s);
        }else{
            (function(s){
                document.oncopy=function(e){
                    e.clipboardData.setData('text',s);
                    e.preventDefault();
                    document.oncopy=null;
                }
            })(s);
            document.execCommand('Copy');
        }
    }
  }
};
</script>
<style scoped lang="less">
</style>

兼容性问题

1. window.clipboardData.setData不是所有的浏览器都有这个功能
2. document.oncopy定义复制事件，document.execCommand('Copy') 触发oncopy事件

来源：CSDN

作者：胖鹅68

链接：https://blog.csdn.net/hbiao68/article/details/99645667