theluyuan/xm-select
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v1.0.8

Browse Source
This commit is contained in:
maplemei 2019-10-16 23:22:54 +08:00
parent eaa25889c3
commit 9416e64e7e
22 changed files with 448 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
CHANGELOG.md
View File

@ -1,5 +1,28 @@
## 更新日志
### 1.0.8
*2019-10-16*
#### 兼容提示
- 此版本的on方法结构调整, 升级请注意
#### 新增
- 新增分组单击事件 click, 可选值 `SELECT`, `CLEAR`, `AUTO`, `自定义`
- 新增`append`方法追加赋值, `delete`方法删除赋值
- 新增搜索完成回调`filterDone`
#### Bug fixes
- 修复全选和请空不走on监听的问题
- 修复`autoRow`模式下, 无选项时的css样式错误
- 修复`update`后, 下拉框显示状态被重置为隐藏
- 优化`setValue`方法, 可自行判断下拉框的显示状态
- 修复文档错误, 实例没有`render`方法
### 1.0.7
*2019-10-16*

2
dist/static/2.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/static/3.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/static/docs.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/xm-select.js vendored
View File

File diff suppressed because one or more lines are too long

9
docs/assets/common.less
View File

@ -178,6 +178,9 @@ button, input, select, textarea {
display: inline-block;
width: 300px;
}
.xm-select-demo-alert:extend(.xm-select-demo){
margin: 20px;
}
.btn{
outline: 0;
@ -206,10 +209,6 @@ button, input, select, textarea {
}
.demo-ZM03{
.layui-table-cell{
height: auto;
}
table{
margin-bottom: -1px !important;
border-collapse: unset !important;
@ -227,4 +226,4 @@ button, input, select, textarea {
display: flex;
align-items: center;
justify-content: center;
}
}

28
docs/mds/XM05.md
View File

@ -140,14 +140,13 @@ var demo5 = xmSelect.render({
remoteMethod: function(val, cb, show){
axios({
method: 'get',
url: 'https://easy-mock.com/mock/5da028e2cda1720dffee5f85/xm-select/search',
url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
params: {
keyword: val,
}
}).then(response => {
var res = response.data;
cb(res.data)
demo1.setValue([ 1, 2, 3 ], show)
}).catch(err => {
cb([]);
});
@ -157,3 +156,28 @@ var demo5 = xmSelect.render({
</script>
```
:::
### 搜索完成回调
:::demo
```html
<div id="demo6" class="xm-select-demo"></div>
<script>
var demo6 = xmSelect.render({
el: '#demo6',
filterable: true,
filterDone: function(val){
alert('搜索完毕')
},
data: [
{name: '水果', value: 1},
{name: '蔬菜', value: 2},
{name: '桌子', value: 3},
{name: '北京', value: 4},
]
})
</script>
```
:::

16
docs/mds/XM16.md
View File

@ -12,8 +12,8 @@
<script>
var demo1 = xmSelect.render({
el: '#demo1',
on({ arr, item, selected }){
alert(`name: ${item.name}, 状态: ${selected}`)
on({ arr, change, isAdd }){
alert(`已有: ${arr.length} 变化: ${change.length}, 状态: ${isAdd}`)
},
data: [
{name: '张三', value: 'zhangsan', selected: true},
@ -37,8 +37,16 @@ var demo1 = xmSelect.render({
<script>
var demo2 = xmSelect.render({
el: '#demo2',
on({ arr, item, selected }){
if(selected){
toolbar: {
show: true
},
on({ arr, change, isAdd }){
//arr: 当前多选已选中的数据
//change, 此次选择变化的数据,数组
//isAdd, 此次操作是新增还是删除
console.log(arr);
if(isAdd){
var item = change[0];
var index = arr.findIndex(i => i.mutex == item.mutex && i.value != item.value);
if(index != -1){
arr.splice(index, 1);

35
docs/mds/XM21.md
View File

@ -99,3 +99,38 @@ var demo3 = xmSelect.render({
</script>
```
:::
### 分组的单击事件
:::demo
```html
<div id="demo4" class="xm-select-demo"></div>
<script>
var demo4 = xmSelect.render({
el: '#demo4',
toolbar:{
show: true,
},
height: '500px',
data: [
{name: '选中', optgroup: true, click: 'SELECT'},
{name: '张三', value: 1},
{name: '李四', value: 2, disabled: true},
{name: '清空', optgroup: true, click: 'CLEAR'},
{name: '王五', value: 3, disabled: true},
{name: '苹果', value: 4, selected: true},
{name: '自动', optgroup: true, click: 'AUTO'},
{name: '香蕉', value: 5},
{name: '葡萄', value: 6},
{name: '自定义', optgroup: true, click: function(item){
alert('自定义的, 想干嘛干嘛');
}},
{name: '小米', value: 7},
{name: '华为', value: 8},
]
})
</script>
```
:::

18
docs/mds/ZM01.md
View File

@ -8,9 +8,13 @@
:::demo
```html
<div id="demo1" class="xm-select-demo"></div>
<br/><br/>
<button class="btn" id="demo1-test1">赋值张三</button>
<button class="btn" id="demo1-test2">赋值张三(value方式)</button>
<button class="btn" id="demo1-test3">清空</button>
<button class="btn" id="demo1-test3">追加赋值李四</button>
<br/><br/>
<button class="btn" id="demo1-test4">清除李四</button>
<button class="btn" id="demo1-test5">清空</button>
<pre id="demo1-result"></pre>
<script>
@ -25,8 +29,8 @@ var demo1 = xmSelect.render({
document.getElementById('demo1-test1').onclick = function(){
demo1.setValue([
{name: '张三', value: 1},
])
{name: '张三', value: 1},
])
};
document.getElementById('demo1-test2').onclick = function(){
@ -34,6 +38,14 @@ document.getElementById('demo1-test2').onclick = function(){
};
document.getElementById('demo1-test3').onclick = function(){
demo1.append([ 2 ]);
};
document.getElementById('demo1-test4').onclick = function(){
demo1.delete([ 2 ])
};
document.getElementById('demo1-test5').onclick = function(){
demo1.setValue([ ])
};

14
docs/mds/ZM03.md
View File

@ -15,15 +15,15 @@ layui.use('table', function() {
//第一个实例
table.render({
elem: '#demo',
height: 312,
page: true, //开启分页
page: true, //开启分页
height: 500,
cols: [
[ //表头
{ field: 'id', title: 'ID', width: 80, sort: true },
{ field: 'username', title: '用户名', width: 80 },
{ field: 'sex', title: '性别', width: 80, sort: true },
{ field: 'city', title: '城市', width: 80 },
{ field: 'sign', title: '爱好', width: 177, templet: function(d){
{ field: 'sign', title: '爱好', width: 200, templet: function(d){
return '<div id="XM-' + d.id + '" ></div>'
} },
{ field: 'experience', title: '积分', width: 80, sort: true },
@ -45,9 +45,17 @@ layui.use('table', function() {
{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}
],
done: function(res){
//修改一些css样式, 这里虽然能够使用, 但是还是不太友好, 努力中...
var cells = document.querySelectorAll('div[lay-id="demo"] .layui-table-cell');
for(var i = 0 ; i < cells.length ; i++ ){
cells[i].style.overflow = 'unset';
cells[i].style.height = 'auto';
}
//渲染多选
res.data.forEach(item => {
var xm = xmSelect.render({
el: '#XM-' + item.id,
autoRow: true,
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},

35
docs/mds/ZM04.md Normal file
View File

@ -0,0 +1,35 @@
## 远程搜索
:::demo
```html
<div id="demo1"></div>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
autoRow: true,
toolbar: { show: true },
filterable: true,
remoteSearch: true,
remoteMethod: function(val, cb, show){
//这里如果val为空, 则不触发搜索
if(!val){
return cb([]);
}
axios({
method: 'get',
url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
params: {
keyword: val,
}
}).then(response => {
var res = response.data;
cb(res.data)
}).catch(err => {
cb([]);
});
},
})
</script>
```
:::

56
docs/mds/ZM05.md Normal file
View File

@ -0,0 +1,56 @@
## 动态数据
### 本地数据动态赋值
:::demo
```html
<div id="demo1" class="xm-select-demo"></div>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
data: []
})
demo1.update({
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3, disabled: true},
]
})
</script>
```
:::
### 远程数据动态赋值
:::demo
```html
<div id="demo2" class="xm-select-demo"></div>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
toolbar: {show: true},
data: []
})
axios({
method: 'get',
url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
}).then(response => {
var res = response.data;
demo2.update({
data: res.data,
autoRow: true,
})
});
</script>
```
:::

33
docs/mds/ZM06.md Normal file
View File

@ -0,0 +1,33 @@
## 远程搜索
### layer弹出框
:::demo
```html
<button class="btn" id="demo1-btn">弹出多选</button>
<script>
document.getElementById('demo1-btn').onclick = function(){
layer.open({
type: 1,
title: '多选',
content: '<div id="demo1" class="xm-select-demo-alert"></div>',
success: function(layero, index){
//这里因为内容过少, 会被遮挡, 所以简单修改了下样式
document.getElementById('layui-layer' + index).getElementsByClassName('layui-layer-content')[0].style.overflow = 'unset';
//渲染多选
var demo1 = xmSelect.render({
el: '#demo1',
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, disabled: true},
{name: '王五', value: 3},
]
})
}
});
}
</script>
```
:::

42
docs/mds/options.md
View File

@ -15,6 +15,7 @@
| searchTips | 搜索提示 | string | - | 请选择 |
| delay | 搜索延迟 ms | int | - | 500 |
| filterMethod | 搜索回调函数 | function(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key | - | - |
| filterDone | 搜索完成函数 | function(val) val: 当前搜索值 | - | - |
| remoteSearch | 是否开启自定义搜索 (远程搜索)| boolean | true / false | false |
| remoteMethod | 自定义搜索回调函数 | function(val, cb, show) val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data, show: 下拉框显示状态 | - | - |
| direction | 下拉方向| string | auto / up / down | auto |
@ -31,7 +32,7 @@
| show | 展开下拉的回调 | function | - | - |
| hide | 隐藏下拉的回调 | function | - | - |
| template | 自定义渲染选项 | function({ item, sels, name, value }) | - | - |
| on | 监听选中变化 | function({ arr, item, selected }) | - | - |
| on | 监听选中变化 | function({ arr, change, isAdd }) | - | - |
| max | 设置多选选中上限 | int | - | 0 |
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
| name | 表单提交时的name | string | - | select |
@ -45,13 +46,41 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | ------------------------------ | --------------- | ------ | ------ |
| name | 显示名称 | string | - | name |
| value | 选中值 | string | - | value |
| value | 选中值, 当前多选唯一 | string | - | value |
| selected | 是否选中 | string | - | selected |
| disabled | 是否禁用 | string | - | disabled |
| children | 分组children | string | - | children |
| optgroup | 分组optgroup | string | - | optgroup |
### 分组说明
如果children属性为数组, 或者optgroup=true的时候开启分组模式
```
//平级结构下面的数据为一组
{name: '城市', optgroup: true},
//children下的数组为一组
{name: '销售员', children: [
{name: '李四', value: 4, selected: true},
{name: '王五', value: 5},
]},
//可在分组上定义click属性, 来定义点击事件
//这里以optgroup模式为例, children模式同理
{name: '选中', optgroup: true, click: 'SELECT'},
{name: '清空', optgroup: true, click: 'CLEAR'},
{name: '自动', optgroup: true, click: 'AUTO'},
{name: '自定义', optgroup: true, click: function(item){
alert('自定义的, 想干嘛干嘛');
}},
```
### theme
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
@ -109,7 +138,7 @@ model: {
| showIcon | 是否显示工具图标 | boolean | true / false | true |
| list | 工具条数组 (默认有 全选/清空, 可以自定义) | array | - | [ "ALL", "CLEAR" ] |
- 自定义方式
> 自定义方式
```
@ -141,9 +170,10 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
| 事件名 | 说明 | 参数 |
| ------ | ------------------ | -------- |
| getValue | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
| setValue | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉) |
| setValue | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉, 不传默认当前显示状态, 取值: true/false) |
| append | 追加赋值 | (array: 追加的数据) |
| delete | 删除赋值 | (array: 删除的数据) |
| opened | 主动展开下拉 | - |
| closed | 主动关闭下拉 | - |
| render | 重新渲染多选 | (options: 见配置项) |
| reset | 重置为上一次的render状态 | - |
| update | 更新多选选中, reset不保留 | - |
| update | 更新多选选中, reset不保留 | (options: 见配置项) |

5
docs/router.js
View File

@ -78,7 +78,10 @@ export default [{
children: [
{ path: '/example-custom/ZM01', name: '赋值与取值', component: importMd('/ZM01') },
{ path: '/example-custom/ZM02', name: '表单提交', component: importMd('/ZM02') },
// { path: '/example-custom/ZM03', name: '表格中多选', component: importMd('/ZM03') },
{ path: '/example-custom/ZM03', name: '表格中多选', component: importMd('/ZM03') },
{ path: '/example-custom/ZM04', name: '远程搜索', component: importMd('/ZM04') },
{ path: '/example-custom/ZM05', name: '动态数据', component: importMd('/ZM05') },
{ path: '/example-custom/ZM06', name: '弹框中的多选', component: importMd('/ZM06') },
// { path: '/example-custom/ZTEST', name: '测试', component: importMd('/ZTEST') },
]
}, {

24
src/components/common/util.js
View File

@ -169,3 +169,27 @@ export function findSelected(arr, data, prop){
}
});
}
export function addGroupLabel(arr, prop){
const { disabled, children, optgroup, value } = prop;
let group;
for(let i = 0; i < arr.length; i++){
let item = arr[i];
if(item[optgroup]){
group = item;
group.__value = [];
continue;
}
let child = item[children];
if(child && child.length > 0){
group = null;
item.__value = child.filter(c => !c[disabled]).map(c => c[value]);
continue;
}
if(!group || item[disabled]){
continue;
}
group.__value.push(item[value]);
}
return arr;
}

1
src/components/config/options.js
View File

@ -71,6 +71,7 @@ export default function (lan = 'zn') {
disabled: 'disabled',
children: 'children',
optgroup: 'optgroup',
click: 'click',
},
//主题配置
theme: {

31
src/components/core/index.js
View File

@ -94,7 +94,7 @@ class xmOptions {
*/
getValue(type){
let arr = safety(childs[this.options.el].state.sels);
if(type === 'name'){
return arr.map(item => item[this.options.prop.name]);
}else
@ -107,7 +107,7 @@ class xmOptions {
if(type === 'valueStr'){
return arr.map(item => item[this.options.prop.value]).join(',');
}
return arr;
}
@ -119,10 +119,33 @@ class xmOptions {
warn('请传入数组结构...')
return ;
}
childs[this.options.el].value(sels, !!show);
childs[this.options.el].value(sels, show);
return this;
}
/**
* 追加赋值
*/
append(sels){
if(!isArray(sels)){
warn('请传入数组结构...')
return ;
}
childs[this.options.el].append(sels);
return this;
}
/**
* 删除赋值
*/
delete(sels){
if(!isArray(sels)){
warn('请传入数组结构...')
return ;
}
childs[this.options.el].del(sels);
return this;
}
}

80
src/components/element/framework.js
View File

@ -24,7 +24,7 @@ class Framework extends Component{
//用于多选上限的边框颜色变化
this.updateBorderColor('');
this.resetDate(props.data);
this.value(props.initValue ? props.initValue : this.findValue(this.state.data), false);
this.value(props.initValue ? props.initValue : this.findValue(this.state.data), !!this.state.show);
}
findValue(data){
@ -33,22 +33,58 @@ class Framework extends Component{
return list;
}
resetSelectValue(sels = [], change = [], isAdd){
let on = this.props.on;
if(isFunction(on)){
on({ arr: sels, change, isAdd });
}
this.setState({ sels });
}
resetDate(data = []){
this.setState({ data });
}
value(sels, show){
let data = this.state.data;
let value = this.props.prop.value;
if(show !== false && show !== true){
show = this.state.show;
}
let changeData = this.exchangeValue(sels);
this.resetSelectValue(changeData, changeData, true);
this.setState({ show })
}
exchangeValue(sels){
let data = this.state.data;
let value = this.props.prop.value;
let list = [];
filterGroupOption(list, data, this.props.prop);
this.setState({
sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => list.find(item => item[value] == val)).filter(a => a),
//下拉框是否展开
show,
})
}
return sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => list.find(item => item[value] == val)).filter(a => a);
}
append(arr){
let changeData = this.exchangeValue(arr);
this.resetSelectValue(mergeArr(changeData, this.state.sels, this.props.prop), changeData, true);
}
del(arr){
let value = this.props.prop.value;
let sels = this.state.sels;
arr = this.exchangeValue(arr);
arr.forEach(v => {
let index = sels.findIndex(item => item[value] === v[value]);
if(index != -1){
sels.splice(index, 1);
}
});
this.resetSelectValue(sels, arr, false);
}
auto(arr){
let value = this.props.prop.value;
let sels = arr.filter(v => this.state.sels.findIndex(item => item[value] === v) != -1);
sels.length == arr.length ? this.del(arr) : this.append(arr);
}
updateBorderColor(tmpColor){
this.setState({ tmpColor });
@ -57,11 +93,25 @@ class Framework extends Component{
onReset(data, type){
//重置数据
if(type === 'data'){
this.setState({ sels: mergeArr(this.findValue(data), this.state.sels, this.props.prop), data });
let changeData = this.findValue(data);
this.resetSelectValue(mergeArr(changeData, this.state.sels, this.props.prop), changeData, true);
this.setState({ data });
}else
//重置选中数据
if(type === 'sels'){
this.setState({ sels: data });
this.resetSelectValue(data, data, true);
}else
//追加数据
if(type === 'append'){
this.append(data);
}else
//清理数据
if(type === 'delete'){
this.del(data);
}else
//自动判断模式
if(type === 'auto'){
this.auto(data);
}
}
@ -157,7 +207,7 @@ class Framework extends Component{
let index = sels.findIndex(sel => sel[valueProp] == item[valueProp])
if(index != -1){
sels.splice(index, 1);
this.setState({ sels });
this.resetSelectValue(sels, [item], !selected);
}
}else{
//查看是否设置了多选上限
@ -173,14 +223,12 @@ class Framework extends Component{
//如果是单选模式
if(radio){
this.setState({ sels: [item] });
this.resetSelectValue([item], [item], !selected);
}else{
this.setState({ sels: [...sels, item] });
this.resetSelectValue([...sels, item], [item], !selected);
}
}
on && on({ arr: this.state.sels, item, selected: !selected });
//检查是否为选择即关闭状态, 强制删除情况下不做处理
clickClose && !mandatoryDelete && this.onClick();
};

42
src/components/element/model/general.js
View File

@ -1,5 +1,5 @@
import { h, Component, render } from '@/components/preact'
import { isFunction, isArray, safety, mergeArr, IEVersion, filterGroupOption } from '@/components/common/util'
import { isFunction, isArray, safety, deepMerge, mergeArr, IEVersion, filterGroupOption, addGroupLabel } from '@/components/common/util'
/**
* 普通的多选渲染
@ -28,6 +28,21 @@ class General extends Component{
this.blockClick(e);
}
groupClick(item, e){
let m = item[this.props.prop.click];
if(m === 'SELECT'){
this.props.onReset(item.__value, 'append');
}else if(m === 'CLEAR'){
this.props.onReset(item.__value, 'delete');
}else if(m === 'AUTO'){
this.props.onReset(item.__value, 'auto');
}else if(isFunction(m)){
m(item);
}
//阻止父组件上的事件冒泡
this.blockClick(e);
}
blockClick(e){
e.stopPropagation();
}
@ -69,6 +84,7 @@ class General extends Component{
this.searchCid = setTimeout(() => this.setState({
filterValue: this.__value,
remote: true,
callback: true,
}), this.props.delay);
}
}
@ -107,13 +123,24 @@ class General extends Component{
}
}
componentDidUpdate(){
if(this.state.callback){
this.setState({ callback: false });
let done = this.props.filterDone;
if(isFunction(done)){
done(this.state.filterValue);
}
}
}
render(config) {
let { data, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips } = config
const { name, value, disabled, children, optgroup } = prop;
let arr = safety(data);
let arr = deepMerge([], data);
//是否开启了搜索
if(filterable){
if(remoteSearch){//是否进行远程搜索
@ -232,7 +259,8 @@ class General extends Component{
}
}
let safetyArr = safety(arr);
let safetyArr = deepMerge([], arr);
//工具条操作
const toolbar = (
<div class='xm-toolbar'>
@ -294,28 +322,28 @@ class General extends Component{
</div>
)
}
const renderGroup = item => {
const isGroup = item[optgroup];
if(isGroup){//分组模式
return (
<div class="xm-group">
<div class="xm-group-item">{ item[name] }</div>
<div class="xm-group-item" onClick={ this.groupClick.bind(this, 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>
<div class="xm-group-item" onClick={ this.groupClick.bind(this, item) }>{ item[name] }</div>
{ child.map(renderItem) }
</div>
)
}
return renderItem(item);
}
arr = arr.map(renderGroup);
arr = addGroupLabel(arr, prop).map(renderGroup);
if(!arr.length){
arr.push(

11
src/style/index.less
View File

@ -68,7 +68,7 @@ xm-select{
& > .xm-tips{
color: #999999;
padding: 0 10px;
height: 100%;
position: absolute;
}
& > .xm-icon{
@ -116,16 +116,9 @@ xm-select{
.scroll{
.label-content{
line-height: @heightLabel;
height: calc(100% - 20px);
display: flex;
align-items: baseline;
white-space: pre;
line-height: @heightLabel;
padding: 3px 30px 3px 10px;
&:after{
content: '-';
opacity: 0;
}
}
}