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