xm-select: 基于Layui, 下拉選擇框的多選解決方案
通過一個簡單的小例子，看看如何使用xm-select.js
第一步: 下載
第二步: 引入 xm-select.js
第三步: 寫一個容器：
<div id="demo1"></div>
第四步: 渲染
var demo1 = xmSelect.render({
el: '#demo1',
language: 'zn',
data: [
{name: '勾股CMS', value: 1},
{name: '勾股OA', value: 2},
{name: '勾股DEV', value: 3}
]
})
配置項與方法| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| el | 渲染對象 | css選擇器 | dom元素 | string |
| language | 語言選擇 | string | zn / en | zn |
| data | 顯示的數據 | array | - | [ ] |
| content | 自定義下拉框html | string | - | - |
| initValue | 初始化選中的數據, 需要在data中存在 | array | - | null |
| tips | 默認提示, 類似于placeholder | string | - | 請選擇 |
| empty | 空數據提示 | string | - | 暫無數據 |
| filterable | 是否開啟搜索 | boolean | true / false | false |
| searchTips | 搜索提示 | string | - | 請選擇 |
| delay | 搜索延遲ms | int | - | 500 |
| filterMethod | 搜索回調函數 | function(val, item, index, prop) val: 當前搜索值, item: 每個option選項, index: 位置數據中的下標, prop: 定義key | - | - |
| filterDone | 搜索完成函數 | function(val, list) val: 當前搜索值, list: 過濾后的數據 | - | - |
| remoteSearch | 是否開啟自定義搜索 (遠程搜索) | boolean | true / false | false |
| remoteMethod | 自定義搜索回調函數 | function(val, cb, show, pageIndex) val: 當前搜索值, cb(arr, totalPage): 回調函數, 需要回調一個數組, 結構同data, 遠程分頁需要第二個參數: 總頁碼, show: 下拉框顯示狀態, pageIndex: 分頁下當前頁碼 | - | - |
| direction | 下拉方向 | string | auto / up / down | auto |
| style | 自定義樣式 | object | - | { } |
| height | 默認最大高度 | string | - | 200px |
| paging | 是否開啟自定義分頁 | boolean | true / false | false |
| pageSize | 分頁條數 | int | - | 10 |
| pageEmptyShow | 分頁無數據是否顯示 | boolean | true / false | true |
| pageRemote | 是否開啟遠程分頁 | boolean | true / false | true |
| radio | 是否開啟單選模式 | boolean true / false | false | |
| repeat | 是否開啟重復性模式 | boolean | true / false | false |
| clickClose | 是否點擊選項后自動關閉下拉框 | boolean | true / false | false |
| prop | 自定義屬性名稱, 具體看下表 | object | - | |
| theme | 主題配置, 具體看下表 | object | - | - |
| model | 模型, 多選的展示方式, 具體見下表 | object | - | |
| iconfont | 自定義選中圖標 | object | - | |
| show | 展開下拉的回調 | function | - | - |
| hide | 隱藏下拉的回調 | function | - | - |
| template | 自定義渲染選項 | function({ item, sels, name, value }) | - | - |
| on | 監聽選中變化 | function({ arr, change, isAdd }) | - | - |
| max | 設置多選選中上限 | int | - | 0 |
| maxMethod | 達到選中上限的回到 | function(sels, item), sels: 已選中數據, item: 當前選中的值 | - | - |
| name | 表單提交時的name | string | - | select |
| layVerify | 表單驗證, 同layui的lay-verify | string | - | ‘’ |
| layVerType | 表單驗證, 同layui的lay-verType | string | - | ‘’ |
| layReqText | 表單驗證, 同layui的lay-reqText | string | - | ‘’ |
| toolbar | 工具條, 具體看下表 | object | - | - |
| showCount | 展示在下拉框中的最多選項數量 | int | - | 0 |
| enableKeyboard | 是否啟用鍵盤操作選項 | boolean | true / false | true |
| enableHoverFirst | 是否默認選中第一項 | boolean | true / false | true |
| selectedKeyCode | 選中的鍵盤KeyCode | int | 全部KeyCode, 也可xmSelect.KeyCode.Enter,xmSelect.KeyCode.Space | 13 |
| autoRow | 是否開啟自動換行(選項過多時) | boolean | true / false | false |
| size | 尺寸 | string | large / medium / small / mini | medium |
| disabled | 是否禁用多選 | boolean true / false | false | |
| create | 創建條目 | function(val, data), val: 搜索的數據, data: 當前下拉數據 | - | null |
| tree | 樹形結構, 具體看下表 | object | - | - |
| cascader | 級聯結構, 具體看下表 | object | - | - |
| submitConversion | 配置表單提交數據 | function(sels, prop), sels: 已選中數據, prop: 自定義的prop | - | - |
| done | 渲染完成回調 | function | - |
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！