v1.1.6
This commit is contained in:
parent
036126d58c
commit
1af1f03195
15
CHANGELOG.md
15
CHANGELOG.md
@ -1,5 +1,20 @@
|
||||
## 更新日志
|
||||
|
||||
### 1.1.6
|
||||
|
||||
*2019-12-18*
|
||||
|
||||
#### 新增
|
||||
|
||||
- 新增显示模式, 可以始终显示下拉内容
|
||||
- tree模式新增配置, 可以直接展开所有节点
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- 修复动态开启动态搜索, 搜索无反应
|
||||
- 修复radio模式下setValue能设置多值的问题
|
||||
|
||||
|
||||
### 1.1.5
|
||||
|
||||
*2019-12-12*
|
||||
|
4
dist/static/2.js
vendored
4
dist/static/2.js
vendored
File diff suppressed because one or more lines are too long
4
dist/static/3.js
vendored
4
dist/static/3.js
vendored
File diff suppressed because one or more lines are too long
4
dist/static/docs.js
vendored
4
dist/static/docs.js
vendored
File diff suppressed because one or more lines are too long
4
dist/xm-select.js
vendored
4
dist/xm-select.js
vendored
File diff suppressed because one or more lines are too long
@ -176,3 +176,36 @@ var demo6 = xmSelect.render({
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
### 直接显示下拉
|
||||
|
||||
```
|
||||
model: {
|
||||
type: 'relative', //默认 absolute
|
||||
},
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo7" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo7 = xmSelect.render({
|
||||
el: '#demo7',
|
||||
model: {
|
||||
type: 'relative',
|
||||
},
|
||||
filterable: true,
|
||||
toolbar: { show: true },
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{name: '王五', value: 3},
|
||||
],
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
@ -7,16 +7,40 @@
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: [
|
||||
],
|
||||
model: {
|
||||
type: 'relative',
|
||||
},
|
||||
filterable: true,
|
||||
tree: {
|
||||
show: true,
|
||||
showFolderIcon: true,
|
||||
showLine: true,
|
||||
indent: 20,
|
||||
expandedKeys: true,
|
||||
},
|
||||
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},
|
||||
]},
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
setTimeout(function(){
|
||||
demo1.update({
|
||||
empty: 'xxx'
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "xm-select",
|
||||
"version": "1.1.5",
|
||||
"version": "1.1.6",
|
||||
"description": "始于Layui的select多选解决方案",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
@ -246,6 +246,10 @@ class Framework extends Component{
|
||||
|
||||
//select框被点击
|
||||
onClick(e){
|
||||
if(this.props.model.type === 'relative'){
|
||||
return ;
|
||||
}
|
||||
|
||||
if(this.props.disabled){
|
||||
this.state.show !== false && this.setState({ show: false });
|
||||
return ;
|
||||
@ -382,7 +386,7 @@ class Framework extends Component{
|
||||
<i class={ show ? 'xm-icon xm-icon-expand' : 'xm-icon' } />
|
||||
{ sels.length === 0 && <div class="xm-tips">{ config.tips }</div> }
|
||||
<Label { ...labelProps } />
|
||||
<div class={ show ? 'xm-body' : 'xm-body dis' } ref={ ref => this.bodyView = ref}>
|
||||
<div class={ ['xm-body', config.model.type, show ? '':'dis', ].join(' ') } ref={ ref => this.bodyView = ref}>
|
||||
{ Body }
|
||||
</div>
|
||||
{ disabled && <div class="xm-select-disabled"></div> }
|
||||
@ -439,7 +443,12 @@ class Framework extends Component{
|
||||
|
||||
//此时页面又被重新渲染了
|
||||
componentDidUpdate(){
|
||||
let { direction } = this.props;
|
||||
let { direction, model } = this.props;
|
||||
|
||||
if(model.type === 'relative'){
|
||||
return ;
|
||||
}
|
||||
|
||||
let rect = this.base.getBoundingClientRect();
|
||||
if(direction === 'auto'){
|
||||
//用于控制js获取下拉框的高度
|
||||
|
@ -20,20 +20,24 @@ class Tree extends Component{
|
||||
}
|
||||
|
||||
init(props){
|
||||
const { tree, dataObj, prop } = props;
|
||||
const { value } = prop
|
||||
const { tree, dataObj, flatData, prop } = props;
|
||||
const { value, optgroup } = prop
|
||||
|
||||
let keys = [];
|
||||
tree.expandedKeys.forEach(key => {
|
||||
keys.push(key);
|
||||
if(tree.expandedKeys === true){
|
||||
keys = flatData.filter(item => item[optgroup] === true).map(item => item[value])
|
||||
}else{
|
||||
tree.expandedKeys.forEach(key => {
|
||||
keys.push(key);
|
||||
|
||||
let item = dataObj[key];
|
||||
while(item){
|
||||
let pkey = item[value];
|
||||
keys.findIndex(k => k === pkey) === -1 && (keys.push(pkey))
|
||||
item = item.__node.parent
|
||||
}
|
||||
});
|
||||
let item = dataObj[key];
|
||||
while(item){
|
||||
let pkey = item[value];
|
||||
keys.findIndex(k => k === pkey) === -1 && (keys.push(pkey))
|
||||
item = item.__node.parent
|
||||
}
|
||||
});
|
||||
}
|
||||
this.setState({ expandedKeys: keys })
|
||||
}
|
||||
|
||||
|
@ -138,7 +138,8 @@ export default function (lan = 'zn') {
|
||||
}
|
||||
},
|
||||
},
|
||||
icon: 'show',
|
||||
icon: 'show',
|
||||
type: 'absolute',
|
||||
},
|
||||
|
||||
// 展开下拉框
|
||||
|
@ -117,6 +117,7 @@ xm-select{
|
||||
}
|
||||
.xm-label-block > span{
|
||||
white-space: unset;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -198,6 +199,17 @@ xm-select{
|
||||
bottom: 42px;
|
||||
}
|
||||
|
||||
&.relative{
|
||||
position: relative;
|
||||
display: block !important;
|
||||
top: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
animation-name: none;
|
||||
animation-duration: 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.xm-group{
|
||||
cursor: default;
|
||||
&-item{
|
||||
|
Loading…
Reference in New Issue
Block a user