v1.0.6

#### 新增 - 新增`showCount`配置, 可以控制选项的数量, 提高渲染性能 - 新增分组模式, 可以在选项中使用`optgroup`或`children`来开启, 分组时不建议开启分页模式 - 远程搜索中新增`show`参数, 可以查看当前下拉框是否显示 #### Bug fixes - 修复工具条中`全选`和`清空`还可以操作禁用选项的问题 - 修复远程搜索中`selected`不回显的问题
2019-10-14 19:05:40 +08:00
parent 1c58a43a4b
commit 9b55425ebb
20 changed files with 384 additions and 76 deletions
--- a/docs/index.ejs
+++ b/docs/index.ejs
@@ -14,6 +14,7 @@
 	<title>xm-select</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 </head>
 <body>

--- a/docs/mds/XM05.md
+++ b/docs/mds/XM05.md
@@ -99,13 +99,13 @@ var demo4 = xmSelect.render({
    el: '#demo4', 
    filterable: true,
    remoteSearch: true,
-    remoteMethod: function(val, cb){
+    remoteMethod: function(val, cb, show){
        //这里模拟3s后返回数据
        setTimeout(function(){
            //需要回传一个数组
            cb([
                {name: '水果' + val, value: val + 1},
-                {name: '蔬菜' + val, value: val + 2},
+                {name: '蔬菜' + val, value: val + 2, selected: true},
                {name: '桌子' + val, value: val + 3},
                {name: '北京' + val, value: val + 4},
            ])
@@ -116,3 +116,44 @@ var demo4 = xmSelect.render({
 </script>
 ```
 :::
+
+
+###  远程搜索
+
+第一步: 需要先开启搜索 `filterable: true,`
+
+第二步: 开启自定义搜索 `remoteSearch: true`
+
+第三部: 重写搜索回调
+
+简单吧, 记得Star ^_^
+
+:::demo `render`后, 就会进行一次回调, 用于渲染第一次数据
+```html
+<div id="demo5" class="xm-select-demo"></div>
+
+<script>
+var demo5 = xmSelect.render({
+    el: '#demo5', 
+    filterable: true,
+    remoteSearch: true,
+    remoteMethod: function(val, cb, show){
+        axios({
+            method: 'get',
+            url: 'https://easy-mock.com/mock/5da028e2cda1720dffee5f85/xm-select/search',
+            params: {
+                keyword: val,
+            }
+        }).then(response => {
+            var res = response.data;
+            cb(res.data)
+            demo1.setValue([ 1, 2, 3 ], show) 
+        }).catch(err => {
+            cb([]);
+        });
+    },
+    data: []
+})
+</script>
+```
+:::
--- a/docs/mds/XM16.md
+++ b/docs/mds/XM16.md
@@ -26,7 +26,7 @@ var demo1 = xmSelect.render({
 :::


-### 监听动态复制
+### 监听+动态赋值

 选中北京后, 不能选中上海, 二者互斥

--- a/docs/mds/XM20.md
+++ b/docs/mds/XM20.md
@@ -0,0 +1,39 @@
+## 选项显示数量
+
+
+
+:::tip
+当数量量过大时, 又不想使用分页的形式, 就可以控制显示数量, 用搜索的方式把最适合的数据展示出来
+
+!!! 此处与分页配置互斥, 开启分页后, 此配置无效
+
+!!! 使用此配置时建议开启搜索模式, 否则无法显示全部数据
+:::
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+<div>可以搜索 1, 2, 3看看效果</div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    filterable: true,
+	showCount: 5,
+    data: [
+        {name: '张三1', value: 1, selected: true},
+        {name: '李四1', value: 2, selected: true},
+        {name: '王五1', value: 3},
+        {name: '赵六1', value: 4},
+        {name: '苹果2', value: 5},
+        {name: '香蕉2', value: 6},
+        {name: '凤梨2', value: 7},
+        {name: '葡萄2', value: 8},
+        {name: '樱桃3', value: 9},
+        {name: '车厘子3', value: 10},
+        {name: '火龙果3', value: 11},
+    ]
+})
+</script>
+```
+:::
--- a/docs/mds/XM21.md
+++ b/docs/mds/XM21.md
@@ -0,0 +1,101 @@
+## 分组
+
+
+
+:::tip
+使用分组时, 不建议开启分页, 也不建议开启选项数量控制!!!
+:::
+
+
+### optgroup模式
+
+:::demo 指定选项中的`optgroup`为`true`
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    toolbar:{
+        show: true,
+    },
+    height: '500px',
+    data: [
+        {name: '销售员', optgroup: true},
+        {name: '张三1', value: 1, selected: true},
+        {name: '李四1', value: 2, selected: true},
+        {name: '王五1', value: 3, disabled: true},
+        {name: '奖品', optgroup: true},
+        {name: '苹果2', value: 4, selected: true, disabled: true},
+        {name: '香蕉2', value: 5},
+        {name: '葡萄2', value: 6},
+    ]
+})
+</script>
+```
+:::
+
+
+### children模式
+
+:::demo 选项中的`children`为数组
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    toolbar:{
+        show: true,
+    },
+    filterable: true,
+    height: '500px',
+    data: [
+        {name: '销售员', children: [
+            {name: '张三1', value: 1, selected: true},
+            {name: '李四1', value: 2, selected: true},
+            {name: '王五1', value: 3, disabled: true},
+        ]},
+        {name: '奖品', children: [
+            {name: '苹果2', value: 4, selected: true, disabled: true},
+            {name: '香蕉2', value: 5},
+            {name: '葡萄2', value: 6},
+        ]},
+    ]
+})
+</script>
+```
+:::
+
+
+### 混合模式
+
+如果自己感觉舒服的话, 也可以这么用...
+
+:::demo 
+```html
+
+<div id="demo3" class="xm-select-demo"></div>
+
+<script>
+var demo3 = xmSelect.render({
+    el: '#demo3', 
+    filterable: true,
+    toolbar: {
+        show: true
+    },
+    height: '500px',
+    data: [
+        {name: '城市', optgroup: true},
+        {name: '北京13', value: 1},
+        {name: '天津1', value: 2, selected: true, disabled: true},
+        {name: '上海1', value: 3},
+        {name: '销售员', children: [
+            {name: '李四23', value: 4, selected: true},
+            {name: '王五2', value: 5},
+        ]},
+    ],
+})
+</script>
+```
+:::
--- a/docs/mds/ZTEST.md
+++ b/docs/mds/ZTEST.md
@@ -10,10 +10,19 @@
 var demo1 = xmSelect.render({
    el: '#demo1', 
    filterable: true,
+    toolbar: {
+        show: true
+    },
+    height: '500px',
    data: [
-        {name: '张三', value: 1},
-        {name: '李四', value: 2},
-        {name: '王五', value: 3},
+        {name: '城市', optgroup: true},
+        {name: '北京13', value: 1},
+        {name: '天津1', value: 2, selected: true, disabled: true},
+        {name: '上海1', value: 3},
+        {name: '销售员', children: [
+            {name: '李四23', value: 4, selected: true},
+            {name: '王五2', value: 5},
+        ]},
    ],
 })
 </script>
--- a/docs/mds/options.md
+++ b/docs/mds/options.md
@@ -16,7 +16,7 @@
 | delay             | 搜索延迟 ms | int           |    -    |    500    |
 | filterMethod      | 搜索回调函数 | function(val, item, index, prop)  val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key           |    -    |    -    |
 | remoteSearch      | 是否开启自定义搜索 (远程搜索)| boolean           |    true / false   |    false    |
-| remoteMethod      | 自定义搜索回调函数 | function(val, cb)  val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data          |    -    |    -    |
+| remoteMethod      | 自定义搜索回调函数 | function(val, cb, show)  val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data, show: 下拉框显示状态         |    -    |    -    |
 | direction         | 下拉方向| string           |    auto / up / down   |    auto    |
 | style             | 自定义样式| object           |    -   |    { }    |
 | height            | 默认最大高度| string           |    -   |    200px   |
@@ -36,6 +36,7 @@
 | maxMethod         | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值  |   -  |    -    |
 | name              | 表单提交时的name  |  string  |   -  |    select    |
 | toolbar           | 工具条, 具体看下表  |  object  |   -  |    -    |
+| showCount         | 展示在下拉框中的最多选项数量  |  int  |   -  |    0    |


 ### prop
@@ -45,7 +46,9 @@
 | name        | 显示名称      | string     |    -    |    name      |
 | value       | 选中值        | string     |    -    |    value     |
 | selected    | 是否选中      | string     |    -    |    selected      |
-| disabled    | 是否警用      | string     |    -    |    disabled      |
+| disabled    | 是否禁用      | string     |    -    |    disabled      |
+| children    | 分组children | string     |    -    |    children      |
+| optgroup    | 分组optgroup | string     |    -    |    optgroup      |


 ### theme
--- a/docs/router.js
+++ b/docs/router.js
@@ -46,25 +46,27 @@ export default [{
 		redirect: '/example/XM01',
 		component: Component,
 		children: [
-            { path: '/example/XM01', name: '基础使用', component: importMd('/XM01') },
-            { path: '/example/XM02', name: '国际化', component: importMd('/XM02') },
-            { path: '/example/XM03', name: '默认选中', component: importMd('/XM03') },
-            { path: '/example/XM04', name: '修改提示', component: importMd('/XM04') },
-            { path: '/example/XM05', name: '搜索模式', component: importMd('/XM05') },
-            { path: '/example/XM06', name: '下拉方向', component: importMd('/XM06') },
-            { path: '/example/XM07', name: '自定义样式', component: importMd('/XM07') },
-            { path: '/example/XM08', name: '分页', component: importMd('/XM08') },
-            { path: '/example/XM09', name: '单选', component: importMd('/XM09') },
-            { path: '/example/XM10', name: '重复选', component: importMd('/XM10') },
-            { path: '/example/XM11', name: '自定义属性', component: importMd('/XM11') },
-            { path: '/example/XM12', name: '主题', component: importMd('/XM12') },
-            { path: '/example/XM13', name: '显示与隐藏', component: importMd('/XM13') },
-            { path: '/example/XM14', name: '显示方式', component: importMd('/XM14') },
-            { path: '/example/XM15', name: '构建选项', component: importMd('/XM15') },
-            { path: '/example/XM16', name: '监听选择', component: importMd('/XM16') },
-            { path: '/example/XM17', name: '性能测试', component: importMd('/XM17') },
-            { path: '/example/XM18', name: '多选上限', component: importMd('/XM18') },
-            { path: '/example/XM19', name: '工具条', component: importMd('/XM19') },
+            { path: '/example/XM01', name: 'Base 基础使用', component: importMd('/XM01') },
+            { path: '/example/XM02', name: 'Language 国际化', component: importMd('/XM02') },
+            { path: '/example/XM03', name: 'InitValue 默认选中', component: importMd('/XM03') },
+            { path: '/example/XM04', name: 'Tips 修改提示', component: importMd('/XM04') },
+            { path: '/example/XM05', name: 'Filterable 搜索模式', component: importMd('/XM05') },
+            { path: '/example/XM06', name: 'Direction 下拉方向', component: importMd('/XM06') },
+            { path: '/example/XM07', name: 'Style 自定义样式', component: importMd('/XM07') },
+            { path: '/example/XM08', name: 'Paging 分页', component: importMd('/XM08') },
+            { path: '/example/XM09', name: 'Radio 单选', component: importMd('/XM09') },
+            { path: '/example/XM10', name: 'Repeat 重复选', component: importMd('/XM10') },
+            { path: '/example/XM11', name: 'Prop 自定义属性', component: importMd('/XM11') },
+            { path: '/example/XM12', name: 'Theme 主题', component: importMd('/XM12') },
+            { path: '/example/XM13', name: 'Show 显示与隐藏', component: importMd('/XM13') },
+            { path: '/example/XM14', name: 'Model 显示方式', component: importMd('/XM14') },
+            { path: '/example/XM15', name: 'Template 构建选项', component: importMd('/XM15') },
+            { path: '/example/XM16', name: 'On 监听选择', component: importMd('/XM16') },
+            { path: '/example/XM17', name: 'Test 性能测试', component: importMd('/XM17') },
+            { path: '/example/XM18', name: 'Max 多选上限', component: importMd('/XM18') },
+            { path: '/example/XM19', name: 'Toolbar 工具条', component: importMd('/XM19') },
+            { path: '/example/XM20', name: 'ShowCount 选项数量', component: importMd('/XM20') },
+            { path: '/example/XM21', name: 'Optgroup 分组', component: importMd('/XM21') },
        ]
 	}, {
 		path: '/example-custom',