jsasg/orico-official-website-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
jsasg
2024-10-29 14:04:59 +08:00
commit 48bf3e6f33
2839 changed files with 762707 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
public/frontend/layui-main/docs/dropdown/detail/demo.md Executable file
View File

@@ -0,0 +1,57 @@
<h3 lay-toc="{level: 2, id: 'examples', hot: true}" class="layui-hide">基础用法</h3>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/dropdown/examples/base.md") }}
</textarea>
</pre>
<h3 id="demo-complex" lay-toc="{level: 2, hot: true}">复杂结构</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/dropdown/examples/complex.md") }}
</textarea>
</pre>
<h3 id="demo-table" lay-toc="{level: 2, hot: true}">在表格中应用</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/dropdown/examples/table.md") }}
</textarea>
</pre>
<h3 id="demo-on" lay-toc="{level: 2}">自定义事件</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/dropdown/examples/on.md") }}
</textarea>
</pre>
<h3 id="demo-contextmenu" lay-toc="{level: 2, hot: true}">右键菜单</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/dropdown/examples/contextmenu.md") }}
</textarea>
</pre>
<h3 id="demo-align" lay-toc="{level: 2}">水平对齐方式</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/dropdown/examples/align.md") }}
</textarea>
</pre>
<h3 id="demo-content" lay-toc="{level: 2, hot: true}">自定义内容</h3>
如下以弹出一个 `tab` 为例
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/dropdown/examples/content.md") }}
</textarea>
</pre>

116
public/frontend/layui-main/docs/dropdown/detail/options.data.md Executable file
View File

@@ -0,0 +1,116 @@
<table class="layui-table">
<colgroup>
<col width="150">
<col>
<col width="100">
<col width="100">
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>
菜单标题
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>id</td>
<td>
菜单 ID。用户菜单项唯一索引
</td>
<td>number/string</td>
<td>-</td>
</tr>
<tr>
<td>type</td>
<td>
菜单项的类型，支持的可选值如下：
- `normal` 普通菜单项（默认）
- `group` 纵向组合收缩菜单
- `parent` 横向父级菜单
- `-` 分割线
</td>
<td>string</td>
<td>
`normal`
</td>
</tr>
<tr>
<td>href</td>
<td>
菜单项的 url 地址。若填写，点击菜单将直接发生跳转。
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>target</td>
<td>
菜单 url 打开方式，需设置 `href` 属性后才生效。 一般可设为 `_blank` 或 `_self` 等
</td>
<td>string</td>
<td>
`_self`
</td>
</tr>
<tr>
<td>disabled <sup>2.8+</sup></td>
<td>
菜单项是否禁用状态
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>templet</td>
<td>
自定义当前菜单项模板，优先级高于基础属性 `templet`
</td>
<td>string/function</td>
<td>-</td>
</tr>
<tr>
<td>child</td>
<td>
子级菜单数据集合。参数同父级，可无限嵌套。
</td>
<td>array</td>
<td>-</td>
</tr>
</tbody>
</table>

291
public/frontend/layui-main/docs/dropdown/detail/options.md Executable file
View File

@@ -0,0 +1,291 @@
<table class="layui-table">
<colgroup>
<col width="150">
<col>
<col width="100">
<col width="100">
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>elem</td>
<td>
绑定元素选择器或 DOM 对象
</td>
<td>string/DOM</td>
<td>-</td>
</tr>
<tr>
<td>
[data](#options.data)
</td>
<td>
下拉菜单的数据源。格式详见：[#data 格式](#options.data)
</td>
<td>array</td>
<td>-</td>
</tr>
<tr>
<td>id</td>
<td>
设定实例唯一索引，以便用于其他方法对例进行相关操作。若该属性未设置，则默认从 `elem` 属性绑定的元素中的 `id` 属性值中获取。
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>trigger</td>
<td>
触发组件的事件类型。支持所有事件，如： `click,hover,mousedown,contextmenu` 等
</td>
<td>string</td>
<td>
`click`
</td>
</tr>
<tr>
<td>show</td>
<td>
是否渲染即显示组件面板。该属性一般在重载方法中传递。
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>align</td>
<td>
下拉面板相对绑定元素的水平对齐方式。支持以下可选值：
- `left` 左对齐（默认）
- `center` 居中对齐
- `right` 右对齐
</td>
<td>string</td>
<td>
`left`
</td>
</tr>
<tr>
<td>isAllowSpread</td>
<td>
是否允许菜单组展开收缩
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>isSpreadItem</td>
<td>
是否初始展开子菜单
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>delay</td>
<td>
延迟关闭的毫秒数。当 `trigger: 'hover'` 时才生效
</td>
<td>number</td>
<td>
`300`
</td>
</tr>
<tr>
<td>className</td>
<td>
自定义组件主容器的样式类名，从而在外部重新定义样式。
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>style</td>
<td>
设置组件主容器的 `CSS` 样式。
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>shade <sup>2.8+</sup></td>
<td>
设置弹出时的遮罩。支持以下方式赋值：
- 若值为 `number` 类型，则表示为遮罩透明度，如:
<br>`shade: 0.3`
- 若值为 `array` 类型，则可同时设置透明度和背景色，如:
<br>`shade: [0.3, '#000']`
</td>
<td>number<br>array</td>
<td>
`0`
</td>
</tr>
<tr>
<td>templet</td>
<td>
全局定义菜单的列表模板，可添加任意 `html` 字符，且支持 [laytpl](../laytpl/) 模板语法。用法详见：[#示例](#demo-complex)
注 <sup>2.8+</sup> : 模板亦可采用函数写法：
```
templet: function(d){
return '<i class="layui-icon layui-icon-tips"></> ' + d.title;
}
```
</td>
<td>string<br>function</td>
<td>-</td>
</tr>
<tr>
<td>content</td>
<td>
自定义组件内容，从而替代默认的菜单结构。用法详见：[#示例](#demo-content)
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>clickScope <sup>2.8+</sup></td>
<td>
设置触发点击事件的菜单范围。 支持以下可选值：
- `all` : 即代表父子菜单均可触发事件
默认无需设置，即父级菜单不触发事件
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>
[customName](#options.customName) <sup>2.8.14+</sup>
</td>
<td>
自定义 `data` 数据源中常用的字段名称。
</td>
<td>object</td>
<td>-</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
</div>
</td>
</tr>
<tr>
<td>ready</td>
<td colspan="3">
组件成功弹出后的回调函数。返回的参数如下：
```
ready: function(elemPanel, elem){
console.log(elemPanel); // 组件面板元素对象
console.log(elem); // 当前组件绑定的目标元素对象
}
```
</td>
</tr>
<tr>
<td>
[click](#options.click)
</td>
<td colspan="3">
<div id="options.click" lay-pid="options" class="ws-anchor">
菜单项被点击时的回调函数。返回的参数如下：
</div>
```
click: function(data, othis){
console.log(data); // 当前所点击的菜单项对应的数据
console.log(othis); // 当前所点击的菜单项元素对象
console.log(this.elem); // 当前组件绑定的目标元素对象，批量绑定中常用
// 若返回 false，则点击选项可不关闭面板 --- 2.8+
/*
return false;
*/
}
```
用法详见：[#示例](#examples)
</td>
</tr>
</tbody>
</table>

38
public/frontend/layui-main/docs/dropdown/examples/align.md Executable file
View File

@@ -0,0 +1,38 @@
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{}">
左对齐
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{align: 'center'}">
居中对齐
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{align: 'right'}">
右对齐
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 水平对齐方式
dropdown.render({
elem: '.demo-dropdown-align',
// align: 'center' // align 已配置在元素 `lay-options` 属性上
data: [{
title: 'menu item test 111',
id: 100
},{
title: 'menu item test 222',
id: 101
},{
title: 'menu item test 333',
id: 102
}]
});
});
</script>

121
public/frontend/layui-main/docs/dropdown/examples/base.md Executable file
View File

@@ -0,0 +1,121 @@
<div class="layui-btn-container">
<button class="layui-btn demo-dropdown-base">
<span>下拉菜单</span>
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary demo-dropdown-base">
<span>下拉菜单</span>
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
</div>
<div class="layui-inline" style="width: 235px;">
<input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="ID-dropdown-demo-base-input">
</div>
<div class="layui-inline layui-word-aux layui-font-gray">
可以绑定任意元素，
<a href="javascript:;" class="layui-font-blue" id="ID-dropdown-demo-base-text">
比如这段文字
<i class="layui-icon layui-font-12 layui-icon-down"></i>
</a>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 渲染
dropdown.render({
elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
data: [{
title: 'menu item 1',
id: 100
},{
title: 'menu item 2',
id: 101
},{
title: 'menu item 3',
id: 102
}],
click: function(obj){
this.elem.find('span').text(obj.title);
}
});
// 绑定输入框
dropdown.render({
elem: '#ID-dropdown-demo-base-input',
data: [{
title: 'menu item 1',
id: 101
},{
title: 'menu item 2',
id: 102
},{
title: 'menu item 3',
id: 103
},{
title: 'menu item 4',
id: 104
},{
title: 'menu item 5',
id: 105
},{
title: 'menu item 6',
id: 106
}],
click: function(obj){
this.elem.val(obj.title);
},
style: 'min-width: 235px;'
});
// 绑定文字
dropdown.render({
elem: '#ID-dropdown-demo-base-text',
data: [{
title: 'menu item 1',
id: 100
},{
title: 'menu item 2',
id: 101,
child: [{ // 横向子菜单
title: 'menu item 2-1',
id: 1011
},{
title: 'menu item 2-2',
id: 1012
}]
},{
title: 'menu item 3',
id: 102
},{
type: '-' // 分割线
},{
title: 'menu group',
id: 103,
type: 'group', // 纵向菜单组
child: [{
title: 'menu item 4-1',
id: 1031
},{
title: 'menu item 4-2',
id: 1032
}]
},{
type: '-' // 分割线
},{
title: 'menu item 5',
id: 104
},{
title: 'menu item 5',
id: 104
}],
click: function(obj){
this.elem.val(obj.title);
}
});
});
</script>

129
public/frontend/layui-main/docs/dropdown/examples/complex.md Executable file
View File

@@ -0,0 +1,129 @@
<button class="layui-btn" id="ID-dropdown-demo-complex">
无限层级 + 跳转 + 事件 + 自定义模板
</button>
<!-- import layui -->
<script>
layui.use(function(){
var dropdown = layui.dropdown;
var util = layui.util;
// 高级演示 - 复杂结构
dropdown.render({
elem: '#ID-dropdown-demo-complex',
data: [{
title: 'menu item 1',
templet: '{{!<i class="layui-icon layui-icon-picture"></i> {{= d.title }} <span class="layui-badge-dot"></span>!}}',
id: 100,
href: '#'
},{
title: 'menu item 2',
templet: '{{!<img src="https://unpkg.com/outeres@0.0.11/demo/avatar/0.png" style="width: 16px;"> {{= d.title }} !}}',
id: 101,
href: '/',
target: '_blank'
},
{type: '-'}, // 分割线
{
title: 'menu item 3',
id: 102,
type: 'group',
child: [{
title: 'menu item 3-1',
id: 103
},{
title: 'menu item 3-2',
id: 104,
child: [{
title: 'menu item 3-2-1',
id: 105
},{
title: 'menu item 3-2-2',
id: 11,
type: 'group',
child: [{
title: 'menu item 3-2-2-1',
id: 111
},{
title: 'menu item 3-2-2-2',
id: 1111
}]
},{
title: 'menu item 3-2-3',
id: 11111
}]
},{
title: 'menu item 3-3',
id: 111111,
type: 'group',
child: [{
title: 'menu item 3-3-1',
id: 22
},{
title: 'menu item 3-3-2',
id: 222,
child: [{
title: 'menu item 3-3-2-1',
id: 2222
},{
title: 'menu item 3-3-2-2',
id: 22222
},{
title: 'menu item 3-3-2-3',
id: 2222222
}]
},{
title: 'menu item 3-3-3',
id: 333
}]
}]
},
{type: '-'},
{
title: 'menu item 4',
id: 4
},{
title: 'menu item 5',
id: 5,
child: [{
title: 'menu item 5-1',
id: 55,
child: [{
title: 'menu item 5-1-1',
id: 5555
},{
title: 'menu item 5-1-2',
id: 55555
},{
title: 'menu item 5-1-3',
id: 555555
}]
},{
title: 'menu item 5-2',
id: 52
},{
title: 'menu item 5-3',
id: 53
}]
},{type:'-'},{
title: 'menu item 6',
id: 66,
type: 'group',
isSpreadItem: false,
child: [{
title: 'menu item 6-1',
id: 777
},{
title: 'menu item 6-2',
id: 7777
},{
title: 'menu item 6-3',
id: 77777
}]
}],
click: function(item){
layer.msg(util.escape(JSON.stringify(item)));
}
});
});
</script>

40
public/frontend/layui-main/docs/dropdown/examples/content.md Executable file
View File

@@ -0,0 +1,40 @@
<button class="layui-btn" id="ID-dropdown-demo-content">
自定义内容
<i class="layui-icon layui-icon-list layui-font-14"></i>
</button>
<style>
.demo-dropdown-tabs{padding: 0 16px;}
</style>
<!-- import layui -->
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 自定义内容
dropdown.render({
elem: '#ID-dropdown-demo-content',
content: ['<div class="layui-tab layui-tab-brief">',
'<ul class="layui-tab-title">',
'<li class="layui-this">Tab header 1</li>',
'<li>Tab header 2</li>',
'<li>Tab header 3</li>',
'</ul>',
'<div class="layui-tab-content">',
'<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>',
'<div class="layui-tab-item">Tab body 2</div>',
'<div class="layui-tab-item">Tab body 3</div>',
'</div>',
'</div>'].join(''),
className: 'demo-dropdown-tabs',
style: 'width: 370px; height: 200px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);',
// shade: 0.3, // 弹出时开启遮罩 --- 2.8+
ready: function(){
layui.use('element', function(element){
element.render('tab');
});
}
});
});
</script>

89
public/frontend/layui-main/docs/dropdown/examples/contextmenu.md Executable file
View File

@@ -0,0 +1,89 @@
<div class="layui-bg-gray" style="height: 260px; text-align: center;" id="ID-dropdown-demo-contextmenu">
<span class="layui-font-gray" style="position: relative; top:50%;">在此区域单击鼠标右键</span>
</div>
<button class="layui-btn" style="margin-top: 15px;" lay-on="contextmenu">
开启全局右键菜单
</button>
<!-- import layui -->
<script>
layui.use(function(){
var dropdown = layui.dropdown;
var util = layui.util;
// 右键菜单
dropdown.render({
elem: '#ID-dropdown-demo-contextmenu', // 也可绑定到 document，从而重置整个右键
trigger: 'contextmenu', // contextmenu
isAllowSpread: false, // 禁止菜单组展开收缩
style: 'width: 200px', // 定义宽度，默认自适应
data: [{
title: 'menu item 1',
id: 'test'
}, {
title: 'Printing',
id: 'print'
},{
title: 'Reload',
id: 'reload'
},{type:'-'},{
title: 'menu item 3',
id: '#3',
child: [{
title: 'menu item 3-1',
id: '#1'
},{
title: 'menu item 3-2',
id: '#2'
},{
title: 'menu item 3-3',
id: '#3'
}]
},
{type: '-'},
{
title: 'menu item 4',
id: ''
},{
title: 'menu item 5',
id: '#1'
},{
title: 'menu item 6',
id: '#1'
}],
click: function(obj, othis){
if(obj.id === 'test'){
layer.msg('click');
} else if(obj.id === 'print'){
window.print();
} else if(obj.id === 'reload'){
location.reload();
}
}
});
// 其他操作
util.event('lay-on', {
// 全局右键菜单
contextmenu: function(othis){
var ID = 'ID-dropdown-demo-contextmenu';
if(!othis.data('open')){
dropdown.reload(ID, {
elem: document // 将事件直接绑定到 document
});
layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。')
othis.html('取消全局右键菜单');
othis.data('open', true);
} else {
dropdown.reload(ID, {
elem: '#'+ ID // 重新绑定到指定元素上
});
layer.msg('已取消全局右键菜单，恢复默认右键菜单')
othis.html('开启全局右键菜单');
othis.data('open', false);
}
}
});
});
</script>

38
public/frontend/layui-main/docs/dropdown/examples/on.md Executable file
View File

@@ -0,0 +1,38 @@
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'hover'}">
hover
<i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'mousedown'}">
mousedown
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'dblclick'}">
dblclick - 双击
<i class="layui-icon layui-icon-circle layui-font-12"></i>
</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 自定义事件
dropdown.render({
elem: '.demo-dropdown-on',
// trigger: 'click' // trigger 已配置在元素 `lay-options` 属性上
data: [{
title: 'menu item 1',
id: 100
},{
title: 'menu item 2',
id: 101
},{
title: 'menu item 3',
id: 102
}]
});
});
</script>

40
public/frontend/layui-main/docs/dropdown/examples/reload.md Executable file
View File

@@ -0,0 +1,40 @@
<button class="layui-btn" id="ID-dropdown-demo-reload">
<span>下拉菜单</span>
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<!-- import layui -->
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 渲染
dropdown.render({
elem: '#ID-dropdown-demo-reload',
data: [{
title: 'menu item 1',
id: 100
}, {
title: '重载该面板',
id: 101
}],
click: function(data){
if(data.id === 101){ // 菜单项对应设置的 id 值
// 重载方法
dropdown.reload('ID-dropdown-demo-reload', {
data: [{ // 重新赋值 data
title: '新选项 1',
id: 111
}, {
title: '新选项 2',
id: 222
}],
show: true // 重载即显示组件面板
});
return false; // 点击该选项，阻止面板关闭
}
}
});
});
</script>

58
public/frontend/layui-main/docs/dropdown/examples/reloadData.md Executable file
View File

@@ -0,0 +1,58 @@
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">输入时重载</label>
<div class="layui-input-inline">
<input type="text" autocomplete="off" placeholder="输入关键字" class="layui-input" id="ID-dropdown-demo-reloadData">
</div>
</div>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var dropdown = layui.dropdown;
var $ = layui.$;
// 渲染
var inst = dropdown.render({
elem: '#ID-dropdown-demo-reloadData',
data: [
{ id: 1, title: "Python" },
{ id: 2, title: "JavaScript" },
{ id: 3, title: "Java" },
{ id: 4, title: "C++" },
{ id: 5, title: "PHP" },
{ id: 6, title: "Ruby" },
{ id: 7, title: "Swift" },
{ id: 8, title: "TypeScript" },
{ id: 9, title: "Kotlin" },
{ id: 10, title: "Go" }
],
style: 'min-width: 190px; box-shadow: 1px 1px 11px rgb(0 0 0 / 11%);',
click: function(data){
this.elem.val(data.title);
}
});
// 输入框输入事件
$(inst.config.elem).on('input propertychange', function(){
var elem = $(this);
var value = elem.val().trim();
// 匹配到对应内容时，重载数据
var dataNew = inst.config.data.filter(function(item){
var exp = new RegExp(value.split('').join('|'), 'i');
return exp.test(item.title);
});
dropdown.reloadData(inst.config.id, {
data: dataNew, // 匹配到的新数据
templet: function(d){
var exp = new RegExp(value.split('').join('|'), 'gi');
return d.title.replace(exp, function (str) {
return '<span style="color: red;">' + str + '</span>'
});
}
});
});
});
</script>

77
public/frontend/layui-main/docs/dropdown/examples/table.md Executable file
View File

@@ -0,0 +1,77 @@
<table class="layui-hide" id="ID-dropdown-demo-table"></table>
<script type="text/html" id="ID-dropdown-demo-table-tool">
<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
<!-- import layui -->
<script>
layui.use(function(){
var table = layui.table;
var dropdown = layui.dropdown;
// dropdown 在表格中的应用
table.render({
elem: '#ID-dropdown-demo-table',
url: '/static/2.8/json/table/demo5.json',
title: '用户数据表',
cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
{field:'username', title:'用户名', width:120, edit: 'text'},
{field:'email', title:'邮箱', minWidth:150},
{fixed: 'right', title:'操作', toolbar: '#ID-dropdown-demo-table-tool', width:150}
]],
limits: [3],
page: true
});
// 行工具事件
table.on('tool(ID-dropdown-demo-table)', function(obj){
var that = this;
var data = obj.data;
if(obj.event === 'edit'){
layer.prompt({
formType: 2,
value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
} else if(obj.event === 'more'){
// 更多下拉菜单
dropdown.render({
elem: that,
show: true, // 外部事件触发即显示
data: [{
title: 'item 1',
id: 'aaa'
}, {
title: 'item 2',
id: 'bbb'
}, {
title: '删除',
id: 'del'
}],
click: function(data, othis){
//根据 id 做出不同操作
if(data.id === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else {
layer.msg('得到表格下拉菜单 id：'+ data.id);
}
},
align: 'right', // 右对齐弹出
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
})
}
});
});
</script>

157
public/frontend/layui-main/docs/dropdown/index.md Executable file
View File

@@ -0,0 +1,157 @@
---
title: 下拉菜单 dropdown
toc: true
---
# 下拉菜单 <sup title="指在该版本新增的组件">2.6+</sup>
> 下拉菜单 `dropdown` 是基于基础菜单结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的*下拉菜单*，更可用于*右键菜单*来实现更多的交互可能。
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<div>
{{- d.include("/dropdown/detail/demo.md") }}
</div>
在 `content` 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更丰富的弹出内容。
<h2 id="api" lay-toc="{hot: true}">API</h2>
| API | 描述 |
| --- | --- |
| var dropdown = layui.dropdown | 获得 `dropdown` 模块。 |
| [dropdown.render(options)](#render) | dropdown 组件渲染，核心方法。 |
| [dropdown.reload(id, options)](#reload) | 完整重载 |
| [dropdown.reloadData(id, options)](#reload) <sup>2.8+</sup> | 仅重载数据或内容 |
| [dropdown.close(id)](#close) | 关闭对应的组件面板 |
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
`dropdown.render(options);`
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
<br>注 <sup>2.8+</sup> : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。
```
<button class="layui-btn" id="ID-test-dropdown">下拉菜单</button>
<button class="layui-btn class-test-dropdown" lay-options="{
data: [{title: 'item 1', id: 1}, {title: 'item 2', id: 2}]
}">下拉菜单</button>
<button class="layui-btn class-test-dropdown" lay-options="{
data: [{title: 'item A', id: 'a'}, {title: 'item B', id: 'b'}]
}">下拉菜单</button>
<!-- import layui -->
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 单个渲染
dropdown.render({
elem: '#ID-test-dropdown',
// …
});
// 批量渲染
dropdown.render({
elem: '.class-test-dropdown',
// …
});
});
</script>
```
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
{{- d.include("/dropdown/detail/options.md") }}
</div>
<h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
<div>
{{- d.include("/dropdown/detail/options.data.md") }}
</div>
<div id="options.customName" class="ws-anchor">
您可以对上述 `data` 中常用的字段进行自定义名称 <sup>2.8.14+</sup> :
</div>
```
var dropdown = layui.dropdown;
// 渲染
dropdown.render({
elem: '', // 绑定元素选择器
data: [], // 数据源
customName: { // 自定义 data 字段名 --- 2.8.14+
id: 'id',
title: 'title',
children: 'child'
},
// 其他属性 …
});
```
<h3 id="reload" lay-toc="{level: 2, hot: true}">重载</h3>
即对一段已经渲染好的下拉菜单重新设置相关属性并渲染，可分为以下几种重载方式：
| 重载方式 | API |
| --- | --- |
| [完整重载](#dropdown.reload) | [dropdown.reload(id, options, deep)](#dropdown.reload) |
| [仅数据或内容重载](#dropdown.reloadData) <sup>2.8+</sup> | [dropdown.reloadData(id, options, deep)](#dropdown.reloadData) |
两者重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。
<h4 id="dropdown.reload" lay-pid="reload" class="ws-anchor ws-bold">完整重载</h4>
`dropdown.reload(id, options);`
- 参数 `id` : 组件渲染时定义的 `id` 属性值
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
该方法用于对下拉菜单进行完整重载，所有属性均可参与到重载中。
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/dropdown/examples/reload.md") }}
</textarea>
</pre>
<h4 id="dropdown.reloadData" lay-pid="reload" class="ws-anchor ws-bold">仅数据或内容重载 <sup>2.8+</sup></h4>
`dropdown.reloadData(id, options);`
- 参数同 `dropdown.reload(id, options)` 参数
使用该方法时，与数据无关的属性不会参与到重载中。因此若只是更新数据或内容，该方法可大幅提升体验。
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/dropdown/examples/reloadData.md") }}
</textarea>
</pre>
<h3 id="close" lay-pid="api" class="ws-anchor ws-bold">关闭面板 <sup>2.8+</sup></h3>
`dropdown.close(id);`
- 参数 `id` : 组件渲染时定义的 `id` 属性值
该方法用于关闭对应的 `dropdown` 组件面板。
```
var dropdown = layui.dropdown;
// 渲染
dropdown.render({
elem: '', // 绑定元素选择器
id: 'test', // 自定义 id
// 其他属性 …
});
// 关闭对应的组件面板
dropdown.close('test');
```