v1.1.0.Beta
This commit is contained in:
maplemei
parent
b14cbaa913
commit
57a0ab9f15
6
.babelrc
6
.babelrc
@ -1,5 +1,5 @@
|
||||
{
|
||||
"plugins": [
|
||||
["transform-react-jsx", { "pragma":"h" }]
|
||||
]
|
||||
"plugins": [
|
||||
["transform-react-jsx", { "pragma":"h" }]
|
||||
]
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
# http://editorconfig.org
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
@ -14,3 +14,4 @@ trim_trailing_whitespace = false
|
||||
|
||||
[Makefile]
|
||||
indent_style = tab
|
||||
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
### 该问题是怎么引起的？
|
||||
|
||||
|
||||
|
||||
### 重现步骤
|
||||
|
||||
|
||||
|
||||
### 报错信息
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
### 相关的Issue
|
||||
|
||||
|
||||
### 原因（目的、解决的问题等）
|
||||
|
||||
|
||||
### 描述（做了什么，变更了什么）
|
||||
|
||||
|
||||
### 测试用例
|
||||
|
||||
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
|
||||
.DS_Store
|
||||
node_modules/*
|
||||
yarn.lock
|
||||
36
CHANGELOG.md
36
CHANGELOG.md
@ -1,13 +1,23 @@
|
||||
## 更新日志
|
||||
|
||||
### 1.1.0.Beta+
|
||||
|
||||
*2019-11-21*
|
||||
### 1.1.0.Beta
|
||||
|
||||
#### 2019-11-23
|
||||
#### 新增
|
||||
|
||||
- 新增参数`layVerify`和`layVerType`, 用于表单验证
|
||||
- `el`配置可以指定dom对象
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- 树形组件
|
||||
- [修改]修复懒加载模式下回调无数据还展示三角图标
|
||||
- 解决`on`监听时无法使用`setValue`, 增加return处理
|
||||
- 修复IE下无`Object.values`的问题
|
||||
|
||||
#### 2019-11-22
|
||||
#### 新增
|
||||
|
||||
- label也可以自定义渲染
|
||||
- label新增title提示
|
||||
- 新增远程分页配置`pageRemote`
|
||||
|
||||
#### Bug fixes
|
||||
@ -15,18 +25,26 @@
|
||||
- 树形组件
|
||||
- [新增]`strict`严格父子结构
|
||||
- [新增]`lazy`懒加载模式
|
||||
- 修改搜索模式下输入中文的bug
|
||||
|
||||
#### 2019-11-21
|
||||
#### 新增
|
||||
|
||||
- label也可以自定义渲染
|
||||
- label新增title提示
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- 树形组件
|
||||
- [修改]树状结构使用`setValue`数据错误
|
||||
- [修改]树状结构中`children`属性为空数组时无法操作节点的问题
|
||||
- [修改]半选状态下如无可选子项则变更操作为取消
|
||||
- 修改`initValue`失效的问题
|
||||
- 修改`getValue()`方法无法序列化的问题
|
||||
- 调整拓展中心下拉日期多选的样式
|
||||
- 修改搜索模式下输入中文的bug
|
||||
|
||||
|
||||
### 1.1.0.Beta
|
||||
|
||||
*2019-11-19*
|
||||
#### 2019-11-19
|
||||
|
||||
- 历时半个月, 也算是一次大的版本更新, 此版本仅为测试版本, 升级需谨慎
|
||||
|
||||
|
||||
2
LICENSE
2
LICENSE
@ -1,4 +1,4 @@
|
||||
Apache License
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
const mdContainer = require('markdown-it-container');
|
||||
|
||||
module.exports = md => {
|
||||
md.use(mdContainer, 'demo', {
|
||||
validate(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
render(tokens, idx) {
|
||||
const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
const description = m && m.length > 1 ? m[1] : '';
|
||||
const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';
|
||||
return `<demo-block>
|
||||
${description ? `<div>${md.render(description)}</div>` : ''}
|
||||
<!--element-demo: ${content}:element-demo-->
|
||||
`;
|
||||
}
|
||||
return '</demo-block>';
|
||||
}
|
||||
});
|
||||
md.use(mdContainer, 'demo', {
|
||||
validate(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
render(tokens, idx) {
|
||||
const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
const description = m && m.length > 1 ? m[1] : '';
|
||||
const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';
|
||||
return `<demo-block>
|
||||
${description ? `<div>${md.render(description)}</div>` : ''}
|
||||
<!--element-demo: ${content}:element-demo-->
|
||||
`;
|
||||
}
|
||||
return '</demo-block>';
|
||||
}
|
||||
});
|
||||
|
||||
md.use(mdContainer, 'tip');
|
||||
md.use(mdContainer, 'warning');
|
||||
};
|
||||
md.use(mdContainer, 'tip');
|
||||
md.use(mdContainer, 'warning');
|
||||
};
|
||||
|
||||
2
dist/static/2.js
vendored
2
dist/static/2.js
vendored
File diff suppressed because one or more lines are too long
2
dist/static/3.js
vendored
2
dist/static/3.js
vendored
File diff suppressed because one or more lines are too long
2
dist/xm-select.js
vendored
2
dist/xm-select.js
vendored
File diff suppressed because one or more lines are too long
@ -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>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -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>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -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>
|
||||
```
|
||||
:::
|
||||
:::
|
||||
|
||||
@ -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},
|
||||
]},
|
||||
|
||||
@ -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: 是否持续显示) |
|
||||
|
||||
@ -79,7 +79,7 @@ if (!Array.prototype.find) {
|
||||
return callback && (this.filter(callback) || [])[0];
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
//拓展Array findIndex方法
|
||||
if (!Array.prototype.findIndex) {
|
||||
Array.prototype.findIndex = function(predicate) {
|
||||
@ -96,4 +96,13 @@ if (!Array.prototype.findIndex) {
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
}
|
||||
|
||||
//拓展Object values方法
|
||||
if (!Object.values) {
|
||||
Object.prototype.values = function(obj) {
|
||||
return Object.keys(obj).map(function(e) {
|
||||
return obj[e];
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
@ -124,7 +124,10 @@ class Framework extends Component{
|
||||
resetSelectValue(sels = [], change = [], isAdd, listenOn = true){
|
||||
let on = this.props.on;
|
||||
if(isFunction(on) && this.prepare && listenOn){
|
||||
on({ arr: sels, change, isAdd });
|
||||
let listenResult = on({ arr: sels, change, isAdd });
|
||||
if(isArray(listenResult)){
|
||||
return this.value(listenResult, null, false);
|
||||
}
|
||||
}
|
||||
this.setState({ sels });
|
||||
}
|
||||
@ -360,7 +363,7 @@ class Framework extends Component{
|
||||
|
||||
return (
|
||||
<xm-select { ...xmSelectProps } >
|
||||
<input class="xm-select-default" name={ config.name } value={ sels.map(item => item[prop.value]).join(',') }></input>
|
||||
<input class="xm-select-default" lay-verify={ config.layVerify } lay-verType={ config.layVerType } name={ config.name } value={ sels.map(item => item[prop.value]).join(',') }></input>
|
||||
<i class={ show ? 'xm-icon xm-icon-expand' : 'xm-icon' } />
|
||||
{ sels.length === 0 && <div class="xm-tips">{ config.tips }</div> }
|
||||
<Label { ...labelProps } />
|
||||
|
||||
@ -105,7 +105,7 @@ class Tree extends Component{
|
||||
}
|
||||
const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
|
||||
const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : tree.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'].join(' ');
|
||||
const treeIconClass = ['xm-tree-icon', expand ? 'expand':'', item[children] && (item[children].length > 0 || tree.lazy) ? 'visible':'hidden'].join(' ');
|
||||
const treeIconClass = ['xm-tree-icon', expand ? 'expand':'', item[children] && (item[children].length > 0 || (tree.lazy && item.__node.loading !== false)) ? 'visible':'hidden'].join(' ');
|
||||
|
||||
return (
|
||||
<div class={ className } style={ itemStyle } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled], 'line') }>
|
||||
@ -128,7 +128,7 @@ class Tree extends Component{
|
||||
return (
|
||||
<div class="xm-tree">
|
||||
{ tree.showFolderIcon && tree.showLine && expand && <i class='left-line left-line-group' style={ {left: indent + 3 + 'px'} }></i> }
|
||||
{ renderItem(item, indent, expand) }
|
||||
{ renderItem(item, indent, child.length === 0 && item.__node.loading === false ? 0 : expand) }
|
||||
{ expand && <div class="xm-tree-box">{ child.map(c => renderGroup(c, indent)) }</div> }
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -28,7 +28,7 @@ class xmOptions {
|
||||
this.options = deepMerge(this.options, options);
|
||||
|
||||
//如果dom不存在, 则不进行渲染事项
|
||||
let dom = selector(this.options.el);
|
||||
let dom = this.options.el.nodeType ? this.options.el : selector(this.options.el);
|
||||
if(!dom){
|
||||
warn(`没有找到渲染对象: ${options.el}, 请检查`)
|
||||
return ;
|
||||
|
||||
@ -16,7 +16,11 @@ export default function (lan = 'zn') {
|
||||
//自定义数据
|
||||
content: '',
|
||||
//表单提交的name
|
||||
name: 'select',
|
||||
name: 'select',
|
||||
//表单验证
|
||||
layVerify: '',
|
||||
//验证类型
|
||||
layVerType: '',
|
||||
//尺寸
|
||||
size: 'medium',
|
||||
//是否禁用多选
|
||||
|
||||
@ -456,7 +456,11 @@ xm-select{
|
||||
}
|
||||
|
||||
.xm-select-default{
|
||||
display: none !important;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.xm-select-disabled{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user