Layabox填坑记-通过clipboard.js插件实现手机浏览器端跟PC浏览器复制文本功能

很早之前写过一个Layabox在PC浏览器上实现复制文本功能的文章： Layabox填坑记-通过事件触发来复制文本内容到剪贴板

在这篇文章中使用的方法只适合在PC端使用，经过研究，找到了一种可以实现在手机浏览器实现复制功能的方法，本人亲测有效。

首先下载所需要用到的插件：clipboard.js

解压之后在clipboard.js-master文件夹下的dist目录中复制出clipboard.min.js文件到libs下，然后在index.html中引入该js文件：

<script type="text/javascript" src="libs/clipboard.min.js"></script>

回到代码中，在需要添加复制按钮的界面对应的文件中，使用代码的方式创建原生button节点，然后将创建的按钮跟Layabox的按钮控件位置绑定到一起：

private createBtn(): void {
	var layaContainer = Laya.Browser.getElementById("layaContainer");
	this.copyButton = Laya.Browser.createElement("button");//生成一个按钮
	this.copyButton.id = "btnCopy";
	this.copyButton.className = "btnCopy";//指定class属性
	this.copyButton.style.position = "absolute";
	this.copyButton.style["font-size"] = '28px';
	this.copyButton.style.color = '#ffffff';
	this.copyButton.style["opacity"] = '0';
	layaContainer.appendChild(this.copyButton);//把按钮添加到layacontainer中
	this.btnClickFun()
		
	this.fitDOM();//初始化的时候先将按钮和laya的按钮映射一把。
	// 每次舞台尺寸变更时，都会调用Utils.fitDOMElementInArea设置copy按钮位置
	Laya.stage.on(Laya.Event.RESIZE, this, this.fitDOM);
}

绑定映射的方法如下：

private fitDOM = function(){
	var self = this;
	setTimeout(function(){
		Laya.Utils.fitDOMElementInArea(self.copyButton, self.btn, 0, 0, self.btn.width, self.btn.height);
	}, 100);
}

给创建的原生按钮添加上事件，并实现复制文本功能：

private btnClickFun(){
	var self = this;
	//可以在这里手动写代码给我们的layabox按钮实现点击效果，因为原生按钮被隐藏掉了，所以想要有点击效果的话需要自行添加。
	Laya.Browser.getElementById("btnCopy").addEventListener("mousedown", function(){
	});
	Laya.Browser.getElementById("btnCopy").addEventListener("touchstart", function(){
	});
	Laya.Browser.getElementById("btnCopy").addEventListener("mouseup", function(){
	});
		Laya.Browser.getElementById("btnCopy").addEventListener("touchend", function(){
	});
	//此处使用的clipboad.js内封装的方法，这里text的返回的就是需要复制的文本内容。
	this.buttonClick = new ClipboardJS('.btnCopy',{
		text: function(){
			return self.label.text;
		}
	});
}

最后，记得在界面销毁的时候移除我们创建的按钮跟事件：

private onDestroy(): void {
	Laya.stage.off(Laya.Event.RESIZE, this, this.fitDOM);
	this.buttonClick.destroy();
	this.copyButton.remove()
}