LayUI中的内置模块之下拉菜单组件文档 layui.dropdown

最新推荐文章于 2024-08-29 16:32:55 发布

daimeijin

最新推荐文章于 2024-08-29 16:32:55 发布

阅读量1.2w

点赞数

分类专栏： LayUI 文章标签： layui

本文链接：https://blog.csdn.net/daimeijin/article/details/119700920

版权

本文档介绍LayUI的dropdown组件，适用于后台开发者快速上手前端框架。dropdown组件提供多功能下拉菜单，可实现下拉菜单和右键菜单功能。通过data参数配置菜单列表，使用templet自定义菜单模板，通过trigger参数切换触发方式，实现科学的坐标定位。

摘要由CSDN通过智能技术生成

前言

最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。

下拉菜单组件文档

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

快速使用

<button class="layui-btn" id="demo1">
  下拉菜单
  <i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
 
<script>
layui.use('dropdown', function(){
  var dropdown = layui.dropdown
  dropdown.render({
    elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
    ,data: [{
      title: 'menu item 1'
      ,id: 100
      ,href: '#'
    },{
      title: 'menu item 2'
      ,id: 101
      ,href: 'https: