v1.0.11
#### 新增 - 新增`disabled`配置, 可以禁用多选 - 新增`create`配置, 可以创建条目, 具体见 [创建条目](https://maplemei.gitee.io/xm-select/#/example/XM27) - 方法`warning`新增参数`sustain`, 可以配置是否持续显示 - 新增全局`get`方法, 可以获取多选渲染后的对象 - 新增全局`batch`方法, 可以批量给渲染后的多选执行方法 #### Bug fixes - 修复`update`方法, 会使已选中数据丢失的问题 - 修复`Safari`浏览器下, 搜索框无法聚焦的问题
This commit is contained in:
maplemei
@@ -5,6 +5,14 @@
|
||||
|
||||
放下她, 让我来!!! 默认颜色`#e54d42`, 多选上限的样色
|
||||
|
||||
```
|
||||
/*
|
||||
* COLOR: 自定义颜色, 默认是 options.theme.maxColor的颜色
|
||||
* SUSTAIN: 是否持续显示, 默认为false
|
||||
*/
|
||||
xmSelectObj.warning(COLOR, SUSTAIN);
|
||||
```
|
||||
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@@ -31,7 +39,6 @@ document.getElementById('demo1-warning').onclick = function(){
|
||||
|
||||
### 自定义闪烁颜色
|
||||
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
@@ -53,3 +60,29 @@ document.getElementById('demo2-warning').onclick = function(){
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 持续显示
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo3-warning">警告</button>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('demo3-warning').onclick = function(){
|
||||
demo3.warning('#6739b6', true);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
90
docs/mds/XM26.md
Normal file
90
docs/mds/XM26.md
Normal file
@@ -0,0 +1,90 @@
|
||||
## 禁用
|
||||
|
||||
|
||||
### 渲染禁用
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
disabled: true
|
||||
})
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
disabled: true,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 动态启用禁用
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo21">禁用</button>
|
||||
<button class="btn" id="demo22">启用</button>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('demo21').onclick = function(){
|
||||
demo2.update({ disabled: true });
|
||||
}
|
||||
document.getElementById('demo22').onclick = function(){
|
||||
demo2.update({ disabled: false });
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 选完`张三`后禁用
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo3-disabled">启用</button>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
],
|
||||
on({ arr, change, isAdd }){
|
||||
var hasZS = change.find(item => item.name === '张三');
|
||||
if(isAdd && hasZS){
|
||||
demo3.update({ disabled: true });
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//没有做不到, 只有想不到, 把多选玩出花来吧
|
||||
document.getElementById('demo3-disabled').onclick = function(){
|
||||
demo3.update({ disabled: false });
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
78
docs/mds/XM27.md
Normal file
78
docs/mds/XM27.md
Normal file
@@ -0,0 +1,78 @@
|
||||
## 创建条目
|
||||
|
||||
|
||||
### 搜索不存在则创建条目
|
||||
|
||||
```
|
||||
//想创建就必须要开启本地搜索
|
||||
xmSelect.render({
|
||||
//...
|
||||
filterable: true,
|
||||
create: function(val){
|
||||
//返回一个创建成功的对象, val是搜索的数据
|
||||
return {
|
||||
name: '创建-' + val,
|
||||
value: val
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
filterable: true,
|
||||
create: function(val){
|
||||
return {
|
||||
name: '创建-' + val,
|
||||
value: val
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 单选创建
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
radio: true,
|
||||
clickClose: true,
|
||||
filterable: true,
|
||||
create: function(val){
|
||||
return {
|
||||
name: '创建-' + val,
|
||||
value: val
|
||||
}
|
||||
},
|
||||
model: {
|
||||
icon: 'hidden',
|
||||
label: {
|
||||
type: 'text',
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
66
docs/mds/ZM07.md
Normal file
66
docs/mds/ZM07.md
Normal file
@@ -0,0 +1,66 @@
|
||||
## 获取实例对象
|
||||
|
||||
|
||||
### 全局方法 get
|
||||
|
||||
```
|
||||
//所有
|
||||
xmSelect.get();
|
||||
//字符串
|
||||
xmSelect.get('#demo2');
|
||||
//正则
|
||||
xmSelect.get(/demo.*/);
|
||||
//过滤方法
|
||||
xmSelect.get((el) => {
|
||||
return el == '#demo1' || el == '#xm3'
|
||||
});
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<div id="xm3" class="xm-select-demo"></div>
|
||||
|
||||
<div><button class="btn" id="btn1">get(所有)</button></div>
|
||||
<div><button class="btn" id="btn2">get(字符串)</button></div>
|
||||
<div><button class="btn" id="btn3">get(正则)</button></div>
|
||||
<div><button class="btn" id="btn4">get(过滤方法)</button></div>
|
||||
|
||||
<script>
|
||||
|
||||
['#demo1', '#demo2', '#xm3'].forEach((el, index) => {
|
||||
xmSelect.render({
|
||||
el,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('btn1').onclick = function(){
|
||||
var xmList = xmSelect.get();
|
||||
alert('当前页面多选个数: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn2').onclick = function(){
|
||||
var xmList = xmSelect.get('#demo2');
|
||||
alert('获取 #demo2 实例: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn3').onclick = function(){
|
||||
var xmList = xmSelect.get(/demo.*/);
|
||||
alert('获取匹配正则 /demo.*/ 的实例: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn4').onclick = function(){
|
||||
var xmList = xmSelect.get((el) => {
|
||||
return el == '#demo1' || el == '#xm3'
|
||||
});
|
||||
alert('自定义方法的实例: ' + xmList.length)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
61
docs/mds/ZM08.md
Normal file
61
docs/mds/ZM08.md
Normal file
@@ -0,0 +1,61 @@
|
||||
## 批量操作
|
||||
|
||||
|
||||
### 批量操作已渲染实例
|
||||
|
||||
```
|
||||
//filter, 同get方法
|
||||
//method, 需要执行的方法
|
||||
//args, 执行方法的参数
|
||||
xmSelect.batch(filter, method, ...args);
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<div id="xm3" class="xm-select-demo"></div>
|
||||
|
||||
<div><button class="btn" id="btn1">batch禁用</button></div>
|
||||
<div><button class="btn" id="btn2">batch启用</button></div>
|
||||
<div><button class="btn" id="btn3">batch警告</button></div>
|
||||
<div><button class="btn" id="btn4">batch获取已选中数据</button></div>
|
||||
|
||||
<pre id="demo-value"></pre>
|
||||
|
||||
<script>
|
||||
|
||||
['#demo1', '#demo2', '#xm3'].forEach((el, index) => {
|
||||
xmSelect.render({
|
||||
el,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('btn1').onclick = function(){
|
||||
xmSelect.batch('', 'update', {
|
||||
disabled: true
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('btn2').onclick = function(){
|
||||
xmSelect.batch('', 'update', {
|
||||
disabled: false
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('btn3').onclick = function(){
|
||||
xmSelect.batch(/demo.*/, 'warning', '#F00', true);
|
||||
}
|
||||
|
||||
document.getElementById('btn4').onclick = function(){
|
||||
var selectArr = xmSelect.batch(null, 'getValue', 'name');
|
||||
document.getElementById('demo-value').innerHTML = JSON.stringify(selectArr, null, 2);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
@@ -10,8 +10,15 @@
|
||||
//先渲染多选
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
paging: true,
|
||||
pageSize: 2,
|
||||
autoRow: true,
|
||||
filterable: true,
|
||||
create: val => {
|
||||
console.log(val)
|
||||
return {
|
||||
name: val,
|
||||
value: val,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return [
|
||||
{name: '销售员', children: [
|
||||
|
||||
@@ -41,6 +41,8 @@
|
||||
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
|
||||
| autoRow | 是否开启自动换行(选项过多时) | boolean | true / false | false |
|
||||
| size | 尺寸 | string | large / medium / small / mini | medium |
|
||||
| disabled | 是否禁用多选 | boolean | true / false | false |
|
||||
| create | 创建条目 | function(val), val: 搜索的数据 | - | null |
|
||||
|
||||
|
||||
### prop
|
||||
@@ -163,7 +165,38 @@ list: [ "ALL", "CLEAR",
|
||||
```
|
||||
|
||||
|
||||
### 方法
|
||||
### 全局方法
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | ------------------ | -------- | -------- |
|
||||
| render | 渲染多选 | (options: 配置项) | 实例对象 |
|
||||
| get | 获取页面中已经渲染的多选 | (filter: 过滤`el`) | 符合条件的实例数组 |
|
||||
| batch | 批量操作已渲染的多选 | (filter: 过滤`el`, method: 方法, ...方法参数) | 符合条件的实例数组 |
|
||||
|
||||
```
|
||||
//render 使用方式
|
||||
xmSelect.render(OPTIONS);
|
||||
|
||||
//get 使用方式
|
||||
xmSelect.get('#demo1'); //指定某一个获取
|
||||
xmSelect.get(/.*demo1.*/); //正则获取
|
||||
//自定义方法获取
|
||||
xmSelect.get(function(el){
|
||||
return el == '#demo1' || el == '#demo2';
|
||||
});
|
||||
|
||||
//batch 使用方式
|
||||
//批量执行禁用
|
||||
xmSelect.batch(/.*demo/, 'update', {
|
||||
disabled: true,
|
||||
});
|
||||
//批量执行warning
|
||||
xmSelect.batch(/.*demo/, 'warning', '#F00', true);
|
||||
```
|
||||
|
||||
|
||||
### 实例方法
|
||||
|
||||
:::warning
|
||||
xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
|
||||
@@ -179,4 +212,4 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
|
||||
| closed | 主动关闭下拉 | - |
|
||||
| reset | 重置为上一次的render状态 | - |
|
||||
| update | 更新多选选中, reset不保留 | (options: 见配置项) |
|
||||
| warning | 警告 | (color: 默认同theme.maxColor) |
|
||||
| warning | 警告 | (color: 默认同theme.maxColor, sustain: 是否持续显示) |
|
||||
|
||||
@@ -26,4 +26,35 @@
|
||||
|
||||
### 4.占位标签为什么是div
|
||||
|
||||
演示中使用的是div, 不限制标签, 但是不建议使用`select`, 因为`layui`会渲染`select`标签
|
||||
演示中使用的是div, 不限制标签, 但是不建议使用`select`, 因为`layui`会渲染`select`标签
|
||||
|
||||
|
||||
### 5.动态数据渲染报错
|
||||
|
||||
|
||||
|
||||
检查设置的data数据是否为数组类型
|
||||
|
||||
```
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: []
|
||||
})
|
||||
|
||||
//....N多操作以后
|
||||
var arr = data;//这里的data可能是ajax返回的数据
|
||||
|
||||
//这里必须是 [object Array]
|
||||
console.log(Object.prototype.toString.call(arr));
|
||||
//如果是 [object String]
|
||||
//1. JSON数据
|
||||
arr = JSON.parse(arr);
|
||||
//2. 类似JSON的数据
|
||||
arr = eval('(' + arr + ')');
|
||||
|
||||
demo1.update({
|
||||
data: arr,
|
||||
})
|
||||
|
||||
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user