4 Star 53 Fork 27

CandyPop / layui-plugin

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Layui-Plugin

预览所有组件


layui-keyboard

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

image-20211220203641962

首先需要在你的页面指定一个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码,然后调用方法即可。

image-20211220204028078

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"]);
});

image-20211220204430319

layui-live2d

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

image-20211209144511705

首先是网页上需要引入一个画布,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); // 初始化模型
});

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

image-20211209144855319

接着会按照你在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>
效果预览

image-20210830165750558

参数说明

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

uploadx.render({
    ex:{
        //...
    }
});
参数选项 说明 类型 默认值
elem 指向容器选择器,如:elem: '#id'。也可以是DOM对象 string/object -
name 用于生成表单input元素时候的字段名称image-20210830170729300 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

添加前

image-20210830173444559

添加后

image-20210830173523115

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
方法

暂无

Repository Comments ( 21 )

Sign in to post a comment

About

最近在写框架,选了layui作为前端,此项目将会记录我在开发过程中,对layui相关的插件扩展。 expand collapse
JavaScript and 3 more languages
GPL-3.0
Cancel

Releases

No release

layui-plugin

Contributors

All

Activities

Load More
can not load any more
1
https://gitee.com/CandyPop/layui-plugin.git
git@gitee.com:CandyPop/layui-plugin.git
CandyPop
layui-plugin
layui-plugin
master

Search