This commit is contained in:
maplemei 2019-12-18 18:10:56 +08:00
parent 036126d58c
commit 1af1f03195
12 changed files with 129 additions and 31 deletions

View File

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

File diff suppressed because one or more lines are too long

4
dist/static/3.js vendored

File diff suppressed because one or more lines are too long

4
dist/static/docs.js vendored

File diff suppressed because one or more lines are too long

4
dist/xm-select.js vendored

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

@ -1,6 +1,6 @@
{
"name": "xm-select",
"version": "1.1.5",
"version": "1.1.6",
"description": "始于Layui的select多选解决方案",
"main": "index.js",
"scripts": {

View File

@ -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获取下拉框的高度

View File

@ -20,10 +20,13 @@ 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 = [];
if(tree.expandedKeys === true){
keys = flatData.filter(item => item[optgroup] === true).map(item => item[value])
}else{
tree.expandedKeys.forEach(key => {
keys.push(key);
@ -34,6 +37,7 @@ class Tree extends Component{
item = item.__node.parent
}
});
}
this.setState({ expandedKeys: keys })
}

View File

@ -139,6 +139,7 @@ export default function (lan = 'zn') {
},
},
icon: 'show',
type: 'absolute',
},
// 展开下拉框

View File

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