本文更新不及時，請到原文地址查看:https://www.microanswer.cn/blog/74
一、簡介預覽
dropdown 是一款基於layui框架的下拉框控件，填補了layui原生沒有下拉框這個空隙。藉助下拉框的操作方式和UI交互，可以帶來更加直觀、便於操作、模塊劃分清晰等優勢。帶來了這些優勢的同時又加入了許多意想不到的細節:
- 如果下拉框出現的位置會超出瀏覽器邊緣，那麼會自動找一個‘涼快’的地方呆着。
- 在你打開下拉框後又進行了界面滾動，她也不依不捨的跟着你走。
那麼先不妨先看看本控件的預覽效果：
| 默認 | 中對齊 | 右對齊 |
|---|---|---|
 |
 |
 |
| hover | 自定義下拉 | 任意觸發器 |
|---|---|---|
 |
 |
 |
要立刻體驗？可以點擊此處立即在線體驗。
二、安裝
只需要點擊下載將JavaScript文件解壓到你的layui擴展目錄，然後將css文件找一個自己喜歡的目錄，最後將其引入html文件裏即可開始使用。
下面示例頁面中如何使用：
<html>
<head>
<title>dropdown</title>
<link type="text/css" rel="stylesheet" href="假設這是你原本layui的css目錄/layui.css">
<link type="text/css" rel="stylesheet" href="你放css的目錄/dropdown.css">
</head>
<body>
<button class="layui-btn layui-btn-sm"
lay-filter="test1"
lay-dropdown="{menus: [{layIcon:'layui-icon-username',txt: '個人中心', event:'usercenter'}, {layIcon: 'layui-icon-set',txt: '設置', event:'set'}, {layIcon: 'layui-icon-logout', txt: '退出登錄', event:'loginout'}]}">
<span>下拉菜單</span>
<i class="layui-icon layui-icon-triangle-d"></i>
</button>
<script>
// 把 dropdown.js 放在了你的擴展控件目錄，你可以:
layui.config({
base: '你的擴展目錄'
}).use(['dropdown'], function () {
var dropdown = layui.dropdown;
// 監聽菜單點擊
dropdown.onFilter('test1', function (event) {
// ...業務代碼
})
});
</script>
</body>
</html>
三、詳細使用
1、開啓下拉
你需要某個按鈕(或dom)點擊它時它可以下拉展開一個菜單時，你只需要爲這個按鈕添加lay-dropdown屬性，在後面填寫相應的配置。刷新頁面，你就可以點擊這個按鈕實現下拉框了。是不是很簡單。就像這樣：
<button class="layui-btn layui-btn-sm"
lay-filter="test1"
lay-dropdown="{menus: [{layIcon:'layui-icon-username',txt: '個人中心', event:'usercenter'}, {layIcon: 'layui-icon-set',txt: '設置', event:'set'}, {layIcon: 'layui-icon-logout', txt: '退出登錄', event:'loginout'}]}">
<span>下拉菜單</span>
<i class="layui-icon layui-icon-triangle-d"></i>
</button>
<script>
layui.config({
base: '你的擴展目錄'
}).use(['dropdown'], function () {
});
</script>
你或許注意到了，通過給lay-dropdown傳入一個包含菜單條目menus的對象，就可以立即實現下拉菜單的功能了。有關這個對象的具體內容，請往下看。
2、監聽點擊事件
要監聽下拉菜單的點擊事件，使用dropdown.onFilter方法即可監聽，示例代碼如下:
<script>
layui.config({
base: '你的擴展目錄'
}).use(['dropdown'], function () {
var dropdown = layui.dropdown;
// test1 就是觸發下拉的按鈕的lay-filter屬性的內容
dropdown.onFilter("test1", function (event) {
// 根據上一節的配置來說，這裏的event可能爲：
// usercenter、set、loginout
// 這就取決於你點擊的是哪一個菜單項了。
console.log(event);
});
});
</script>
dropdown.onFilter方法提供了兩個參數，第一個是確定多個下拉框唯一性的lay-filter值，第二個就是回調函數，這個回調函數會傳入一個event，通過它你就可以知道點擊的具體是哪一個菜單條目了。
3、自定義下拉內容
這無疑是此下拉控件最具光榮的功能，通過它你可以實現任何你希望的下拉內容，這一刻就是你顱內高潮的moment。
通過配置一個參數template，傳入你的佈局模板，就可以實現下拉框顯示自定義內容了：
<button
class="layui-btn layui-btn-sm"
lay-dropdown="{template: '#custMenu'}"
>
<span>自定義下拉內容</span>
<i class="layui-icon layui-icon-triangle-d"></i>
</button>
<!-- 下拉內容自定義模板 -->
<script id="custMenu" type="text/html">
<div>
<p>我是自定義下拉內容</p>
</div>
</script>
<script>
layui.config({
base: '你的擴展目錄'
}).use(['dropdown'], function () {
var dropdown = layui.dropdown;
});
</script>
4、使用代碼初始化
當然了，不可能每個下拉框都是在頁面出現就跟隨立即出現，有很多時候我們需要把下拉框通過後期進行初始化。常見的場景就是在表格裏，我們則需要在表格的done函數裏進行初始化。
這就不得不通過代碼來初始化了，通過代碼初始化，不僅可以帶來html佈局上的精簡，還可以擁有更強大的功能和自定義效果。
下面示例瞭如何進行異步初始化：
<!-- 使用代碼 -->
<button class="layui-btn layui-btn-sm" id="mybtn">異步初始化下拉</buton>
<script>
layui.config({
base: '你的擴展目錄'
}).use(['dropdown'], function () {
var dropdown = layui.dropdown;
// 通過代碼(也就是後期異步初始化)進行初始化下拉
// 這樣可以把 mybtn 實現下拉菜單
dropdown.suite("#mybtn", {
menus: [{txt: "按鈕1"}, {txt: "按鈕2"}]
});
// 這樣可以把 mybtn 實現下拉自定義內容
dropdown.suite("#mybtn", {
template: "xxxx自定義模板id",
success: function ($dom) {
// 當自定義內容模板初始化完成
// 此方法會調用. 傳入的$dom就
// 包含了你的模板的內容，通過它
// 你可以在這裏進行模板內其他組
// 件的初始化。
}
});
});
</script>
可以看到suite方法幫我們完成了下拉初始化，它又兩個參數，第一個參數是一個dom選擇器，第二個參數是一個option配置，關於option詳細內容，請看最後一節。
四、api列表
1、dropdown.suite(selector, option)
代碼初始化下拉框，通過參數selector確定哪一個按鈕觸發下拉框。option爲下拉框配置，配置見下一節。
2、dropdown.onFilter(filter, cb)
監聽菜單點擊事件，通過它可以監聽使用menus配置的菜單條目點擊事件。對於自定義下拉模板內的dom點擊事件，可通過option提供的success回調函數進行監聽，詳見下一節option配置說明。
五、lay-dropdown配置詳解
無論是通過在html上直接通過屬性lay-dropdown來進行配置，還是通過代碼suite方法進行初始化配置，它們傳遞的配置參數都適用於本節內容:
var option = {
// 【可選】對齊方式，默認left，可填：left,center,right
align: "left",
// 【與menus兩者必填一個】自定義下拉模板id
// 如果同時配置了 menus，則優先 menus 作爲下拉內容。
template: "",
// 【可選】當你使用template自定義模板時，支持通過此
// data 向模板裏提供數據，從而實現動態渲染。
data: {},
// 【與template兩者必填一個】下拉菜單項，數組，裏面放多個對象。
menus: [
...
{
// 菜單圖標，示例: layui-icon-heart-fill
// layui圖標大全：https://www.layui.com/doc/element/icon.html
layIcon: "",
// 菜單顯示文字
txt: "",
// 點擊此菜單的事件
event: ""
},
...
],
// 【可選】如果發現下拉框顯示出來後被遮擋了
// 通過把此配置值修改大於遮擋層的zindex就好了
zIndex: 102,
// 【可選】觸發下拉框的方式，可填: click, hover
showBy: "click",
// 【可選】下拉框最小寬度
minWidth: 10,
// 【可選】下拉框最小高度
minHeight: 10,
// 【可選】下拉框最大高度
maxHeight: 300,
// 【可選】下拉框與觸發按鈕的間隙大小
gap: 4,
// 【可選】多個下拉框確定唯一性的，和屬性 lay-filter 一個作用
filter: "",
// 【可選】通過template參數自定義下拉內容時
// 模板渲染成功此方法調用，$dom: 包含你的自定義模板的jquery對象。
success: function ($dom) {}
}
六、Github
覺得不錯，去Github給個star吧！