From 70ca00fd6b98e1330644d08f1baf853ff122beb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E4=BA=9A=E5=AE=81-PC?= Date: Thu, 28 Jul 2022 17:05:40 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=B8=8B=E6=8B=89=E6=A0=91=E6=89=A9?= =?UTF-8?q?=E5=B1=95=20=E7=A4=BA=E4=BE=8B=E9=80=89=E9=A1=B9=E6=8F=8F?= =?UTF-8?q?=E8=BF=B0=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/mds/ZP02.md | 58 ++++++++++++++++++++++++------------------------ 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/docs/mds/ZP02.md b/docs/mds/ZP02.md index 4569eec..e7a78aa 100644 --- a/docs/mds/ZP02.md +++ b/docs/mds/ZP02.md @@ -49,7 +49,7 @@ tree: {

- + @@ -217,11 +217,11 @@ tree: { }, ``` -:::demo -```html -
- - -``` + +``` ::: @@ -289,11 +289,11 @@ tree: { }, ``` -:::demo -```html -
- - -``` + +``` ::: @@ -351,11 +351,11 @@ on: function(data){ }, ``` -:::demo -```html -
- - -``` + +``` ::: @@ -417,11 +417,11 @@ tree: { }, ``` -:::demo -```html -
- - -``` + +``` ::: -- Gitee From c4b9a108d7a95d42d628f6f53d5bc10f8c65db99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E4=BA=9A=E5=AE=81-PC?= Date: Thu, 28 Jul 2022 17:11:44 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=89=A9=E5=B1=95=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=20isOptNodeFn=EF=BC=8C=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E5=88=A4=E5=AE=9A=20=E4=B8=8B=E6=8B=89=E6=A0=91=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E6=98=AF=E5=90=A6=E6=98=AF=E5=8F=AF=E9=80=89=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/mds/ZP02.md | 52 ++++ docs/mds/options.md | 502 +++++++++++++++++----------------- src/components/plugin/tree.js | 9 +- src/config/options.js | 281 +++++++++---------- src/style/index.less | 6 +- 5 files changed, 456 insertions(+), 394 deletions(-) diff --git a/docs/mds/ZP02.md b/docs/mds/ZP02.md index e7a78aa..21f315b 100644 --- a/docs/mds/ZP02.md +++ b/docs/mds/ZP02.md @@ -451,3 +451,55 @@ var demo5 = xmSelect.render({ ``` ::: + +### 按数据决定是否是可选节点 + +``` +model: { + // 叶子节点可选 + isOptNodeFn: function (item) { + return item.type === 'person' + } +}, +``` + +:::demo +```html +
+ + +``` +::: diff --git a/docs/mds/options.md b/docs/mds/options.md index 7b5a902..da30ee2 100644 --- a/docs/mds/options.md +++ b/docs/mds/options.md @@ -1,265 +1,267 @@ -## 配置项与方法 - - -### 配置项 - -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| ----------------- | ----------------------------- | ------------- | ------------- | --------- | -| 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 | - | | -| iconfont | 自定义选中图标 | 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 | - | '' | -| layReqText | 表单验证, 同layui的lay-reqText | string | - | '' | -| toolbar | 工具条, 具体看下表 | object | - | - | -| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 | -| enableKeyboard | 是否启用键盘操作选项 | boolean | true / false | true | -| enableHoverFirst | 是否默认选中第一项 | boolean | true / false | true | -| selectedKeyCode | 选中的键盘KeyCode | int | 全部KeyCode, 也可xmSelect.KeyCode.Enter,xmSelect.KeyCode.Space | 13 | -| 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 | - | - | -| submitConversion | 配置表单提交数据 | function(sels, prop), sels: 已选中数据, prop: 自定义的prop | - | - | -| done | 渲染完成回调 | function | - | - | - - -### prop - -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| ------------- | ------------------------- | ---------- | -------- | ------------- | -| name | 显示名称 | string | - | name | -| value | 选中值, 当前多选唯一 | string | - | value | -| selected | 是否选中 | string | - | selected | -| disabled | 是否禁用 | string | - | disabled | -| children | 分组children | string | - | children | -| optgroup | 分组optgroup | string | - | optgroup | - - -### 分组说明 - -如果children属性为数组的时候开启分组模式 - -``` -{name: '销售员', children: [ - {name: '李四', value: 4, selected: true}, - {name: '王五', value: 5}, -]}, - -//可在分组上定义click属性, 来定义点击事件 -{name: '选中', children: [...], click: 'SELECT'}, -{name: '清空', children: [...], click: 'CLEAR'}, -{name: '自动', children: [...], click: 'AUTO'}, -{name: '自定义', children: [...], click: function(item){ - alert('自定义的, 想干嘛干嘛'); -}}, -``` - - -### theme - -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| --------- | ----------------- | --------- | ------ | -------- | -| color | 主题颜色 | string | - | #009688 | -| maxColor | 选中上限闪烁边框颜色| string | - | #e54d42 | -| hover | 键盘操作的背景色 | string | - | #f2f2f2 | - - -### model - -目前仅配置label即可 - -``` -model: { - //是否展示复选框或者单选框图标 show, hidden:变换背景色 - icon: 'show', - label: { - //使用方式 - type: 'block', - //使用字符串拼接的方式 - text: { - //左边拼接的字符 - left: '', - //右边拼接的字符 - right: '', - //中间的分隔符 - separator: ', ', - }, - //使用方块显示 - block: { - //最大显示数量, 0:不限制 - showCount: 0, - //是否显示删除图标 +## 配置项与方法 + + +### 配置项 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ----------------- | ----------------------------- | ------------- | ------------- | --------- | +| 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 | - | | +| iconfont | 自定义选中图标 | 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 | - | '' | +| layReqText | 表单验证, 同layui的lay-reqText | string | - | '' | +| toolbar | 工具条, 具体看下表 | object | - | - | +| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 | +| enableKeyboard | 是否启用键盘操作选项 | boolean | true / false | true | +| enableHoverFirst | 是否默认选中第一项 | boolean | true / false | true | +| selectedKeyCode | 选中的键盘KeyCode | int | 全部KeyCode, 也可xmSelect.KeyCode.Enter,xmSelect.KeyCode.Space | 13 | +| 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 | - | - | +| submitConversion | 配置表单提交数据 | function(sels, prop), sels: 已选中数据, prop: 自定义的prop | - | - | +| done | 渲染完成回调 | function | - | - | + + +### prop + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ------------- | ------------------------- | ---------- | -------- | ------------- | +| name | 显示名称 | string | - | name | +| value | 选中值, 当前多选唯一 | string | - | value | +| selected | 是否选中 | string | - | selected | +| disabled | 是否禁用 | string | - | disabled | +| children | 分组children | string | - | children | +| optgroup | 分组optgroup | string | - | optgroup | + + +### 分组说明 + +如果children属性为数组的时候开启分组模式 + +``` +{name: '销售员', children: [ + {name: '李四', value: 4, selected: true}, + {name: '王五', value: 5}, +]}, + +//可在分组上定义click属性, 来定义点击事件 +{name: '选中', children: [...], click: 'SELECT'}, +{name: '清空', children: [...], click: 'CLEAR'}, +{name: '自动', children: [...], click: 'AUTO'}, +{name: '自定义', children: [...], click: function(item){ + alert('自定义的, 想干嘛干嘛'); +}}, +``` + + +### theme + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| --------- | ----------------- | --------- | ------ | -------- | +| color | 主题颜色 | string | - | #009688 | +| maxColor | 选中上限闪烁边框颜色| string | - | #e54d42 | +| hover | 键盘操作的背景色 | string | - | #f2f2f2 | + + +### model + +目前仅配置label即可 + +``` +model: { + //是否展示复选框或者单选框图标 show, hidden:变换背景色 + icon: 'show', + // Tree 类型，自定义节点是否可选类型 + isOptNodeFn: undefined, + label: { + //使用方式 + type: 'block', + //使用字符串拼接的方式 + text: { + //左边拼接的字符 + left: '', + //右边拼接的字符 + right: '', + //中间的分隔符 + separator: ', ', + }, + //使用方块显示 + block: { + //最大显示数量, 0:不限制 + showCount: 0, + //是否显示删除图标 showIcon: true, //自定义渲染label, 默认渲染name, 回调参数(item, sels) - template: null, - }, - //自定义文字 - count: { - //函数处理 - template(data, sels){ - //data: 所有的数据 - //sels: 选中的数据 - return `已选中 ${sels.length} 项, 共 ${data.length} 项` - } - }, + template: null, + }, + //自定义文字 + count: { + //函数处理 + template(data, sels){ + //data: 所有的数据 + //sels: 选中的数据 + return `已选中 ${sels.length} 项, 共 ${data.length} 项` + } + }, }, //展示类型, 下拉框形式: absolute, 直接显示模式: relative, 浮动布局: fixed - type: 'absolute', -}, -``` + type: 'absolute', +}, +``` ### iconfont -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| ---------- | -------------------------------------------------------- | ---------- | ------------ | --------- | -| select | 选中图标 | string | - | - | -| unselect | 非选中图标 | string | - | - | -| half | 半选图标 | string | - | - | -| parent | 父节点图标, 值为hidden时, 隐藏 | string | - | - | - - - -### toolbar - -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| ---------- | -------------------------------------------------------- | ---------- | ------------ | ------------------ | -| show | 是否展示工具条 | boolean | true / false | false | -| showIcon | 是否显示工具图标 | boolean | true / false | true | -| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | ALL, CLEAR, REVERSE | [ "ALL", "CLEAR" ] | - -> 自定义方式 - -``` -list: [ "ALL", "CLEAR", - { - //显示图标, 可以是layui内置的图标, 也可以是自己引入的图标 - //传入的icon会转化为 - icon: 'layui-icon layui-icon-face-smile', - //显示名称 - name: 'xxx', - //点击时触发的回调 - method: function(data){ - //data 当前页面的数据 - - } - } -] -``` - -### tree - -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| ----------------- | --------------------- | ------------- | ------------- | ------ | -| show | 是否展示为树状结构 | boolean | true / false | false | -| showFolderIcon | 是否显示节点前的三角图标 | boolean | true / false | true | -| showLine | 是否显示虚线 | boolean | true / false | true | -| indent | 间距 | int | - | 20 | -| expandedKeys | 默认展开的节点数组, 为true时展开所有节点 | array / boolean | - | [ ] | -| strict | 是否遵循严格父子结构 | boolean | true / false | true | -| simple | 是否开启极简模式 | boolean | true / false | false | -| nodeType | 标注节点类型的key | string | leaf: 叶子节点, parent: 父节点, half: 半选节点 | __node_type | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ---------- | -------------------------------------------------------- | ---------- | ------------ | --------- | +| select | 选中图标 | string | - | - | +| unselect | 非选中图标 | string | - | - | +| half | 半选图标 | string | - | - | +| parent | 父节点图标, 值为hidden时, 隐藏 | string | - | - | + + + +### toolbar + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ---------- | -------------------------------------------------------- | ---------- | ------------ | ------------------ | +| show | 是否展示工具条 | boolean | true / false | false | +| showIcon | 是否显示工具图标 | boolean | true / false | true | +| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | ALL, CLEAR, REVERSE | [ "ALL", "CLEAR" ] | + +> 自定义方式 + +``` +list: [ "ALL", "CLEAR", + { + //显示图标, 可以是layui内置的图标, 也可以是自己引入的图标 + //传入的icon会转化为 + icon: 'layui-icon layui-icon-face-smile', + //显示名称 + name: 'xxx', + //点击时触发的回调 + method: function(data){ + //data 当前页面的数据 + + } + } +] +``` + +### tree + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ----------------- | --------------------- | ------------- | ------------- | ------ | +| show | 是否展示为树状结构 | boolean | true / false | false | +| showFolderIcon | 是否显示节点前的三角图标 | boolean | true / false | true | +| showLine | 是否显示虚线 | boolean | true / false | true | +| indent | 间距 | int | - | 20 | +| expandedKeys | 默认展开的节点数组, 为true时展开所有节点 | array / boolean | - | [ ] | +| strict | 是否遵循严格父子结构 | boolean | true / false | true | +| simple | 是否开启极简模式 | boolean | true / false | false | +| nodeType | 标注节点类型的key | string | leaf: 叶子节点, parent: 父节点, half: 半选节点 | __node_type | | clickExpand | 点击节点是否展开, false时点击三角箭头进行展开操作| boolean | true / false | true | | clickCheck | 点击节点是否选中, false时点击复选框进行选中操作 | boolean | true / false | true | - -### cascader - -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| ----------------- | --------------------- | ------------- | ------------- | ------ | -| show | 是否展示为级联结构 | boolean | true / false | false | + +### cascader + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ----------------- | --------------------- | ------------- | ------------- | ------ | +| show | 是否展示为级联结构 | boolean | true / false | false | | indent | 每一级的宽度 | int | - | 100 | -| strict | 是否遵循严格父子结构 | boolean | true / false | true | - - -### 全局方法 - - -| 事件名 | 说明 | 参数 | 返回值 | -| ------ | -------------------- | --------------------------------------------- | ----------------- | -| render | 渲染多选 | (options: 配置项) | 实例对象 | -| get | 获取页面中已经渲染的多选 | (filter: 过滤`el`, single: 是否返回单实例) | 符合条件的实例数组 | -| batch | 批量操作已渲染的多选 | (filter: 过滤`el`, method: 方法, ...方法参数) | 符合条件的实例数组 | -| arr2tree | 把列表数据转化为树状结构 | (arr: 数据, pid: 父节点ID的key, id: 对应key, children: 对应key, topParentId: 顶级节点的ID) | 符合条件的数组 | - -``` -//render 使用方式 -xmSelect.render(OPTIONS); - -//get 使用方式 -xmSelect.get('#demo1'); //指定某一个获取 -xmSelect.get(/.*demo1.*/); //正则获取 -//自定义方法获取 -xmSelect.get(function(el){ - return el == '#demo1' || el == '#demo2'; -}); -//单实例 -xmSelect.get('#demo2', true); - -//batch 使用方式 -//批量执行禁用 -xmSelect.batch(/.*demo/, 'update', { - disabled: true, -}); -//批量执行warning -xmSelect.batch(/.*demo/, 'warning', '#F00', true); -``` - - -### 实例方法 - -:::warning -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: 是否持续显示) | -| getTreeValue | 树节点模式下获取数据, v1.2.0 新增 | (leafOnly: 是否只是叶子节点，默认值为 false, includeHalfChecked: 是否包含半选节点，默认值为 false) | -| changeExpandedKeys | 树模式下更新节点展开状态, v1.2.0 新增 | (keys: true-全部展开, false-全部关闭, 数组-展开的节点值) | +| strict | 是否遵循严格父子结构 | boolean | true / false | true | + + +### 全局方法 + + +| 事件名 | 说明 | 参数 | 返回值 | +| ------ | -------------------- | --------------------------------------------- | ----------------- | +| render | 渲染多选 | (options: 配置项) | 实例对象 | +| get | 获取页面中已经渲染的多选 | (filter: 过滤`el`, single: 是否返回单实例) | 符合条件的实例数组 | +| batch | 批量操作已渲染的多选 | (filter: 过滤`el`, method: 方法, ...方法参数) | 符合条件的实例数组 | +| arr2tree | 把列表数据转化为树状结构 | (arr: 数据, pid: 父节点ID的key, id: 对应key, children: 对应key, topParentId: 顶级节点的ID) | 符合条件的数组 | + +``` +//render 使用方式 +xmSelect.render(OPTIONS); + +//get 使用方式 +xmSelect.get('#demo1'); //指定某一个获取 +xmSelect.get(/.*demo1.*/); //正则获取 +//自定义方法获取 +xmSelect.get(function(el){ + return el == '#demo1' || el == '#demo2'; +}); +//单实例 +xmSelect.get('#demo2', true); + +//batch 使用方式 +//批量执行禁用 +xmSelect.batch(/.*demo/, 'update', { + disabled: true, +}); +//批量执行warning +xmSelect.batch(/.*demo/, 'warning', '#F00', true); +``` + + +### 实例方法 + +:::warning +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: 是否持续显示) | +| getTreeValue | 树节点模式下获取数据, v1.2.0 新增 | (leafOnly: 是否只是叶子节点，默认值为 false, includeHalfChecked: 是否包含半选节点，默认值为 false) | +| changeExpandedKeys | 树模式下更新节点展开状态, v1.2.0 新增 | (keys: true-全部展开, false-全部关闭, 数组-展开的节点值) | | enable | 启用选项, disabled=false, v1.2.0 新增 | (array: 想要启用的选项数组) | | disable | 禁用用选项, disabled=true, v1.2.0 新增 | (array: 想要禁用的选项数组) | | calcPosition | fixed布局模式下重新计算位置, v1.2.2 新增 | - | diff --git a/src/components/plugin/tree.js b/src/components/plugin/tree.js index db8c848..3e6713b 100644 --- a/src/components/plugin/tree.js +++ b/src/components/plugin/tree.js @@ -239,6 +239,7 @@ class Tree extends Component{ let { name, value, disabled, children, optgroup } = prop; let showIcon = config.model.icon != 'hidden'; + const isOptNodeFn = typeof config.model.isOptNodeFn === 'function'? config.model.isOptNodeFn: () => true; const renderItem = (item, indent, expand) => { //是否被选中 let selected = !!sels.find(sel => sel[value] == item[value]); @@ -247,6 +248,8 @@ class Tree extends Component{ // 是否半选 let half = item.__node.half === true; + let isOptNode = isOptNodeFn(item); + //tree是否遵义严格父子结构 if(tree.strict){ selected = selected || half || item.__node.selected @@ -272,7 +275,7 @@ class Tree extends Component{ itemStyle.backgroundColor = theme.color; dis && (itemStyle.backgroundColor = '#C2C2C2'); } - const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' '); + const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon'), (!isOptNode? 'noOptNode': '') ].join(' '); const iconClass = (() => { if(expand !== 0 && iconfont.parent === 'hidden'){ return 'xm-option-icon-hidden' @@ -329,11 +332,11 @@ class Tree extends Component{ return (
{ iconArray } { item.__node.loading && } - { showIcon && } + { isOptNode && showIcon && }
) diff --git a/src/config/options.js b/src/config/options.js index d9e9c02..37dfcf6 100644 --- a/src/config/options.js +++ b/src/config/options.js @@ -1,107 +1,107 @@ -import zn from './language/zn' -import en from './language/en' - -const lanSetting = { zn, en } - -export default function (lan = 'zn') { - let setting = lanSetting[lan] || zn; - - return { - //配置语言 - language: lan, - //所有的语言配置 - languageProp: setting, - //多选数据 - data: [], - //自定义数据 - content: '', - //表单提交的name +import zn from './language/zn' +import en from './language/en' + +const lanSetting = { zn, en } + +export default function (lan = 'zn') { + let setting = lanSetting[lan] || zn; + + return { + //配置语言 + language: lan, + //所有的语言配置 + languageProp: setting, + //多选数据 + data: [], + //自定义数据 + content: '', + //表单提交的name name: 'select', //表单验证 layVerify: '', //验证类型 layVerType: '', //验证提示 - layReqText: '', - //尺寸 - size: 'medium', - //是否禁用多选 - disabled: false, - //默认选中数据, 优先级大于selected - initValue: null, - //创建条目 - create: null, - //默认提示 - tips: setting.tips, - //空数据提示 - empty: setting.empty, - //搜索延迟 ms - delay: 500, - //搜索默认提示 - searchTips: setting.searchTips, - //是否开始本地搜索 - filterable: false, - //本地搜索过滤方法 - filterMethod: function(val, item, index, prop){ - if(!val) return true; - return item[prop.name].indexOf(val) != -1; - }, - //是否开启远程搜索 - remoteSearch: false, - //远程搜索回调 - remoteMethod: function(val, cb){ - cb([]); - }, - //下拉方向 - direction: 'auto', - //自定义样式 - style: {}, - //默认多选的高度 - height: '200px', - //已选中数据是否自动换行显示 - autoRow: false, - //是否开启分页 - paging: false, - //分页每页的条数 - pageSize: 10, - //分页无数据是否展示分页 + layReqText: '', + //尺寸 + size: 'medium', + //是否禁用多选 + disabled: false, + //默认选中数据, 优先级大于selected + initValue: null, + //创建条目 + create: null, + //默认提示 + tips: setting.tips, + //空数据提示 + empty: setting.empty, + //搜索延迟 ms + delay: 500, + //搜索默认提示 + searchTips: setting.searchTips, + //是否开始本地搜索 + filterable: false, + //本地搜索过滤方法 + filterMethod: function(val, item, index, prop){ + if(!val) return true; + return item[prop.name].indexOf(val) != -1; + }, + //是否开启远程搜索 + remoteSearch: false, + //远程搜索回调 + remoteMethod: function(val, cb){ + cb([]); + }, + //下拉方向 + direction: 'auto', + //自定义样式 + style: {}, + //默认多选的高度 + height: '200px', + //已选中数据是否自动换行显示 + autoRow: false, + //是否开启分页 + paging: false, + //分页每页的条数 + pageSize: 10, + //分页无数据是否展示分页 pageEmptyShow: true, //是否开启远程分页 - pageRemote: false, - //是否开启单选模式 - radio: false, - //是否开启重复选模式 - repeat: false, - //是否点击选项后自动关闭下拉框 - clickClose: false, - //多选上限 - max: 0, - maxMethod: function(sels, item){}, - //选项显示数量 + pageRemote: false, + //是否开启单选模式 + radio: false, + //是否开启重复选模式 + repeat: false, + //是否点击选项后自动关闭下拉框 + clickClose: false, + //多选上限 + max: 0, + maxMethod: function(sels, item){}, + //选项显示数量 showCount: 0, //是否开启键盘操作 enableKeyboard: true, //开启键盘操作后是否默认选中第一条 enableHoverFirst: true, //键盘选中的KeyCode, 默认是Enter - selectedKeyCode: 13, - //工具条 - toolbar: { - show: false, - showIcon: true, - list: [ 'ALL', 'CLEAR' ], + selectedKeyCode: 13, + //工具条 + toolbar: { + show: false, + showIcon: true, + list: [ 'ALL', 'CLEAR' ], }, - //树状结构 + //树状结构 tree: { - //是否展示树 + //是否展示树 show: false, - //是否展示三角图标 + //是否展示三角图标 showFolderIcon: true, - //是否展示连接线 + //是否展示连接线 showLine: true, - //间距 + //间距 indent: 20, - //默认展开的节点数组 + //默认展开的节点数组 expandedKeys: [], //是否严格遵守父子模式 strict: true, @@ -116,7 +116,7 @@ export default function (lan = 'zn') { //点击节点是否展开 clickExpand: true, //点击节点是否选中 - clickCheck: true, + clickCheck: true, }, //级联结构 cascader: { @@ -126,45 +126,46 @@ export default function (lan = 'zn') { indent: 100, //是否严格遵守父子模式 strict: true, - }, - //自定义属性名称 - prop: { - name: 'name', - value: 'value', - selected: 'selected', - disabled: 'disabled', - children: 'children', - optgroup: 'optgroup', - click: 'click', - }, - //主题配置 - theme: { - color: '#009688', //默认主题颜色 - maxColor: '#e54d42', //多选上限边框闪烁颜色 - hover: '#f2f2f2', //键盘hover的颜色 - }, - //模型 - model: { - label: { - type: 'block', - text: { - left: '', - right: '', - separator: ', ', - }, - block: { - showCount: 0, + }, + //自定义属性名称 + prop: { + name: 'name', + value: 'value', + selected: 'selected', + disabled: 'disabled', + children: 'children', + optgroup: 'optgroup', + click: 'click', + }, + //主题配置 + theme: { + color: '#009688', //默认主题颜色 + maxColor: '#e54d42', //多选上限边框闪烁颜色 + hover: '#f2f2f2', //键盘hover的颜色 + }, + //模型 + model: { + label: { + type: 'block', + text: { + left: '', + right: '', + separator: ', ', + }, + block: { + showCount: 0, showIcon: true, - template: null, - }, - count: { - template(data, sels){ - return `已选中 ${sels.length} 项, 共 ${data.length} 项` - } - }, - }, + template: null, + }, + count: { + template(data, sels){ + return `已选中 ${sels.length} 项, 共 ${data.length} 项` + } + }, + }, icon: 'show', - type: 'absolute',//可选值， relative， fixed + isOptNodeFn: undefined, + type: 'absolute',//可选值， relative， fixed }, //自定义选中的图标 iconfont: { @@ -172,22 +173,22 @@ export default function (lan = 'zn') { unselect: '', half: '', parent: '', - }, - // 展开下拉框 - show(){ - - }, - // 隐藏下拉框 - hide(){ - - }, - // 模板组成, 当前option数据, 已经选中的数据, name, value - template({ item, sels, name, value }){ - return name; - }, - //监听选中事件 - on({ arr, item, selected }){ - + }, + // 展开下拉框 + show(){ + + }, + // 隐藏下拉框 + hide(){ + + }, + // 模板组成, 当前option数据, 已经选中的数据, name, value + template({ item, sels, name, value }){ + return name; + }, + //监听选中事件 + on({ arr, item, selected }){ + }, submitConversion(sels, prop){ return sels.map(item => item[prop.value]).join(',') @@ -195,5 +196,5 @@ export default function (lan = 'zn') { done(){ } - } -} + } +} diff --git a/src/style/index.less b/src/style/index.less index b76a65c..64ba754 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -231,6 +231,10 @@ xm-select{ padding: 0 10px; cursor: pointer; + &.noOptNode { + cursor: auto; + } + // &:hover{ // background-color: #f2f2f2; // } @@ -262,7 +266,7 @@ xm-select{ color: @fontColor; width: calc(100% - 20px); } - + &.noOptNode .xm-option-content, &.hide-icon .xm-option-content{ padding-left: 0; } -- Gitee