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

修复若干bug

Browse Source
This commit is contained in:
maplemei
2020-11-26 14:44:46 +08:00
parent 6b24d608ee
commit 9bf5b060ca
18 changed files with 432 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/mds/ZP02.md
View File

@@ -35,6 +35,10 @@ tree: {
<input type="checkbox" name="showLine" lay-filter="showLine" lay-skin="primary" title="是否显示虚线" checked>
<input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
<input type="checkbox" name="simple" lay-filter="simple" lay-skin="primary" title="极简模式">
<br/><br/>
<input type="checkbox" name="hidden" lay-filter="hidden" lay-skin="primary" title="隐藏父节点图标">
<input type="checkbox" name="custom" lay-filter="custom" lay-skin="primary" title="自定义图标">
</div>
<div style="margin-top: 20px">间距</div>
@@ -54,6 +58,34 @@ layui.form.render();
});
})
//控制显示父节点的图标
layui.form.on('checkbox(hidden)', function(data){
demo1.update({
iconfont: {
parent: data.elem.checked ? 'hidden' : '',
}
})
});
//自定义图标
layui.form.on('checkbox(custom)', function(data){
let iconfont = data.elem.checked ? {
select: 'layui-icon layui-icon-chart',
unselect: 'layui-icon-ok-circle',
half: 'layui-icon layui-icon-table',
parent: 'layui-icon layui-icon-survey',
} : {
select: '',
unselect: '',
half: '',
parent: '',
}
demo1.update({
iconfont: iconfont
})
layui.form.render();
});
layui.slider.render({
elem: '#slideTest1',
min: 10,
@@ -88,7 +120,7 @@ var demo1 = xmSelect.render({
},
filterable: true,
height: 'auto',
data(){
data: function(){
return [
{name: '销售员', value: -1, disabled: true, children: [
{name: '张三1', value: 1, selected: true, children: []},

38
docs/mds/ZP06.md
View File

@@ -9,7 +9,7 @@ cascader: {
//是否显示级联模式
show: true,
//间距
indent: 100,
indent: 200,
//是否严格遵守父子模式
strict: true,
},
@@ -24,6 +24,8 @@ cascader: {
<br/>
<div class="layui-form">
<input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
<input type="checkbox" name="hidden" lay-filter="hidden" lay-skin="primary" title="隐藏父节点图标">
<input type="checkbox" name="custom" lay-filter="custom" lay-skin="primary" title="自定义图标">
</div>
<div style="margin-top: 20px">间距</div>
@@ -36,7 +38,7 @@ var demo1 = xmSelect.render({
autoRow: true,
cascader: {
show: true,
indent: 100,
indent: 200,
},
height: '200px',
data(){
@@ -72,14 +74,42 @@ layui.form.render();
});
})
//控制显示父节点的图标
layui.form.on('checkbox(hidden)', function(data){
demo1.update({
iconfont: {
parent: data.elem.checked ? 'hidden' : '',
}
})
});
//自定义图标
layui.form.on('checkbox(custom)', function(data){
let iconfont = data.elem.checked ? {
select: 'layui-icon layui-icon-chart',
unselect: 'layui-icon-ok-circle',
half: 'layui-icon layui-icon-table',
parent: 'layui-icon layui-icon-survey',
} : {
select: '',
unselect: '',
half: '',
parent: '',
}
demo1.update({
iconfont: iconfont
})
layui.form.render();
});
layui.slider.render({
elem: '#slideTest1',
min: 50,
max: 300,
max: 400,
showstep: true,
input: true,
tips: true,
value: 100,
value: 200,
change: function(value){
demo1.update({
cascader: {

58
docs/mds/ZTEST.md
View File

@@ -8,29 +8,43 @@
var demo1 = xmSelect.render({
el: '#demo1',
autoRow: true,
toolbar: { show: true },
paging: true,
pageRemote: true,
filterable: true,
remoteSearch: true,
remoteMethod: function(val, cb, show){
//这里如果val为空, 则不触发搜索
/* if(!val){
return cb([]);
} */
//这里引入了一个第三方插件axios, 相当于$.ajax
axios({
method: 'get',
url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
params: {
keyword: val,
}
}).then(response => {
var res = response.data;
cb(res.data, 80)
}).catch(err => {
cb([]);
});
tree: {
show: true,
showFolderIcon: true,
showLine: true,
indent: 20,
expandedKeys: [ -3 ],
},
toolbar: {
show: true,
list: ['ALL', 'REVERSE', 'CLEAR']
},
filterable: true,
height: 'auto',
data(){
return [
{name: '销售员', value: -1, disabled: true, children: [
{name: '张三1', value: 1, selected: true, children: []},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
]},
{name: '奖品', value: -2, children: [
{name: '奖品3', value: -3, children: [
{name: '苹果3', value: 14, selected: true},
{name: '香蕉3', value: 15},
{name: '葡萄3', value: 16},
]},
{name: '苹果2', value: 4, selected: true, disabled: true},
{name: '香蕉2', value: 5},
{name: '葡萄2', value: 6},
]},
]
},
iconfont: {
select: '',
unselect: '',
half: '',
},
})

55
docs/mds/options.md
View File

@@ -5,19 +5,19 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | ----------------------------- | ------------- | ------------- | --------- |
| el | 渲染对象, css选择器, dom元素 | string | - | - |
| el | 渲染对象, css选择器, dom元素 | string | - | - |
| language | 语言选择 | string | zn / en | zn |
| data | 显示的数据 | array | - | [ ] |
| content | 自定义下拉框html | string | - | - |
| initValue | 初始化选中的数据, 需要在data中存在 | array | - | null |
| tips | 默认提示, 类似于placeholder | string | - | 请选择 |
| initValue | 初始化选中的数据, 需要在data中存在 | array | - | null |
| tips | 默认提示, 类似于placeholder | string | - | 请选择 |
| empty | 空数据提示 | string | - | 暂无数据 |
| filterable | 是否开启搜索 | boolean | true / false | false |
| searchTips | 搜索提示 | string | - | 请选择 |
| delay | 搜索延迟 ms | int | - | 500 |
| 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 |
| 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 | - | { } |
@@ -25,30 +25,32 @@
| paging | 是否开启自定义分页 | boolean | true / false | false |
| pageSize | 分页条数 | int | - | 10 |
| pageEmptyShow | 分页无数据是否显示 | boolean | true / false | true |
| pageRemote | 是否开启远程分页 | boolean | true / false | true |
| radio | 是否开启单选模式 | boolean | true / false | false |
| pageRemote | 是否开启远程分页 | boolean | true / false | true |
| radio | 是否开启单选模式 | boolean | true / false | false |
| repeat | 是否开启重复性模式 | boolean | true / false | false |
| clickClose | 是否点击选项后自动关闭下拉框 | boolean | true / false | false |
| clickClose | 是否点击选项后自动关闭下拉框 | boolean | true / false | false |
| prop | 自定义属性名称, 具体看下表 | object | - | |
| theme | 主题配置, 具体看下表 | object | - | |
| model | 模型, 多选的展示方式, 具体见下表 | object | - | |
| theme | 主题配置, 具体看下表 | object | - | |
| model | 模型, 多选的展示方式, 具体见下表 | object | - | |
| iconfont | 自定义选中图标 | object | - | |
| show | 展开下拉的回调 | function | - | - |
| hide | 隐藏下拉的回调 | function | - | - |
| template | 自定义渲染选项 | function({ item, sels, name, value }) | - | - |
| on | 监听选中变化 | function({ arr, change, isAdd }) | - | - |
| max | 设置多选选中上限 | int | - | 0 |
| max | 设置多选选中上限 | int | - | 0 |
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
| name | 表单提交时的name | string | - | select |
| layVerify | 表单验证, 同layui的lay-verify | string | - | '' |
| layVerType | 表单验证, 同layui的lay-verType | string | - | '' |
| layVerify | 表单验证, 同layui的lay-verify | string | - | '' |
| layVerType | 表单验证, 同layui的lay-verType | string | - | '' |
| layReqText | 表单验证, 同layui的lay-reqText | string | - | '' |
| toolbar | 工具条, 具体看下表 | object | - | - |
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
| autoRow | 是否开启自动换行(选项过多时) | boolean | true / false | false |
| 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 | - | - |
| cascader | 级联结构, 具体看下表 | object | - | - |
| tree | 树形结构, 具体看下表 | object | - | - |
| cascader | 级联结构, 具体看下表 | object | - | - |
### prop
@@ -56,7 +58,7 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------- | ------------------------- | ---------- | -------- | ------------- |
| name | 显示名称 | string | - | name |
| value | 选中值, 当前多选唯一 | string | - | value |
| value | 选中值, 当前多选唯一 | string | - | value |
| selected | 是否选中 | string | - | selected |
| disabled | 是否禁用 | string | - | disabled |
| children | 分组children | string | - | children |
@@ -135,6 +137,17 @@ model: {
type: 'absolute',
},
```
### iconfont
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------- | -------------------------------------------------------- | ---------- | ------------ | --------- |
| select | 选中图标 | string | - | - |
| unselect | 非选中图标 | string | - | - |
| half | 半选图标 | string | - | - |
| parent | 父节点图标, 值为hidden时, 隐藏 | string | - | - |
### toolbar
@@ -143,7 +156,7 @@ model: {
| ---------- | -------------------------------------------------------- | ---------- | ------------ | ------------------ |
| show | 是否展示工具条 | boolean | true / false | false |
| showIcon | 是否显示工具图标 | boolean | true / false | true |
| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | - | [ "ALL", "CLEAR" ] |
| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | ALL, CLEAR, REVERSE | [ "ALL", "CLEAR" ] |
> 自定义方式
@@ -175,6 +188,7 @@ list: [ "ALL", "CLEAR",
| expandedKeys | 默认展开的节点数组, 为true时展开所有节点 | array / boolean | - | [ ] |
| strict | 是否遵循严格父子结构 | boolean | true / false | true |
| simple | 是否开启极简模式 | boolean | true / false | false |
| nodeType | 标注节点类型的key | string | leaf: 叶子节点, parent: 父节点, half: 半选节点 | __node_type |
### cascader
@@ -236,3 +250,6 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
| reset | 重置为上一次的render状态 | - |
| update | 更新多选选中, reset不保留 | (options: 见配置项) |
| warning | 警告 | (color: 默认同theme.maxColor, sustain: 是否持续显示) |
| getTreeValue | 树节点模式下获取数据, v1.2.0 新增 | (leafOnly: 是否只是叶子节点，默认值为 false, includeHalfChecked: 是否包含半选节点，默认值为 false) |
| enable | 启用选项, disabled=false, v1.2.0 新增 | (array: 想要启用的选项数组) |
| disable | 禁用用选项, disabled=true, v1.2.0 新增 | (array: 想要禁用的选项数组) |