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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.editorconfig
View File

@ -14,3 +14,4 @@ trim_trailing_whitespace = false
[Makefile]
indent_style = tab

4
.gitee/ISSUE_TEMPLATE.zh-CN.md
View File

@ -1,11 +1,7 @@
### 该问题是怎么引起的？
### 重现步骤
### 报错信息

3
.gitee/PULL_REQUEST_TEMPLATE.zh-CN.md
View File

@ -1,12 +1,9 @@
### 相关的Issue
### 原因（目的、解决的问题等）
### 描述（做了什么，变更了什么）
### 测试用例

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
.DS_Store
node_modules/*
yarn.lock

36
CHANGELOG.md
View File

@ -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
dist/static/2.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/static/3.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/xm-select.js vendored
View File

File diff suppressed because one or more lines are too long

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>
```
:::

76
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>
```
:::

16
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',
layVerify: 'required',
layVerType: 'tips',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},

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},
]},

18
docs/mds/options.md
View File

@ -4,8 +4,8 @@
### 配置项
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | ------------------------------ | --------------- | ------ | ------ |
| el | 渲染对象, css选择器 | string | - | - |
| ----------------- | ----------------------------- | ------------- | ------------- | --------- |
| el | 渲染对象, css选择器, dom元素 | string | - | - |
| language | 语言选择 | string | zn / en | zn |
| data | 显示的数据 | array | - | [ ] |
| content | 自定义下拉框html | string | - | - |
@ -39,6 +39,8 @@
| 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 |
@ -51,7 +53,7 @@
### prop
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | ------------------------------ | --------------- | ------ | ------ |
| ------------- | ------------------------- | ---------- | -------- | ------------- |
| name | 显示名称 | string | - | name |
| value | 选中值, 当前多选唯一 | string | - | value |
| selected | 是否选中 | string | - | selected |
@ -86,7 +88,7 @@
### theme
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | --------- | --------------- | ------ | ------ |
| --------- | ----------------- | --------- | ------ | -------- |
| color | 主题颜色 | string | - | #009688 |
| maxColor | 选中上限闪烁边框颜色 | string | - | #e54d42 |
@ -137,7 +139,7 @@ model: {
### toolbar
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | --------- | --------------- | ------ | ------ |
| ---------- | -------------------------------------------------------- | ---------- | ------------ | ------------------ |
| show | 是否展示工具条 | boolean | true / false | false |
| showIcon | 是否显示工具图标 | boolean | true / false | true |
| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | - | [ "ALL", "CLEAR" ] |
@ -167,7 +169,7 @@ list: [ "ALL", "CLEAR",
### tree
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | --------- | --------------- | ------ | ------ |
| ----------------- | --------------------- | ------------- | ------------- | ------ |
| show | 是否展示为树状结构 | boolean | true / false | false |
| showFolderIcon | 是否显示节点前的三角图标 | boolean | true / false | true |
| showLine | 是否显示虚线 | boolean | true / false | true |
@ -180,7 +182,7 @@ list: [ "ALL", "CLEAR",
| 事件名 | 说明 | 参数 | 返回值 |
| ------ | ------------------ | -------- | -------- |
| ------ | -------------------- | --------------------------------------------- | ----------------- |
| render | 渲染多选 | (options: 配置项) | 实例对象 |
| get | 获取页面中已经渲染的多选 | (filter: 过滤`el`, single: 是否返回单实例) | 符合条件的实例数组 |
| batch | 批量操作已渲染的多选 | (filter: 过滤`el`, method: 方法, ...方法参数) | 符合条件的实例数组 |
@ -216,7 +218,7 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
:::
| 事件名 | 说明 | 参数 |
| ------ | ------------------ | -------- |
| --------- | ------------------------- | ----------------- |
| getValue | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
| setValue | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉,不传默认当前显示状态,取值: true/false, listenOn: 是否触发on的监听, 默认false) |
| append | 追加赋值 | (array: 追加的数据) |

9
src/common/expand.js
View File

@ -97,3 +97,12 @@ 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];
});
};
}

7
src/components/framework/index.js
View File

@ -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 } />

4
src/components/plugin/tree.js
View File

@ -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>
)

2
src/components/xm-select/index.js
View File

@ -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 ;

4
src/config/options.js
View File

@ -17,6 +17,10 @@ export default function (lan = 'zn') {
content: '',
//表单提交的name
name: 'select',
//表单验证
layVerify: '',
//验证类型
layVerType: '',
//尺寸
size: 'medium',
//是否禁用多选

6
src/style/index.less
View File

@ -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{