# layui-plugin **Repository Path**: lxwzsh123/layui-plugin ## Basic Information - **Project Name**: layui-plugin - **Description**: 最近在写框架，选了layui作为前端，此项目将会记录我在开发过程中，对layui相关的插件扩展。 - **Primary Language**: Unknown - **License**: GPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 43 - **Created**: 2024-08-13 - **Last Updated**: 2024-08-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### Layui-Plugin ![](https://img.shields.io/badge/layui-2.6.8-green) ![](https://img.shields.io/badge/layui-plugin-important) ![](https://img.shields.io/badge/layui-uploadx-blue) ![](https://img.shields.io/badge/layui-password-blue) ![](https://img.shields.io/badge/layui-live2d-blue) ![](https://img.shields.io/badge/layui-keyboard-blue) [预览所有组件]() --- #### layui-keyboard 可以为你的网页加入一个仿win10的键盘，你可以指定键来点亮他们来模拟点击。 ![image-20211220203641962](./img/image-20211220203641962.png) 首先需要在你的页面指定一个div来存放键盘，键盘将会自适应你的div大小。 ```html

``` 然后你引入插件，传入对于div的id。 ```html ``` 如果你需要点亮某个键位，可以直接F12查看他的对于`code码`，然后调用方法即可。 ![image-20211220204028078](./img/image-20211220204028078.png) ```javascript 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](./img/image-20211220204430319.png) #### layui-live2d > 最近在研究如果在网页上嵌入live2d，才能把自己制作的live2d模型放到里面去。这里只是把live2d的官网和一些其他好心大大的live2d脚本做了一个整合，使用的话，直接引入脚本就行。 ![image-20211209144511705](./img/image-20211209144511705.png) 首先是网页上需要引入一个画布，id和class固定。长宽根据个人喜好。 ```html

``` 接着是脚本的，我这里需要引入两个，接着调用方法将自己的live2d模型导入就行。**请注意!，live2dboundle和live2dcore的顺序一定不能错**。 ```javascript 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](./img/image-20211209144855319.png) 接着会按照你在live2D的软件中指定的参数，人物就会动起来，如果你希望有更多交互，可以在画布上设置监听自定义菜单什么的，等待你开发了。 #### layui-uploadx > 该插件是对原有layui-upload功能的扩展，用户可以自定义文件的上传路径、下载路径、删除路径等，原upload参数也可以完全支持，在原本的upload传入参数的时候，增加了ex和page参数用来定义uploadx插件的额外功能。该插件目前**必须**放置在表单中。 ##### 使用案例 ```html ``` ##### 效果预览 ![image-20210830165750558](./img/image-20210830165750558.png) ##### 参数说明原layui上传组件，分页组件的参数都可以全部使用，部分参数类似绑定id的html元素请不要随意设置，避免功能错乱。**参数属性加*则意味着此参数必填。** ```javascript uploadx.render({ ex:{ //... } }); ``` | 参数选项 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------------------------------ | ------------- | -------- | | elem | 指向容器选择器，如：elem: '#id'。也可以是DOM对象 | string/object | - | | name | 用于生成表单input元素时候的字段名称![image-20210830170729300](./img/image-20210830170729300.png) | 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 | - | ```javascript uploadx.render({ page:{ //... 原 layui 分页组件的参数都可以使用 } }); ``` | 参数选项 | 说明 | 类型 | 默认值 | | ----------- | ---------------------- | ------ | ------ | | limitName | 获取limit的属性名称 | String | limit | | currentName | 获取当前页数的属性名称 | String | curr | ##### 方法 > addExt(options) ```javascript 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:'' }); uploadx.render({ //... }); // 添加 .json类型的文件icon uploadx.addExt({ ext:'json', type:'img', icon:'./icon/uploadx/javascript.png' }); }); ``` 此方法用于将还没有收录的**其他类型文件**自定义添加到组件中，可在，有更好的展示效果。icon目前支持两种类型，一个`svg`，另一个`img`； **添加前** ![image-20210830173444559](./img/image-20210830173444559.png) **添加后** ![image-20210830173523115](./img/image-20210830173523115.png) #### layui-password > 该插件引入后，将会为你所选择的表单，插入密码输入框和重复密码输入框 ##### 使用案例 ```html ``` ##### 效果预览 ![1633346251155](./img/1633346251155.png) ##### 参数说明 **参数属性加*则意味着此参数必填。** | 参数选项 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------------------ | ------ | ------------- | | 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 | ##### 方法 > 暂无