v1.0.6
#### 新增 - 新增`showCount`配置, 可以控制选项的数量, 提高渲染性能 - 新增分组模式, 可以在选项中使用`optgroup`或`children`来开启, 分组时不建议开启分页模式 - 远程搜索中新增`show`参数, 可以查看当前下拉框是否显示 #### Bug fixes - 修复工具条中`全选`和`清空`还可以操作禁用选项的问题 - 修复远程搜索中`selected`不回显的问题
This commit is contained in:
maplemei
parent
1c58a43a4b
commit
9b55425ebb
16
CHANGELOG.md
16
CHANGELOG.md
@ -1,5 +1,21 @@
|
|||||||
## 更新日志
|
## 更新日志
|
||||||
|
|
||||||
|
### 1.0.6
|
||||||
|
|
||||||
|
*2019-10-14*
|
||||||
|
|
||||||
|
#### 新增
|
||||||
|
|
||||||
|
- 新增`showCount`配置, 可以控制选项的数量, 提高渲染性能
|
||||||
|
- 新增分组模式, 可以在选项中使用`optgroup`或`children`来开启, 分组时不建议开启分页模式
|
||||||
|
- 远程搜索中新增`show`参数, 可以查看当前下拉框是否显示
|
||||||
|
|
||||||
|
#### Bug fixes
|
||||||
|
|
||||||
|
- 修复工具条中`全选`和`清空`还可以操作禁用选项的问题
|
||||||
|
- 修复远程搜索中`selected`不回显的问题
|
||||||
|
|
||||||
|
|
||||||
### 1.0.5
|
### 1.0.5
|
||||||
|
|
||||||
*2019-10-10*
|
*2019-10-10*
|
||||||
|
|||||||
2
dist/index.html
vendored
2
dist/index.html
vendored
@ -1 +1 @@
|
|||||||
<!DOCTYPE html><html><head><link rel="preload" href="./xm-select.js" as="script"><link rel="preload" href="./static/docs.js" as="script"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css"> --><!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/element-ui@2.12.0/lib/theme-chalk/index.css"> --><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></head><body><div id="app"></div><script type="text/javascript" src="./xm-select.js"></script><script type="text/javascript" src="./static/docs.js"></script></body></html>
|
<!DOCTYPE html><html><head><link rel="preload" href="./xm-select.js" as="script"><link rel="preload" href="./static/docs.js" as="script"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css"> --><!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/element-ui@2.12.0/lib/theme-chalk/index.css"> --><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><div id="app"></div><script type="text/javascript" src="./xm-select.js"></script><script type="text/javascript" src="./static/docs.js"></script></body></html>
|
||||||
2
dist/static/2.js
vendored
2
dist/static/2.js
vendored
File diff suppressed because one or more lines are too long
2
dist/static/3.js
vendored
2
dist/static/3.js
vendored
File diff suppressed because one or more lines are too long
2
dist/static/docs.js
vendored
2
dist/static/docs.js
vendored
File diff suppressed because one or more lines are too long
2
dist/xm-select.js
vendored
2
dist/xm-select.js
vendored
File diff suppressed because one or more lines are too long
@ -14,6 +14,7 @@
|
|||||||
<title>xm-select</title>
|
<title>xm-select</title>
|
||||||
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
|
<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://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script>
|
||||||
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|||||||
@ -99,13 +99,13 @@ var demo4 = xmSelect.render({
|
|||||||
el: '#demo4',
|
el: '#demo4',
|
||||||
filterable: true,
|
filterable: true,
|
||||||
remoteSearch: true,
|
remoteSearch: true,
|
||||||
remoteMethod: function(val, cb){
|
remoteMethod: function(val, cb, show){
|
||||||
//这里模拟3s后返回数据
|
//这里模拟3s后返回数据
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
//需要回传一个数组
|
//需要回传一个数组
|
||||||
cb([
|
cb([
|
||||||
{name: '水果' + val, value: val + 1},
|
{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 + 3},
|
||||||
{name: '北京' + val, value: val + 4},
|
{name: '北京' + val, value: val + 4},
|
||||||
])
|
])
|
||||||
@ -116,3 +116,44 @@ var demo4 = xmSelect.render({
|
|||||||
</script>
|
</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>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|||||||
@ -26,7 +26,7 @@ var demo1 = xmSelect.render({
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
### 监听动态复制
|
### 监听+动态赋值
|
||||||
|
|
||||||
选中北京后, 不能选中上海, 二者互斥
|
选中北京后, 不能选中上海, 二者互斥
|
||||||
|
|
||||||
|
|||||||
39
docs/mds/XM20.md
Normal file
39
docs/mds/XM20.md
Normal file
@ -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>
|
||||||
|
```
|
||||||
|
:::
|
||||||
101
docs/mds/XM21.md
Normal file
101
docs/mds/XM21.md
Normal file
@ -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>
|
||||||
|
```
|
||||||
|
:::
|
||||||
@ -10,10 +10,19 @@
|
|||||||
var demo1 = xmSelect.render({
|
var demo1 = xmSelect.render({
|
||||||
el: '#demo1',
|
el: '#demo1',
|
||||||
filterable: true,
|
filterable: true,
|
||||||
|
toolbar: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
height: '500px',
|
||||||
data: [
|
data: [
|
||||||
{name: '张三', value: 1},
|
{name: '城市', optgroup: true},
|
||||||
{name: '李四', value: 2},
|
{name: '北京13', value: 1},
|
||||||
{name: '王五', value: 3},
|
{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>
|
</script>
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
| delay | 搜索延迟 ms | int | - | 500 |
|
| delay | 搜索延迟 ms | int | - | 500 |
|
||||||
| filterMethod | 搜索回调函数 | function(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key | - | - |
|
| filterMethod | 搜索回调函数 | function(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key | - | - |
|
||||||
| remoteSearch | 是否开启自定义搜索 (远程搜索)| boolean | true / false | false |
|
| 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 |
|
| direction | 下拉方向| string | auto / up / down | auto |
|
||||||
| style | 自定义样式| object | - | { } |
|
| style | 自定义样式| object | - | { } |
|
||||||
| height | 默认最大高度| string | - | 200px |
|
| height | 默认最大高度| string | - | 200px |
|
||||||
@ -36,6 +36,7 @@
|
|||||||
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
|
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
|
||||||
| name | 表单提交时的name | string | - | select |
|
| name | 表单提交时的name | string | - | select |
|
||||||
| toolbar | 工具条, 具体看下表 | object | - | - |
|
| toolbar | 工具条, 具体看下表 | object | - | - |
|
||||||
|
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
|
||||||
|
|
||||||
|
|
||||||
### prop
|
### prop
|
||||||
@ -45,7 +46,9 @@
|
|||||||
| name | 显示名称 | string | - | name |
|
| name | 显示名称 | string | - | name |
|
||||||
| value | 选中值 | string | - | value |
|
| value | 选中值 | string | - | value |
|
||||||
| selected | 是否选中 | string | - | selected |
|
| selected | 是否选中 | string | - | selected |
|
||||||
| disabled | 是否警用 | string | - | disabled |
|
| disabled | 是否禁用 | string | - | disabled |
|
||||||
|
| children | 分组children | string | - | children |
|
||||||
|
| optgroup | 分组optgroup | string | - | optgroup |
|
||||||
|
|
||||||
|
|
||||||
### theme
|
### theme
|
||||||
|
|||||||
@ -46,25 +46,27 @@ export default [{
|
|||||||
redirect: '/example/XM01',
|
redirect: '/example/XM01',
|
||||||
component: Component,
|
component: Component,
|
||||||
children: [
|
children: [
|
||||||
{ path: '/example/XM01', name: '基础使用', component: importMd('/XM01') },
|
{ path: '/example/XM01', name: 'Base 基础使用', component: importMd('/XM01') },
|
||||||
{ path: '/example/XM02', name: '国际化', component: importMd('/XM02') },
|
{ path: '/example/XM02', name: 'Language 国际化', component: importMd('/XM02') },
|
||||||
{ path: '/example/XM03', name: '默认选中', component: importMd('/XM03') },
|
{ path: '/example/XM03', name: 'InitValue 默认选中', component: importMd('/XM03') },
|
||||||
{ path: '/example/XM04', name: '修改提示', component: importMd('/XM04') },
|
{ path: '/example/XM04', name: 'Tips 修改提示', component: importMd('/XM04') },
|
||||||
{ path: '/example/XM05', name: '搜索模式', component: importMd('/XM05') },
|
{ path: '/example/XM05', name: 'Filterable 搜索模式', component: importMd('/XM05') },
|
||||||
{ path: '/example/XM06', name: '下拉方向', component: importMd('/XM06') },
|
{ path: '/example/XM06', name: 'Direction 下拉方向', component: importMd('/XM06') },
|
||||||
{ path: '/example/XM07', name: '自定义样式', component: importMd('/XM07') },
|
{ path: '/example/XM07', name: 'Style 自定义样式', component: importMd('/XM07') },
|
||||||
{ path: '/example/XM08', name: '分页', component: importMd('/XM08') },
|
{ path: '/example/XM08', name: 'Paging 分页', component: importMd('/XM08') },
|
||||||
{ path: '/example/XM09', name: '单选', component: importMd('/XM09') },
|
{ path: '/example/XM09', name: 'Radio 单选', component: importMd('/XM09') },
|
||||||
{ path: '/example/XM10', name: '重复选', component: importMd('/XM10') },
|
{ path: '/example/XM10', name: 'Repeat 重复选', component: importMd('/XM10') },
|
||||||
{ path: '/example/XM11', name: '自定义属性', component: importMd('/XM11') },
|
{ path: '/example/XM11', name: 'Prop 自定义属性', component: importMd('/XM11') },
|
||||||
{ path: '/example/XM12', name: '主题', component: importMd('/XM12') },
|
{ path: '/example/XM12', name: 'Theme 主题', component: importMd('/XM12') },
|
||||||
{ path: '/example/XM13', name: '显示与隐藏', component: importMd('/XM13') },
|
{ path: '/example/XM13', name: 'Show 显示与隐藏', component: importMd('/XM13') },
|
||||||
{ path: '/example/XM14', name: '显示方式', component: importMd('/XM14') },
|
{ path: '/example/XM14', name: 'Model 显示方式', component: importMd('/XM14') },
|
||||||
{ path: '/example/XM15', name: '构建选项', component: importMd('/XM15') },
|
{ path: '/example/XM15', name: 'Template 构建选项', component: importMd('/XM15') },
|
||||||
{ path: '/example/XM16', name: '监听选择', component: importMd('/XM16') },
|
{ path: '/example/XM16', name: 'On 监听选择', component: importMd('/XM16') },
|
||||||
{ path: '/example/XM17', name: '性能测试', component: importMd('/XM17') },
|
{ path: '/example/XM17', name: 'Test 性能测试', component: importMd('/XM17') },
|
||||||
{ path: '/example/XM18', name: '多选上限', component: importMd('/XM18') },
|
{ path: '/example/XM18', name: 'Max 多选上限', component: importMd('/XM18') },
|
||||||
{ path: '/example/XM19', name: '工具条', component: importMd('/XM19') },
|
{ 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',
|
path: '/example-custom',
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "xm-select",
|
"name": "xm-select",
|
||||||
"version": "1.0.5",
|
"version": "1.0.6",
|
||||||
"description": "始于Layui的select多选解决方案",
|
"description": "始于Layui的select多选解决方案",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -145,3 +145,27 @@ export function IEVersion() {
|
|||||||
return -1; //不是ie浏览器
|
return -1; //不是ie浏览器
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function filterGroupOption(arr, data, prop){
|
||||||
|
const { children, optgroup } = prop;
|
||||||
|
data.filter(item => !item[optgroup]).forEach(item => {
|
||||||
|
let child = item[children];
|
||||||
|
if(isArray(child)){
|
||||||
|
filterGroupOption(arr, child, children, optgroup);
|
||||||
|
}else{
|
||||||
|
arr.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function findSelected(arr, data, prop){
|
||||||
|
const { selected, children, optgroup } = prop;
|
||||||
|
data.filter(item => !item[optgroup]).forEach(item => {
|
||||||
|
let child = item[children];
|
||||||
|
if(isArray(child)){
|
||||||
|
findSelected(arr, child, prop);
|
||||||
|
}else{
|
||||||
|
item[selected] && (arr.push(item));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@ -53,6 +53,8 @@ export default function (lan = 'zn') {
|
|||||||
//多选上限
|
//多选上限
|
||||||
max: 0,
|
max: 0,
|
||||||
maxMethod: function(sels, item){},
|
maxMethod: function(sels, item){},
|
||||||
|
//选项显示数量
|
||||||
|
showCount: 0,
|
||||||
//工具条
|
//工具条
|
||||||
toolbar: {
|
toolbar: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -65,6 +67,8 @@ export default function (lan = 'zn') {
|
|||||||
value: 'value',
|
value: 'value',
|
||||||
selected: 'selected',
|
selected: 'selected',
|
||||||
disabled: 'disabled',
|
disabled: 'disabled',
|
||||||
|
children: 'children',
|
||||||
|
optgroup: 'optgroup',
|
||||||
},
|
},
|
||||||
//主题配置
|
//主题配置
|
||||||
theme: {
|
theme: {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { h, Component, render } from '@/components/preact'
|
import { h, Component, render } from '@/components/preact'
|
||||||
import { checkUserAgent, isFunction, toNum } from '@/components/common/util'
|
import { checkUserAgent, isFunction, toNum, filterGroupOption, findSelected, mergeArr } from '@/components/common/util'
|
||||||
|
|
||||||
//渲染类
|
//渲染类
|
||||||
import Tips from './tips';
|
import Tips from './tips';
|
||||||
@ -24,8 +24,13 @@ class Framework extends Component{
|
|||||||
//用于多选上限的边框颜色变化
|
//用于多选上限的边框颜色变化
|
||||||
this.updateBorderColor('');
|
this.updateBorderColor('');
|
||||||
this.resetDate(props.data);
|
this.resetDate(props.data);
|
||||||
let selected = props.prop.selected;
|
this.value(props.initValue ? props.initValue : this.findValue(this.state.data), false);
|
||||||
this.value(props.initValue ? props.initValue : this.state.data.filter(item => item[selected]), false);
|
}
|
||||||
|
|
||||||
|
findValue(data){
|
||||||
|
let list = [];
|
||||||
|
findSelected(list, data, this.props.prop);
|
||||||
|
return list;
|
||||||
}
|
}
|
||||||
|
|
||||||
resetDate(data = []){
|
resetDate(data = []){
|
||||||
@ -36,8 +41,11 @@ class Framework extends Component{
|
|||||||
let data = this.state.data;
|
let data = this.state.data;
|
||||||
let value = this.props.prop.value;
|
let value = this.props.prop.value;
|
||||||
let direction = this.props.direction;
|
let direction = this.props.direction;
|
||||||
|
|
||||||
|
let list = [];
|
||||||
|
filterGroupOption(list, data, this.props.prop);
|
||||||
this.setState({
|
this.setState({
|
||||||
sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => data.find(item => item[value] == val)).filter(a => a),
|
sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => list.find(item => item[value] == val)).filter(a => a),
|
||||||
//下拉框是否展开
|
//下拉框是否展开
|
||||||
show,
|
show,
|
||||||
//下拉方向
|
//下拉方向
|
||||||
@ -53,7 +61,7 @@ class Framework extends Component{
|
|||||||
onReset(data, type){
|
onReset(data, type){
|
||||||
//重置数据
|
//重置数据
|
||||||
if(type === 'data'){
|
if(type === 'data'){
|
||||||
this.resetDate(data);
|
this.setState({ sels: mergeArr(this.findValue(data), this.state.sels, this.props.prop), data });
|
||||||
}else
|
}else
|
||||||
//重置选中数据
|
//重置选中数据
|
||||||
if(type === 'sels'){
|
if(type === 'sels'){
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { h, Component, render } from '@/components/preact'
|
import { h, Component, render } from '@/components/preact'
|
||||||
import { isFunction, safety, mergeArr, IEVersion } from '@/components/common/util'
|
import { isFunction, isArray, safety, mergeArr, IEVersion, filterGroupOption } from '@/components/common/util'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 普通的多选渲染
|
* 普通的多选渲染
|
||||||
@ -111,9 +111,9 @@ class General extends Component{
|
|||||||
|
|
||||||
let { data, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips } = config
|
let { data, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips } = config
|
||||||
|
|
||||||
const { name, value, disabled } = prop;
|
const { name, value, disabled, children, optgroup } = prop;
|
||||||
|
|
||||||
let arr = data;
|
let arr = safety(data);
|
||||||
//是否开启了搜索
|
//是否开启了搜索
|
||||||
if(filterable){
|
if(filterable){
|
||||||
if(remoteSearch){//是否进行远程搜索
|
if(remoteSearch){//是否进行远程搜索
|
||||||
@ -127,10 +127,34 @@ class General extends Component{
|
|||||||
|
|
||||||
this.setState({ loading: false });
|
this.setState({ loading: false });
|
||||||
this.props.onReset(result, 'data');
|
this.props.onReset(result, 'data');
|
||||||
});
|
}, this.props.show);
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
arr = data.filter((item, index) => filterMethod(this.state.filterValue, item, index, prop));
|
const filterData = (item, index) => {
|
||||||
|
const isGroup = item[optgroup];
|
||||||
|
if(isGroup){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
const child = item[children];
|
||||||
|
if(isArray(child) && child.length > 0){//分组模式
|
||||||
|
item[children] = child.filter(filterData);
|
||||||
|
return item[children].length != 0;
|
||||||
|
}
|
||||||
|
return filterMethod(this.state.filterValue, item, index, prop);
|
||||||
|
}
|
||||||
|
arr = arr.filter(filterData);
|
||||||
|
|
||||||
|
for(let i = 0; i < arr.length - 1; i++){
|
||||||
|
let a = arr[i];
|
||||||
|
let b = arr[i + 1];
|
||||||
|
if(a[optgroup] && (b[optgroup] || isArray(b[children]))){
|
||||||
|
arr[i].__del = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(arr.length && arr[arr.length - 1][optgroup]){
|
||||||
|
arr[arr.length - 1].__del = true;
|
||||||
|
}
|
||||||
|
arr = arr.filter(item => !item.__del);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -177,10 +201,10 @@ class General extends Component{
|
|||||||
this.state.pageIndex <= 1 && (prevStyle = disabledStyle);
|
this.state.pageIndex <= 1 && (prevStyle = disabledStyle);
|
||||||
this.state.pageIndex == size && (nextStyle = disabledStyle);
|
this.state.pageIndex == size && (nextStyle = disabledStyle);
|
||||||
|
|
||||||
const defaultCurrClass = {
|
// const defaultCurrClass = {
|
||||||
position: 'relative',
|
// position: 'relative',
|
||||||
borderRadius: '1px',
|
// borderRadius: '1px',
|
||||||
}
|
// }
|
||||||
// {
|
// {
|
||||||
// ''.padEnd(size, ' ').split('').map((s, i) => (
|
// ''.padEnd(size, ' ').split('').map((s, i) => (
|
||||||
// <span style={
|
// <span style={
|
||||||
@ -201,6 +225,11 @@ class General extends Component{
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
}else{
|
||||||
|
//检查是否设置了显示数量上限
|
||||||
|
if(config.showCount > 0){
|
||||||
|
arr = arr.slice(0, config.showCount);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let safetyArr = safety(arr);
|
let safetyArr = safety(arr);
|
||||||
@ -212,12 +241,14 @@ class General extends Component{
|
|||||||
|
|
||||||
let info;
|
let info;
|
||||||
if(tool === 'ALL'){
|
if(tool === 'ALL'){
|
||||||
info = { icon: 'xm-iconfont xm-icon-quanxuan', name: '全选', method: (data) => {
|
info = { icon: 'xm-iconfont xm-icon-quanxuan', name: '全选', method: (pageData) => {
|
||||||
this.props.onReset(mergeArr(data, sels, prop), 'sels');
|
const list = [];
|
||||||
|
filterGroupOption(list, pageData, prop);
|
||||||
|
this.props.onReset(mergeArr(list.filter(item => !item[prop.disabled]), sels, prop), 'sels');
|
||||||
} };
|
} };
|
||||||
}else if(tool === 'CLEAR'){
|
}else if(tool === 'CLEAR'){
|
||||||
info = { icon: 'xm-iconfont xm-icon-qingkong', name: '清空', method: (data) => {
|
info = { icon: 'xm-iconfont xm-icon-qingkong', name: '清空', method: (pageData) => {
|
||||||
this.props.onReset([], 'sels');
|
this.props.onReset(sels.filter(item => item[prop.disabled]), 'sels');
|
||||||
} };
|
} };
|
||||||
}else {
|
}else {
|
||||||
info = tool
|
info = tool
|
||||||
@ -238,9 +269,7 @@ class General extends Component{
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const renderItem = item => {
|
||||||
arr = arr.map(item => {
|
|
||||||
|
|
||||||
const selected = !!sels.find(sel => sel[value] == item[value])
|
const selected = !!sels.find(sel => sel[value] == item[value])
|
||||||
const iconStyle = selected ? {
|
const iconStyle = selected ? {
|
||||||
color: theme.color,
|
color: theme.color,
|
||||||
@ -258,7 +287,29 @@ class General extends Component{
|
|||||||
<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
|
<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})
|
}
|
||||||
|
const renderGroup = item => {
|
||||||
|
const isGroup = item[optgroup];
|
||||||
|
if(isGroup){//分组模式
|
||||||
|
return (
|
||||||
|
<div class="xm-group">
|
||||||
|
<div class="xm-group-item">{ item[name] }</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const child = item[children];
|
||||||
|
if(isArray(child) && child.length > 0){//分组模式
|
||||||
|
return (
|
||||||
|
<div class="xm-group">
|
||||||
|
<div class="xm-group-item">{ item[name] }</div>
|
||||||
|
{ child.map(renderItem) }
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return renderItem(item);
|
||||||
|
}
|
||||||
|
arr = arr.map(renderGroup);
|
||||||
|
|
||||||
if(!arr.length){
|
if(!arr.length){
|
||||||
arr.push(
|
arr.push(
|
||||||
|
|||||||
@ -189,6 +189,15 @@ xm-select{
|
|||||||
bottom: 42px;
|
bottom: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.xm-group{
|
||||||
|
&-item{
|
||||||
|
cursor: default;
|
||||||
|
padding: 0 10px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.xm-option{
|
.xm-option{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user