From 8a1664ebf6d4636a5f250115e7e519a73a0c1cad Mon Sep 17 00:00:00 2001 From: wanggeng <450292408@qq.com> Date: Thu, 2 Jun 2022 17:47:13 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vuepress/config.js | 4 +- docs/code-template/layui-util.md | 106 +++++++++ docs/code-template/list-select.md | 346 ++++++++++++++++++++++++++++++ docs/code-template/radio.md | 15 ++ docs/code-template/select.md | 94 +++----- 5 files changed, 499 insertions(+), 66 deletions(-) create mode 100644 docs/code-template/layui-util.md create mode 100644 docs/code-template/list-select.md create mode 100644 docs/code-template/radio.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 14ebc68..dd4b0b6 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -34,7 +34,9 @@ module.exports = { children: [ '/code-template/area-select', '/code-template/excel-upload', - '/code-template/select' + '/code-template/select', + '/code-template/list-select', + '/code-template/layui-util' ], } ] diff --git a/docs/code-template/layui-util.md b/docs/code-template/layui-util.md new file mode 100644 index 0000000..e35844c --- /dev/null +++ b/docs/code-template/layui-util.md @@ -0,0 +1,106 @@ +# layui工具 + +引入依赖： + +1. `` +2. `` + +3. `` +4. `` + + +初始化 + +```js +var layuiUtil = new LayuiUtil(layui, viewer ? viewer : null); +``` + +## 表单 + +### 构建下拉列表 + +html + +```html +
+ + +
+
+``` + +js + +```js +layuiUtil.select({ + url: top.restAjax.path('', []), + domId: '#highestEducationIdBox', + name: 'highestEducationId', + dataForm: 'dataForm', + valueKey: 'dataId', + nameKey: 'dataName', + onSelect: function(data, option) { + var optionValue = option.value; + var optionText = option.innerText; + } +}); +``` + +参数 +|名称|类型|描述|是否必填| +|-|-|-|-| +|url|string|请求地址|是| +|domId|string|加载下拉的div|是| +|name|string|select的ID与NAME属性值|是| +|dataForm|string|表单的lay-filter值|是| +|valueKey|string|接口返回的数据渲染到option的value属性的值|是| +|nameKey|string|接口返回的数据渲染到option的innerText的值|是| +|selectedValue|string|选中的默认值|否| +|onInit|function|渲染时触发回调|否| +|onSelect|function|选择时触发回调|否| + +事件 + +onInit：渲染或更新时触发事件 + +|名称|类型|描述| +|-|-|-| +|selectedValue|string|选中的默认值，空字符串时，不触发数据加载| + +onSelect：选择时触发事件 + +|名称|类型|描述| +|-|-|-| +|data|obj|选择的option数据，包含原始DOM，美化后的DOM，选中的值| +|option|dom|选中的option| + +## 上传 + +### 上传图片 + +> 已上传头像为例，**avatar** 需要前后一致 + +html + +```html +
+ + +
+ +
+
+
+``` + +js + +```js +layuiUtil.initUploadImage({ + fieldName: 'avatar', + maxCount: 6, + isShow: false, + allowExts: [], + acceptMime: [] +}) +``` \ No newline at end of file diff --git a/docs/code-template/list-select.md b/docs/code-template/list-select.md new file mode 100644 index 0000000..11f22a4 --- /dev/null +++ b/docs/code-template/list-select.md @@ -0,0 +1,346 @@ +# 列表选择 + +> 以用户选择为例 + +1. 页面通过弹窗打开 +2. 页面支持单选与多选 +3. 页面关闭后返回选择结果 + +完整选择页面代码代码 + +```html + + + + + + + + + + + + + + +
+
+
+
+
+
+
+ +
+ 最后登录 +
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
+
+
+
+
+
+ + + + +``` + +打开页面 + +```javascript +// 已经选择的ID列表 +top.dialog.dialogData.selectedIdArray = [$('#userId').val()]; +top.dialog.open({ + // 打开页面，指定选择框类型 + url: 'route/teacher/list-user-unselected?selectType=radio', + title: '选择用户', + width: '1000px', + height: '500px', + onClose: function() { + // 获取选择后的列表 + var newSelectedArray = top.dialog.dialogData.newSelectedArray; + if(newSelectedArray.length != 0) { + // 处理选择结果 + $('#userId').val(newSelectedArray[0].userId); + $('#userName').val(newSelectedArray[0].userName); + } + } +}); +``` \ No newline at end of file diff --git a/docs/code-template/radio.md b/docs/code-template/radio.md new file mode 100644 index 0000000..931c20a --- /dev/null +++ b/docs/code-template/radio.md @@ -0,0 +1,15 @@ +# 单选 + +## 静态单选 + +表单 + +```html +
+ +
+ + +
+
+``` \ No newline at end of file diff --git a/docs/code-template/select.md b/docs/code-template/select.md index 4a36922..2239867 100644 --- a/docs/code-template/select.md +++ b/docs/code-template/select.md @@ -1,8 +1,35 @@ # 下拉选择 -## 基于JQuery的下拉选择 +## 静态选择 -### 直接选择 +表单 + +```html +
+ +
+ +
+
+``` + +列表 + +```html +
+ +
+``` + +## 基于JQuery的动态选择 html @@ -32,67 +59,4 @@ function initSelect(callback) { top.dialog.msg(data.msg); }) } -``` - -### 选择并获取其他属性 - -以部门选择为例，选择部门既要获取部门名称，又要获取部门ID - -html - -```html -
- -
- - -
-
-``` - -js - -```javascript -// 初始化 -function initDepartmentSelect(callback) { - top.restAjax.get(top.restAjax.path('api/department/list/0', []), {}, null, function(code, data) { - $('#departmentName').append(''); - $.each(data, function (index, item) { - $('#departmentName').append(''); - }); - // 渲染表单下拉框 - form.render(null, 'dataForm'); - callback ? callback() : null; - }, function(code, data) { - top.dialog.msg(data.msg); - }) - - // 添加监听事件 - form.on('select(departmentNameFilter)', function(data) { - var value = data.value; - // 遍历 option 获取 option 上的属性 - for(var i = 0, item; item = $(data.elem).children()[i++];) { - if(item.value == value) { - $('#departmentId').val(item.dataset.departmentId); - break; - } - } - }); -} -``` - - - - - -### 列表上的选择 - -```html -
- -
``` \ No newline at end of file