vue 实现屏蔽移动端复制功能

由于医生提供的资料都比较宝贵，所以要求在移动端不能复制。特地总结一下网上和自己的几个方法。

一 方法实现

1.第一种覆盖大多数的方法

 *{
 -webkit-user-select:none;
 -khtml-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;	#但是安卓不行
 }
   input {
  -webkit-user-select:auto; /*webkit浏览器*/
}

2.第一种在上面，第二种

<div onselectstart="return false;">
  -webkit-touch-callout:none;
 -moz-touch-callout:none;
 -ms-touch-callout:none;
 touch-callout:none;

这种在微信浏览器安卓不能复制，但是在安卓的网页上依旧可以复制

3.使用原生js阻止默认事件

document.oncopy = function(e){
      e.preventDefault();
    }

在多数安卓机子都无效

4.第四种，触摸的默认事件是滑动：

ontouchstart="return false"

5.在vue里面实现，阻止默认的长按事件

##html

<div v-longtap="conpytouch">
hello
</div>

###vue

export default{
data(){...},
components:{},
method:{
copytouch:function(e,s){
        e.preventDefault=true
        alert("长按了！！")//这里可进行复杂的处理，我
      到这步已经莫名其妙好了},
}
}

6.做一个透明罩，增加一个div，设置它的z-index为一个比较大的值

div{
height:100%;
width:1000%;
position:absolute;
z-index:1000;#越大越在上面
opacity:0;#越大越不透明
}

这里还没实验过，但是思路和主要的两个元素在上面了，可能布局有问题，需要调整

二 相关基础知识

1.touch事件

以下是四种touch事件

touchstart:     //手指放到屏幕上时触发
touchmove:      //手指在屏幕上滑动式触发
touchend:       //手指离开屏幕时触发
touchcancel:    //系统取消touch事件时触发

touch事件的详细介绍：[http://caibaojian.com/mobile-touch-event.html]