layui-plugin: 最近在写框架，选了layui作为前端，此项目将会记录我在开发过程中，对l ...

原作者: [db:作者] 来自: 网络收藏邀请

开源软件名称：

layui-plugin

开源软件地址：

https://gitee.com/CandyPop/layui-plugin

开源软件介绍：

Layui-Plugin

预览所有组件

layui-keyboard

可以为你的网页加入一个仿win10的键盘，你可以指定键来点亮他们来模拟点击。

首先需要在你的页面指定一个div来存放键盘，键盘将会自适应你的div大小。

<div id="keyboard" style="width: 1000px;height: 300px;margin:0 auto;"></div>

然后你引入插件，传入对于div的id。

<script type="text/javascript">		layui.config({			base: 'plugin/'		}).use(['jquery', 'keyboard'], function() {			var $ = layui.jquery,				keyboard = layui.keyboard;								var k=keyboard.render({					elem:"keyboard"				});								});</script>

如果你需要点亮某个键位，可以直接F12查看他的对于code码，然后调用方法即可。

layui.config({			base: 'plugin/'		}).use(['jquery', 'keyboard'], function() {			var $ = layui.jquery,				keyboard = layui.keyboard;								var k=keyboard.render({					elem:"keyboard"				});    			// 单纯电量 j 和 o				k.keys(["j","o"]);    			// 在 fn键的基础上点亮 5     			k.fn(["Key-5"]);    			// 在shift键的基础上点亮 0				k.shift(["Key-0"]);});

layui-live2d

最近在研究如果在网页上嵌入live2d，才能把自己制作的live2d模型放到里面去。这里只是把live2d的官网和一些其他好心大大的live2d脚本做了一个整合，使用的话，直接引入脚本就行。

首先是网页上需要引入一个画布，id和class固定。长宽根据个人喜好。

<canvas id="live2d" width="200" height="200" class="live2d" style="position: fixed;     top: 25%;right: 50%; opacity: 1; z-index: 99999; pointer-events: none;"></canvas>

接着是脚本的，我这里需要引入两个，接着调用方法将自己的live2d模型导入就行。请注意!，live2dboundle和live2dcore的顺序一定不能错。

layui.config({			base: 'plugin/'		}).use(['jquery', 'layer', 'live2dbundle','live2dcore'], function() {			var $ = layui.jquery;			var resourcesPath = './asset/'; // 指定资源文件（模型）保存的路径			var backImageName = ''; // 指定背景图片 ,默认为空			var modelDir = ['helena']; // 指定需要加载的模型			initDefine(resourcesPath, backImageName, modelDir); // 初始化模型});

以我的资源文件夹为例子。

接着会按照你在live2D的软件中指定的参数，人物就会动起来，如果你希望有更多交互，可以在画布上设置监听自定义菜单什么的，等待你开发了。

layui-uploadx

该插件是对原有layui-upload功能的扩展，用户可以自定义文件的上传路径、下载路径、删除路径等，原upload参数也可以完全支持，在原本的upload传入参数的时候，增加了ex和page参数用来定义uploadx插件的额外功能。该插件目前必须放置在表单中。

使用案例

<body>		<form class="layui-form layui-form-pane" action="" style="width: 300px;height:400px;padding: 10px;border:1px solid #F0F0F0;margin: 40px auto;" lay-filter="example">            <!-- 用来将某个表单对应的数据id填充到表单 -->			 <input type="hidden" name="id" value="66" />			 <div class="layui-form-item">			    <label class="layui-form-label">单行输入框</label>			    <div class="layui-input-block">			      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">			    </div>			  </div>			 <!-- 将对应的内容渲染成附件上传组件 -->			  <div id="up"></div>             <div id="up1"></div>		</form></body><script type="text/javascript">		layui.config({			base: 'plugin/'		}).use(['jquery', 'layer', 'uploadx','form'], function() {			var $ = layui.jquery,				uploadx = layui.uploadx,				upload = layui.upload,				form = layui.form;			uploadx.render({				ex:{					elem:"#up",					url:'./data/uploadx.json',//模拟请求                    // #issue I48IA0					biz:'biz1',//用于区别单个表单下若存在多个附件上传的功能，用于区别他们之间的内容。					name:'文件上传',					form:'example',					mainId:'id',//默认也是这个名字                                        down:function(file){ //新增内容						console.log(file);					},					del:function(file){						console.log(file);					},					upload:function(file){						console.log(file);					}				},                page:{                    limit:8                }//分页的参数			});                        uploadx.render({				ex:{					elem:"#up1",					url:'./data/uploadx2.json',//模拟请求					biz:'biz2',//用于区别单个表单下若存在多个附件上传的功能，用于区别他们之间的内容。					name:'文件上传2',					title:'up2',					form:'example',					mainId:'id'//默认也是这个名字				}			});		});	</script>

效果预览

参数说明

原layui上传组件，分页组件的参数都可以全部使用，部分参数类似绑定id的html元素请不要随意设置，避免功能错乱。参数属性加*则意味着此参数必填。

uploadx.render({    ex:{        //...    }});

参数选项	说明	类型	默认值
elem	指向容器选择器，如：elem: '#id'。也可以是DOM对象	string/object	-
name	用于生成表单input元素时候的字段名称	String	附件
title	附件上传弹出框的标题	String	文件管理
form*	表单属性设置的layui-filter的值，插件需要借用此属性获得id来请求后台数据	String	-
url*	请求附件数据进行显示的路径，组件将会自动将form属性获得的id填充进请求参数中，方便后台处理	String	-
biz	用于在区别在同一个表单存在多个附件上传功能的功能，上传和请求都会携带此参数	String	-
loadType	请求url属性的request method类型	String	get
mainId	对应的主键名是什么，这参数会影响请求时候，主键的参数名	String	id
downId	对应的主键名是什么，这参数会影响下载时候，主键的参数名	String	id
downUrl*	下载附件的url	String	-
delUrl*	删除附件的url	String	-
successCode	请求成功码，所有不是此码的请求，都被视失败。	int	200
successName	请求成功码属性名称。	String	code
resultName	请求结果属性名称。	String	result
countName	请求附件总数的属性名称	String	count
success	操作成功的回调会根据返回成功码来执行 200 执行	function	-
error	操作失败的回调非200执行	function	-
down	点击确定下载的回调，会返回所点击文件的全部信息	function	-
del	点击确定删除的回调，会返回所点击文件的全部信息	function	-
upload	点击确定上传的回调，会返回所点击文件的全部信息	function	-

uploadx.render({    page:{        //... 原 layui 分页组件的参数都可以使用    }});

参数选项	说明	类型	默认值
limitName	获取limit的属性名称	String	limit
currentName	获取当前页数的属性名称	String	curr

方法

addExt(options)

layui.config({			base: 'plugin/'		}).use(['jquery', 'layer', 'uploadx','form'], function() {			var $ = layui.jquery,				uploadx = layui.uploadx,				form = layui.form;    		// 添加 .txt类型的文件icon			uploadx.addExt({				ext:'txt',				type:'svg',				icon:'<svg t="1629904039173" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1280" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M192 0h448.1536L960 320v576c0 70.6944-57.3056 128-128 128H192C121.3056 1024 64 966.6944 64 896V128C64 57.3056 121.3056 0 192 0z" fill="#2696FF" p-id="1281"></path><path d="M417.7536 546.176h-60.8256v170.5728h-40.9216V546.176H256V512h161.7536v34.176z m94.3872 36.416L549.376 512h47.0528l-57.8304 101.5296 59.328 103.2192h-47.6032l-38.1824-71.7184-38.1952 71.7184h-47.6032l59.3408-103.2192L427.8528 512h47.0528l37.2352 70.592zM768 546.176h-60.8256v170.5728H666.24V546.176h-60.0064V512H768v34.176z" fill="#FFFFFF" opacity=".9" p-id="1282"></path><path d="M640 0l320 320H768c-70.6944 0-128-57.3056-128-128V0z" fill="#8FC6FE" p-id="1283"></path></svg>'			});			    			uploadx.render({				//...			});    		    		// 添加 .json类型的文件icon    		uploadx.addExt({				ext:'json',				type:'img',				icon:'./icon/uploadx/javascript.png'			});    });

此方法用于将还没有收录的其他类型文件自定义添加到组件中，可在，有更好的展示效果。icon目前支持两种类型，一个svg，另一个img；

添加前

添加后

layui-password

该插件引入后，将会为你所选择的表单，插入密码输入框和重复密码输入框

使用案例

<body>		<form class="layui-form layui-form-pane" action="" style="width: 300px;height:400px;padding: 10px;border:1px solid #F0F0F0;margin: 40px auto;" lay-filter="example">			  <div class="layui-form-item" id="next">			    <label class="layui-form-label">验证必填项</label>			    <div class="layui-input-block">			      <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">			    </div>			  </div>			  <div class="layui-form-item">			      <button class="layui-btn" lay-submit="" lay-filter="demo2">提交</button>			  </div>		</form>		<form class="layui-form layui-form-pane" action="" style="width: 300px;height:400px;padding: 10px;border:1px solid #F0F0F0;margin: 40px auto;" lay-filter="example0">			  <div class="layui-form-item" id="next0">			    <label class="layui-form-label">验证必填项</label>			    <div class="layui-input-block">			      <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">			    </div>			  </div>			  <div class="layui-form-item">			      <button class="layui-btn" lay-submit="" lay-filter="demo">提交</button>			  </div>		</form>	</body>	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>	<script type="text/javascript">		layui.config({			base: 'plugin/'		}).use(['jquery', 'layer', 'password','form','upload'], function() {			var $ = layui.jquery,				password = layui.password,				form = layui.form;					 password.render({				 event:'example',				 next:'next'			 });			 			 password.render({				 event:'example0',				 next:'next0'			 });			 			 //监听提交			 form.on('submit(demo2)', function(data) {				 				 return false;			 });			 			 //监听提交			 form.on('submit(demo)', function(data) {			 				 			 	return false;			 });		});	</script>

效果预览

1633346251155

参数说明

参数属性加*则意味着此参数必填。

参数选项	说明	类型	默认值
event*	对应表单的lay-filter属性	String	event
length	生成密码和重复密码输入框的长度限制	int	16
minLength	输入的密码不能低于这个阈值	int	6
next*	指定在那个html元素下生成这两个输入框，这里填写id	String	next
pwd	密码的别名	String	密码
pwdName	对应input 的 name	String	password
checkPwd	重复的别名	String	重复密码
checkPwdName	对应input 的 name	String	checkPassword