浏览器与小程序的复制功能

今天，来说一下 复制 功能。
复制功能什么时候会用到呢？我在开发中用的最多的情况是， 兑换码，优惠券码，订单号等等。
首先我们来看小程序中的复制，话不多说 上代码。

	handleCopy(code){
	   wx.setClipboardData({
	      data: code,
	      success(res){
	        wx.getClipboardData({
	          success(res){
	            wx.showToast({
				  title: '复制成功',
	              icon: 'success'
	            });
	          },
	        });
	      }
	    });
	}

可以看出，小程序中的复制，主要用到了wx.setClipboardData设置系统剪贴板的内容，跟成功后wx.getClipboardData获取系统剪贴板的内容，然后给个提示就完成了，相对来说是比较简单的。

那我们再来说说浏览器中的复制，比如vue写的后台管理系统中要用的复制，其实就是利用了H5中的input标签。想不到吧，input还有这功能？其实就是用原生创建一个input标签，赋给他要复制的值，appendChild添加进body中。然后利用select，那么input.select()是干嘛的，其实input可以获得select的内容并显示在输入框中,可以选中单个值。值我们拿到了，那么复制呢？input.setSelectionRange()他可以获取input被选中特定范围的内容,所以我们之前做的就是为他做铺垫的。他有几个值，分别代表什么意思，在这里就不多说了，感兴趣的朋友可以去查看相关资料。 最后最重要的复制来了，值我拿到了，怎么实现复制的，别急再来了解一下document.execCommand()，这可是个好东西，你要实现的 剪切(Cut)，拷贝(Copy)，粘贴(Paste) ，撤消(Undo)，重做(Redo) 就是用他实现的。 最后，复制成功了，你总不能把你为了复制创建的input留下吧，麻烦把他删掉好嘛。

handleCopy(code){
	var input = document.createElement('input')
    input.value = code
    document.body.appendChild(input)
    input.select()
    input.setSelectionRange(0, input.value.length),
    document.execCommand('Copy')
    document.body.removeChild(input)
    //给提示，比如element-ui中的message 获取你手写一个提示
}

综上所述，一个小小的复制功能就完成啦。