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

v1.1.0.Beta

Browse Source
This commit is contained in:
maplemei
2019-11-23 20:10:47 +08:00
parent b14cbaa913
commit 57a0ab9f15
22 changed files with 285 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/mds/XM01.md
View File

@@ -24,3 +24,22 @@ var demo1 = xmSelect.render({
```
:::
### 用dom进行渲染
:::demo `el`绑定的不一定是id, 也可以是dom元素, 不支持jQuery dom对象
```html
<div id="demo2" class="xm-select-demo"></div>
<script>
var demo2 = xmSelect.render({
el: document.querySelector('#demo2'),
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>
```
:::

78
docs/mds/XM16.md
View File

@@ -1,5 +1,20 @@
## 监听选择
```
xmSelect.render({
on: function(data){
//arr: 当前多选已选中的数据
var arr = data.arr;
//change, 此次选择变化的数据,数组
var change = data.change;
//isAdd, 此次操作是新增还是删除
var isAdd = data.isAdd;
//可以return一个数组, 代表想选中的数据
//return []
},
})
```
### 实时监听
@@ -16,8 +31,15 @@
<script>
var demo1 = xmSelect.render({
el: '#demo1',
on({ arr, change, isAdd }){
alert(`已有: ${arr.length} 变化: ${change.length}, 状态: ${isAdd}`)
on: function(data){
//arr: 当前多选已选中的数据
var arr = data.arr;
//change, 此次选择变化的数据,数组
var change = data.change;
//isAdd, 此次操作是新增还是删除
var isAdd = data.isAdd;
alert('已有: '+arr.length+' 变化: '+change.length+', 状态: ' + isAdd)
},
data: [
{name: '张三', value: 'zhangsan', selected: true},
@@ -79,3 +101,53 @@ var demo2 = xmSelect.render({
</script>
```
:::
### 监听+动态修改
有时全选也是一种状态, 列表中有全选, 与其他选项互斥
:::demo
```html
<div id="demo3" class="xm-select-demo"></div>
<script>
var demo3 = xmSelect.render({
el: '#demo3',
on: function(data){
//可以return一个数组, 代表想选中的数据
//arr: 当前多选已选中的数据
var arr = data.arr;
//change, 此次选择变化的数据,数组
var change = data.change;
//isAdd, 此次操作是新增还是删除
var isAdd = data.isAdd;
if(isAdd){
var allItem = change.find(function(item){
return item.value === 0;
})
if(allItem){
return [allItem];
}
allItem = arr.find(function(item){
return item.value === 0;
})
if(allItem){
return change;
}
}
},
data: [
{name: '全选', value: 0},
{name: '北京', value: 1},
{name: '上海', value: 2},
{name: '广州', value: 3},
{name: '深圳', value: 4},
]
})
</script>
```
:::

20
docs/mds/ZM02.md
View File

@@ -25,19 +25,29 @@ var demo1 = xmSelect.render({
:::
### 修改name
### 修改name, 表单验证
```
{
name: 'lalalalalala',
layVerify: 'required',
layVerType: 'tips',
}
```
:::demo
```html
<form>
<form class="layui-form">
<div id="demo2" class="xm-select-demo"></div>
<button class="btn" type="submit">提交</button>
<button class="btn" type="submit" lay-submit>提交</button>
</form>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
name: 'lalalalalala',
name: 'lalalalalala',
layVerify: 'required',
layVerType: 'tips',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
@@ -47,4 +57,4 @@ var demo2 = xmSelect.render({
</script>
```
:::
:::

7
docs/mds/ZP02.md
View File

@@ -144,9 +144,12 @@ var demo2 = xmSelect.render({
lazy: true,
load: function(item, cb){
setTimeout(function(){
if(item.name.endsWith('2')){
return cb([]);
}
cb([
{name: item.name + 1, value: item.value + '1', children: [] },
{name: item.name + 2, value: item.value + '2' },
{name: item.name + 2, value: item.value + '2', children: [] },
])
}, 500)
}
@@ -155,7 +158,7 @@ var demo2 = xmSelect.render({
data(){
return [
{name: '销售员', value: -1, children: [
{name: '张三1', value: 100, selected: true, children: []},
{name: '张三', value: 100, selected: true, children: []},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
]},

170
docs/mds/options.md
View File

@@ -3,61 +3,63 @@
### 配置项
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | ------------------------------ | --------------- | ------ | ------ |
| el | 渲染对象, css选择器 | string | - | - |
| language | 语言选择 | string | zn / en | zn |
| data | 显示的数据 | array | - | [ ] |
| content | 自定义下拉框html | string | - | - |
| initValue | 初始化选中的数据, 需要在data中存在 | array | - | null |
| tips | 默认提示, 类似于placeholder | string | - | 请选择 |
| empty | 空数据提示 | string | - | 暂无数据 |
| filterable | 是否开启搜索 | boolean | true / false | false |
| searchTips | 搜索提示 | string | - | 请选择 |
| delay | 搜索延迟 ms | int | - | 500 |
| filterMethod | 搜索回调函数 | function(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key | - | - |
| filterDone | 搜索完成函数 | function(val, list) val: 当前搜索值, list: 过滤后的数据 | - | - |
| remoteSearch | 是否开启自定义搜索 (远程搜索)| boolean | true / false | false |
| remoteMethod | 自定义搜索回调函数 | function(val, cb, show, pageIndex) val: 当前搜索值, cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码, show: 下拉框显示状态, pageIndex: 分页下当前页码 | - | - |
| direction | 下拉方向| string | auto / up / down | auto |
| style | 自定义样式| object | - | { } |
| height | 默认最大高度| string | - | 200px |
| paging | 是否开启自定义分页 | boolean | true / false | false |
| pageSize | 分页条数 | int | - | 10 |
| pageEmptyShow | 分页无数据是否显示 | boolean | true / false | true |
| pageRemote | 是否开启远程分页 | boolean | true / false | true |
| radio | 是否开启单选模式 | boolean | true / false | false |
| repeat | 是否开启重复性模式 | boolean | true / false | false |
| clickClose | 是否点击选项后自动关闭下拉框 | boolean | true / false | false |
| prop | 自定义属性名称, 具体看下表 | object | - | |
| theme | 主题配置, 具体看下表 | object | - | |
| model | 模型, 多选的展示方式, 具体见下表 | object | - | |
| show | 展开下拉的回调 | function | - | - |
| hide | 隐藏下拉的回调 | function | - | - |
| template | 自定义渲染选项 | function({ item, sels, name, value }) | - | - |
| on | 监听选中变化 | function({ arr, change, isAdd }) | - | - |
| max | 设置多选选中上限 | int | - | 0 |
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
| name | 表单提交时的name | string | - | select |
| toolbar | 工具条, 具体看下表 | object | - | - |
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
| autoRow | 是否开启自动换行(选项过多时) | boolean | true / false | false |
| size | 尺寸 | string | large / medium / small / mini | medium |
| disabled | 是否禁用多选 | boolean | true / false | false |
| create | 创建条目 | function(val, data), val: 搜索的数据, data: 当前下拉数据 | - | null |
| tree | 树形结构, 具体看下表 | object | - | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | ----------------------------- | ------------- | ------------- | --------- |
| el | 渲染对象, css选择器, dom元素 | string | - | - |
| language | 语言选择 | string | zn / en | zn |
| data | 显示的数据 | array | - | [ ] |
| content | 自定义下拉框html | string | - | - |
| initValue | 初始化选中的数据, 需要在data中存在 | array | - | null |
| tips | 默认提示, 类似于placeholder | string | - | 请选择 |
| empty | 空数据提示 | string | - | 暂无数据 |
| filterable | 是否开启搜索 | boolean | true / false | false |
| searchTips | 搜索提示 | string | - | 请选择 |
| delay | 搜索延迟 ms | int | - | 500 |
| filterMethod | 搜索回调函数 | function(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key | - | - |
| filterDone | 搜索完成函数 | function(val, list) val: 当前搜索值, list: 过滤后的数据 | - | - |
| remoteSearch | 是否开启自定义搜索 (远程搜索) | boolean | true / false | false |
| remoteMethod | 自定义搜索回调函数 | function(val, cb, show, pageIndex) val: 当前搜索值, cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码, show: 下拉框显示状态, pageIndex: 分页下当前页码 | - | - |
| direction | 下拉方向 | string | auto / up / down | auto |
| style | 自定义样式 | object | - | { } |
| height | 默认最大高度 | string | - | 200px |
| paging | 是否开启自定义分页 | boolean | true / false | false |
| pageSize | 分页条数 | int | - | 10 |
| pageEmptyShow | 分页无数据是否显示 | boolean | true / false | true |
| pageRemote | 是否开启远程分页 | boolean | true / false | true |
| radio | 是否开启单选模式 | boolean | true / false | false |
| repeat | 是否开启重复性模式 | boolean | true / false | false |
| clickClose | 是否点击选项后自动关闭下拉框 | boolean | true / false | false |
| prop | 自定义属性名称, 具体看下表 | object | - | |
| theme | 主题配置, 具体看下表 | object | - | |
| model | 模型, 多选的展示方式, 具体见下表 | object | - | |
| show | 展开下拉的回调 | function | - | - |
| hide | 隐藏下拉的回调 | function | - | - |
| template | 自定义渲染选项 | function({ item, sels, name, value }) | - | - |
| on | 监听选中变化 | function({ arr, change, isAdd }) | - | - |
| max | 设置多选选中上限 | int | - | 0 |
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
| name | 表单提交时的name | string | - | select |
| layVerify | 表单验证, 同layui的lay-verify | string | - | '' |
| layVerType | 表单验证, 同layui的lay-verType | string | - | '' |
| toolbar | 工具条, 具体看下表 | object | - | - |
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
| autoRow | 是否开启自动换行(选项过多时) | boolean | true / false | false |
| size | 尺寸 | string | large / medium / small / mini | medium |
| disabled | 是否禁用多选 | boolean | true / false | false |
| create | 创建条目 | function(val, data), val: 搜索的数据, data: 当前下拉数据 | - | null |
| tree | 树形结构, 具体看下表 | object | - | - |
### prop
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | ------------------------------ | --------------- | ------ | ------ |
| name | 显示名称 | string | - | name |
| value | 选中值, 当前多选唯一 | string | - | value |
| selected | 是否选中 | string | - | selected |
| disabled | 是否禁用 | string | - | disabled |
| children | 分组children | string | - | children |
| optgroup | 分组optgroup | string | - | optgroup |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------- | ------------------------- | ---------- | -------- | ------------- |
| name | 显示名称 | string | - | name |
| value | 选中值, 当前多选唯一 | string | - | value |
| selected | 是否选中 | string | - | selected |
| disabled | 是否禁用 | string | - | disabled |
| children | 分组children | string | - | children |
| optgroup | 分组optgroup | string | - | optgroup |
### 分组说明
@@ -85,10 +87,10 @@
### theme
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | --------- | --------------- | ------ | ------ |
| color | 主题颜色 | string | - | #009688 |
| maxColor | 选中上限闪烁边框颜色 | string | - | #e54d42 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ----------------- | --------- | ------ | -------- |
| color | 主题颜色 | string | - | #009688 |
| maxColor | 选中上限闪烁边框颜色 | string | - | #e54d42 |
### model
@@ -136,11 +138,11 @@ model: {
### toolbar
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | --------- | --------------- | ------ | ------ |
| show | 是否展示工具条 | boolean | true / false | false |
| showIcon | 是否显示工具图标 | boolean | true / false | true |
| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | - | [ "ALL", "CLEAR" ] |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------- | -------------------------------------------------------- | ---------- | ------------ | ------------------ |
| show | 是否展示工具条 | boolean | true / false | false |
| showIcon | 是否显示工具图标 | boolean | true / false | true |
| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | - | [ "ALL", "CLEAR" ] |
> 自定义方式
@@ -166,24 +168,24 @@ list: [ "ALL", "CLEAR",
### tree
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | --------- | --------------- | ------ | ------ |
| show | 是否展示为树状结构 | boolean | true / false | false |
| showFolderIcon | 是否显示节点前的三角图标 | boolean | true / false | true |
| showLine | 是否显示虚线 | boolean | true / false | true |
| indent | 间距 | int | - | 20 |
| expandedKeys | 默认展开的节点数组 | array | - | [ ] |
| strict | 是否遵循严格父子结构 | boolean | true / false | true |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | --------------------- | ------------- | ------------- | ------ |
| show | 是否展示为树状结构 | boolean | true / false | false |
| showFolderIcon | 是否显示节点前的三角图标 | boolean | true / false | true |
| showLine | 是否显示虚线 | boolean | true / false | true |
| indent | 间距 | int | - | 20 |
| expandedKeys | 默认展开的节点数组 | array | - | [ ] |
| strict | 是否遵循严格父子结构 | boolean | true / false | true |
### 全局方法
| 事件名 | 说明 | 参数 | 返回值 |
| ------ | ------------------ | -------- | -------- |
| render | 渲染多选 | (options: 配置项) | 实例对象 |
| get | 获取页面中已经渲染的多选 | (filter: 过滤`el`, single: 是否返回单实例) | 符合条件的实例数组 |
| batch | 批量操作已渲染的多选 | (filter: 过滤`el`, method: 方法, ...方法参数) | 符合条件的实例数组 |
| 事件名 | 说明 | 参数 | 返回值 |
| ------ | -------------------- | --------------------------------------------- | ----------------- |
| render | 渲染多选 | (options: 配置项) | 实例对象 |
| get | 获取页面中已经渲染的多选 | (filter: 过滤`el`, single: 是否返回单实例) | 符合条件的实例数组 |
| batch | 批量操作已渲染的多选 | (filter: 过滤`el`, method: 方法, ...方法参数) | 符合条件的实例数组 |
```
//render 使用方式
@@ -215,14 +217,14 @@ xmSelect.batch(/.*demo/, 'warning', '#F00', true);
xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
:::
| 事件名 | 说明 | 参数 |
| ------ | ------------------ | -------- |
| getValue | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
| setValue | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉,不传默认当前显示状态,取值: true/false, listenOn: 是否触发on的监听, 默认false) |
| append | 追加赋值 | (array: 追加的数据) |
| delete | 删除赋值 | (array: 删除的数据) |
| opened | 主动展开下拉 | - |
| closed | 主动关闭下拉 | - |
| reset | 重置为上一次的render状态 | - |
| update | 更新多选选中, reset不保留 | (options: 见配置项) |
| warning | 警告 | (color: 默认同theme.maxColor, sustain: 是否持续显示) |
| 事件名 | 说明 | 参数 |
| --------- | ------------------------- | ----------------- |
| getValue | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
| setValue | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉,不传默认当前显示状态,取值: true/false, listenOn: 是否触发on的监听, 默认false) |
| append | 追加赋值 | (array: 追加的数据) |
| delete | 删除赋值 | (array: 删除的数据) |
| opened | 主动展开下拉 | - |
| closed | 主动关闭下拉 | - |
| reset | 重置为上一次的render状态 | - |
| update | 更新多选选中, reset不保留 | (options: 见配置项) |
| warning | 警告 | (color: 默认同theme.maxColor, sustain: 是否持续显示) |