|

下拉菜单 2.6+

下拉菜单 dropdown 是基于基础菜单结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的下拉菜单，更可用于右键菜单来实现更多的交互可能。

示例

基础用法

复杂结构

在表格中应用

自定义事件

右键菜单

水平对齐方式

自定义内容

如下以弹出一个 tab 为例

在 content 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更丰富的弹出内容。

API

API 描述
var dropdown = layui.dropdown 获得 dropdown 模块。
dropdown.render(options) dropdown 组件渲染，核心方法。
dropdown.reload(id, options) 完整重载
dropdown.reloadData(id, options) 2.8+ 仅重载数据或内容
dropdown.close(id) 关闭对应的组件面板
dropdown.open(id) 2.9.8+ 打开对应的组件面板

渲染

dropdown.render(options);

  • 参数 options : 基础属性配置项。#详见属性
    注 2.8+ : 除 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>

属性

属性名 描述 类型 默认值
elem

绑定元素选择器或 DOM 对象

 string/DOM -

data

下拉菜单的数据源。格式详见：#data 格式

 array -
id

设定实例唯一索引，以便用于其他方法对例进行相关操作。若该属性未设置，则默认从 elem 属性绑定的元素中的 id 属性值中获取。

 string -
trigger

触发组件的事件类型。支持所有事件，如： click,hover,mousedown,contextmenu 等

 string

click
closeOnClick 2.9.18+

下拉面板打开后，再次点击目标元素时是否关闭该面板。

 boolean

false
show

是否渲染即显示组件面板。该属性一般在重载方法中传递。

 boolean

false
align

下拉面板相对绑定元素的水平对齐方式。支持以下可选值：

  • left 左对齐（默认）
  • center 居中对齐
  • right 右对齐
 string

left
isAllowSpread

是否允许菜单组展开收缩

 boolean

true
isSpreadItem

是否初始展开子菜单

 boolean

true
accordion 2.8.18+

是否开启手风琴效果

 boolean

false
delay

延迟触发的毫秒数。当 trigger: 'hover' 时才生效。示例：

  • delay: 300 : 表示显示与隐藏的延迟时间均为 300 毫秒
  • delay: [200, 300] 2.9.2+ : 数组成员值分别表示显示延迟时间和隐藏延迟时间
 number/array

[200, 300]
className

自定义组件主容器的样式类名，从而在外部重新定义样式。

 string -
style

设置组件主容器的 CSS 样式。

 string -
shade 2.8+

设置弹出时的遮罩。支持以下方式赋值：

  • 若值为 number 类型，则表示为遮罩透明度，如:
    shade: 0.3
  • 若值为 array 类型，则可同时设置透明度和背景色，如:
    shade: [0.3, '#000']
 number
array

0
templet

全局定义菜单的列表模板，可添加任意 html 字符，且支持 laytpl 模板语法。用法详见：#示例

注 2.8+ : 模板亦可采用函数写法：

templet: function(d){
  return '<i class="layui-icon layui-icon-tips"></> ' + d.title;
}
string
function		 -
content

自定义组件内容，从而替代默认的菜单结构。用法详见：#示例

 string -
clickScope 2.8+

设置触发点击事件的菜单范围。 支持以下可选值：

  • all : 即代表父子菜单均可触发事件

默认无需设置，即父级菜单不触发事件

 string -

customName 2.8.14+

自定义 data 数据源中常用的字段名称。

 object -
ready

组件成功弹出后的回调函数。返回的参数如下：

ready: function(elemPanel, elem){
  console.log(elemPanel); // 组件面板元素对象
  console.log(elem); // 当前组件绑定的目标元素对象
}

click
菜单项被点击时的回调函数。返回的参数如下： 
click: function(data, othis, event){
  console.log(data); // 当前所点击的菜单项对应的数据
  console.log(othis); // 当前所点击的菜单项元素对象
  console.log(this.elem); // 当前组件绑定的目标元素对象，批量绑定中常用
  console.log(event); // 事件对象 2.9.18+
  
  // 若返回 false，则点击选项可不关闭面板 --- 2.8+
  /*
  return false;
  */
}

用法详见：#示例
close 2.9.7+

面板关闭后的回调函数。返回的参数如下：

close: function(elem){
  console.log(elem); // 当前组件绑定的目标元素对象
}
onClickOutside 2.9.18+

点击 dropdown 外部时的回调函数，返回 false 可阻止关闭。

onClickOutside: function(event){
  // 参数 event 即为当前点击的事件对象
  // …
  // return false; // 若返回 false，当点击面板外部时可阻止关闭
}

data 格式

属性名 描述 类型 默认值
title

菜单标题

 string -
id

菜单 ID。用户菜单项唯一索引

 number/string -
type

菜单项的类型，支持的可选值如下：

  • normal 普通菜单项（默认）
  • group 纵向组合收缩菜单
  • parent 横向父级菜单
  • - 分割线
 string

normal
href

菜单项的 url 地址。若填写，点击菜单将直接发生跳转。

 string -
target

菜单 url 打开方式，需设置 href 属性后才生效。 一般可设为 _blank 或 _self 等

 string

_self
disabled 2.8+

菜单项是否禁用状态

 boolean

false
templet

自定义当前菜单项模板，优先级高于基础属性 templet

 string/function -
child

子级菜单数据集合。参数同父级，可无限嵌套。

 array -

您可以对上述 data 中常用的字段进行自定义名称 2.8.14+ :

var dropdown = layui.dropdown;
// 渲染
dropdown.render({
  elem: '', // 绑定元素选择器
  data: [], // 数据源
  customName: { // 自定义 data 字段名 --- 2.8.14+
    id: 'id',
    title: 'title',
    children: 'child'
  },
  // 其他属性 …
});

重载

即对一段已经渲染好的下拉菜单重新设置相关属性并渲染，可分为以下几种重载方式：

重载方式 API
完整重载 dropdown.reload(id, options, deep)
仅数据或内容重载 2.8+ dropdown.reloadData(id, options, deep)

两者重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。

dropdown.reload(id, options);

  • 参数 id : 组件渲染时定义的 id 属性值
  • 参数 options : 基础属性配置项。#详见属性

该方法用于对下拉菜单进行完整重载，所有属性均可参与到重载中。

dropdown.reloadData(id, options);

  • 参数同 dropdown.reload(id, options) 参数

使用该方法时，与数据无关的属性不会参与到重载中。因此若只是更新数据或内容，该方法可大幅提升体验。

关闭面板 2.8+

dropdown.close(id);

  • 参数 id : 组件渲染时定义的 id 属性值

该方法用于关闭对应的 dropdown 组件面板。

var dropdown = layui.dropdown;
// 渲染
dropdown.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 关闭对应的组件面板
dropdown.close('test');

打开面板 2.9.8+

dropdown.open(id);

  • 参数 id : 组件渲染时定义的 id 属性值

该方法用于打开对应的 dropdown 组件面板。

var dropdown = layui.dropdown;
// 渲染
dropdown.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 打开对应的组件面板
dropdown.open('test');

Copyright © 2024 Layui MIT Licensed

鸣谢： 又拍云 Gitee iconfont