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

v1.0.4

Browse Source
This commit is contained in:
maplemei
2019-09-27 19:10:51 +08:00
parent cdce32f11f
commit 6feee42b47
21 changed files with 871 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/mds/XM18.md Normal file
View File

@@ -0,0 +1,70 @@
## 多选上限
### 最多选择2个
:::demo
```html
<div id="demo1" class="xm-select-demo"></div>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
max: 2,
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
]
})
</script>
```
:::
### 自定义选超的提示
:::demo
```html
<div id="demo2" class="xm-select-demo"></div>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
max: 2,
maxMethod(seles, item){
alert(`${item.name}不能选了, 已经超了`)
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
]
})
</script>
```
:::
### 自定义选超的闪烁颜色
:::demo
```html
<div id="demo3" class="xm-select-demo"></div>
<script>
var demo3 = xmSelect.render({
el: '#demo3',
max: 2,
theme: {
maxColor: 'orange',
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
]
})
</script>
```
:::

111
docs/mds/XM19.md Normal file
View File

@@ -0,0 +1,111 @@
## 工具条
### 默认工具条
:::demo
```html
<div id="demo1" class="xm-select-demo"></div>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
toolbar: {
show: true,
},
filterable: true,
paging: true,
pageSize: 3,
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
{name: '赵六', value: 4},
{name: '苹果', value: 5},
{name: '香蕉', value: 6},
{name: '凤梨', value: 7},
{name: '葡萄', value: 8},
{name: '樱桃', value: 9},
{name: '车厘子', value: 10},
{name: '火龙果', value: 11},
]
})
</script>
```
:::
### 隐藏图标
:::demo
```html
<div id="demo2" class="xm-select-demo"></div>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
toolbar: {
show: true,
showIcon: false,
},
filterable: true,
paging: true,
pageSize: 3,
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
{name: '赵六', value: 4},
{name: '苹果', value: 5},
{name: '香蕉', value: 6},
{name: '凤梨', value: 7},
{name: '葡萄', value: 8},
{name: '樱桃', value: 9},
{name: '车厘子', value: 10},
{name: '火龙果', value: 11},
]
})
</script>
```
:::
### 自定义工具条
:::demo
```html
<div id="demo3" class="xm-select-demo"></div>
<script>
var demo3 = xmSelect.render({
el: '#demo3',
toolbar: {
show: true,
list: ['ALL', {
name: '自定义',
icon: 'el-icon-star-off',
method(data){
alert('我是自定义的');
}
}]
},
filterable: true,
paging: true,
pageSize: 3,
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3},
{name: '赵六', value: 4},
{name: '苹果', value: 5},
{name: '香蕉', value: 6},
{name: '凤梨', value: 7},
{name: '葡萄', value: 8},
{name: '樱桃', value: 9},
{name: '车厘子', value: 10},
{name: '火龙果', value: 11},
]
})
</script>
```
:::

99
docs/mds/ZM01.md Normal file
View File

@@ -0,0 +1,99 @@
## 赋值与取值
### 给多选赋值
函数`setValue(array)`, 动态赋值多选选中的数据, array可以是value数组, 也可以是完整的object数组
:::demo
```html
<div id="demo1" class="xm-select-demo"></div>
<button class="btn" id="demo1-test1">赋值张三</button>
<button class="btn" id="demo1-test2">赋值张三(value方式)</button>
<button class="btn" id="demo1-test3">清空</button>
<pre id="demo1-result"></pre>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
document.getElementById('demo1-test1').onclick = function(){
demo1.setValue([
{name: '张三', value: 1},
])
};
document.getElementById('demo1-test2').onclick = function(){
demo1.setValue([ 1 ])
};
document.getElementById('demo1-test3').onclick = function(){
demo1.setValue([ ])
};
</script>
```
:::
### 取值
函数`getValue(type)`, type类型 name, nameStr, value, valueStr
:::demo
```html
<div id="demo2" class="xm-select-demo"></div>
<button class="btn" id="demo2-getValue">获取选中值</button>
<br/><br/>
<button class="btn" id="name">获取name数组</button>
<button class="btn" id="nameStr">获取name字符串</button>
<button class="btn" id="value">获取value数组</button>
<button class="btn" id="valueStr">获取value字符串</button>
<pre id="demo2-value"></pre>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
document.getElementById('demo2-getValue').onclick = function(){
//获取当前多选选中的值
var selectArr = demo2.getValue();
document.getElementById('demo2-value').innerHTML = JSON.stringify(selectArr, null, 2);
}
document.getElementById('name').onclick = function(){
//获取当前多选选中的值
var selectArr = demo2.getValue('name');
document.getElementById('demo2-value').innerHTML = JSON.stringify(selectArr, null, 2);
}
var types = ['name', 'nameStr', 'value', 'valueStr'];
types.forEach(function(type){
document.getElementById(type).onclick = function(){
//获取当前多选选中的值
var selectArr = demo2.getValue(type);
document.getElementById('demo2-value').innerHTML = JSON.stringify(selectArr, null, 2);
}
});
</script>
```
:::

50
docs/mds/ZM02.md Normal file
View File

@@ -0,0 +1,50 @@
## 表单提交
### 默认表单提交
:::demo
```html
<form>
<div id="demo1" class="xm-select-demo"></div>
<button class="btn" type="submit">提交</button>
</form>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>
```
:::
### 修改name
:::demo
```html
<form>
<div id="demo2" class="xm-select-demo"></div>
<button class="btn" type="submit">提交</button>
</form>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
name: 'lalalalalala',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>
```
:::

2
docs/mds/install.md
View File

@@ -28,7 +28,7 @@
[![star](https://gitee.com/maplemei/xm-select/badge/star.svg?theme=dark)](https://gitee.com/maplemei/xm-select/stargazers)
[![fork](https://gitee.com/maplemei/xm-select/badge/fork.svg?theme=dark)](https://gitee.com/maplemei/xm-select/members)
[https://gitee.com/maplemei/xm-select](https://gitee.com/maplemei/xm-select)
[码云下载](https://gitee.com/maplemei/xm-select/releases)

48
docs/mds/options.md
View File

@@ -32,6 +32,10 @@
| hide | 隐藏下拉的回调 | function | - | - |
| template | 自定义渲染选项 | function({ item, sels, name, value }) | - | - |
| on | 监听选中变化 | function({ arr, item, selected }) | - | - |
| max | 设置多选选中上限 | int | - | 0 |
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
| name | 表单提交时的name | string | - | select |
| toolbar | 工具条, 具体看下表 | object | - | - |
### prop
@@ -46,9 +50,10 @@
### theme
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | ------------------------------ | --------------- | ------ | ------ |
| color | 颜色 | string | - | #009688 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | --------- | --------------- | ------ | ------ |
| color | 主题颜色 | string | - | #009688 |
| maxColor | 选中上限闪烁边框颜色 | string | - | #e54d42 |
### model
@@ -90,6 +95,37 @@ model: {
```
### toolbar
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | --------- | --------------- | ------ | ------ |
| show | 是否展示工具条 | boolean | true / false | false |
| showIcon | 是否显示工具图标 | boolean | true / false | true |
| list | 工具条数组 (默认有 全选/清空, 可以自定义) | array | - | [ "ALL", "CLEAR" ] |
- 自定义方式
```
list: [ "ALL", "CLEAR",
{
//显示图标, 可以是layui内置的图标, 也可以是自己引入的图标
//传入的icon会转化为 <i class="layui-icon layui-icon-face-smile"></i>
icon: 'layui-icon layui-icon-face-smile',
//显示名称
name: 'xxx',
//点击时触发的回调
method: function(data){
//data 当前页面的数据
}
}
]
```
### 方法
:::warning
@@ -98,10 +134,10 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
| 事件名 | 说明 | 参数 |
| ------ | ------------------ | -------- |
| getValue | 获取当前选中的数据 | - |
| setValue | 动态设置数据 | array: 选中的数据, show: 是否展开下拉 |
| getValue | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
| setValue | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉) |
| opened | 主动展开下拉 | - |
| closed | 主动关闭下拉 | - |
| render | 重新渲染多选 | (options):见配置项 |
| render | 重新渲染多选 | (options: 见配置项) |
| reset | 重置为上一次的render状态 | - |
| update | 更新多选选中, reset不保留 | - |

11
docs/mds/question.md
View File

@@ -1,10 +1,16 @@
## 常见问题
### formSelects 与 xm-select
[formSelects](https://github.com/hnzzmsf/layui-formSelects/)是作者很久以前开发的一款多选插件, 在jQuery时代还是相对比较稳定, 不过性能上有很大的问题。痛并思痛后，开始学习其他开源组件的编写方案，最后决定重新开发。
[xm-select](https://gitee.com/maplemei/xm-select)作者精心二次开发的组件, 在formSelects的样式基础上进行了性能优化。目前看来还是比较稳定的 ^_^
### 1.在哪里下载
[Gitee码云下载](https://gitee.com/maplemei/xm-select), 使用时引入`xm-select.js`即可, 具体请看[入门指南](/#/component/install)
[Gitee码云下载](https://gitee.com/maplemei/xm-select/releases), 使用时引入`xm-select.js`即可, 已经内置了css, 具体请看[入门指南](/#/component/install)
### 2.为什么多选不显示
@@ -14,4 +20,5 @@
### 3.渲染后还是不显示
打开控制台查看是否报错, 加群: 660408068, 询问
- 打开控制台查看是否报错
- 加群: 660408068, 询问