CONTENT

很早之前写过一个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()
}