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 ### 1.1.5
*2019-12-12* *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> </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> <script>
var demo1 = xmSelect.render({ var demo1 = xmSelect.render({
el: '#demo1', 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> </script>
``` ```

View File

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

View File

@ -246,6 +246,10 @@ class Framework extends Component{
//select框被点击 //select框被点击
onClick(e){ onClick(e){
if(this.props.model.type === 'relative'){
return ;
}
if(this.props.disabled){ if(this.props.disabled){
this.state.show !== false && this.setState({ show: false }); this.state.show !== false && this.setState({ show: false });
return ; return ;
@ -382,7 +386,7 @@ class Framework extends Component{
<i class={ show ? 'xm-icon xm-icon-expand' : 'xm-icon' } /> <i class={ show ? 'xm-icon xm-icon-expand' : 'xm-icon' } />
{ sels.length === 0 && <div class="xm-tips">{ config.tips }</div> } { sels.length === 0 && <div class="xm-tips">{ config.tips }</div> }
<Label { ...labelProps } /> <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 } { Body }
</div> </div>
{ disabled && <div class="xm-select-disabled"></div> } { disabled && <div class="xm-select-disabled"></div> }
@ -439,7 +443,12 @@ class Framework extends Component{
//此时页面又被重新渲染了 //此时页面又被重新渲染了
componentDidUpdate(){ componentDidUpdate(){
let { direction } = this.props; let { direction, model } = this.props;
if(model.type === 'relative'){
return ;
}
let rect = this.base.getBoundingClientRect(); let rect = this.base.getBoundingClientRect();
if(direction === 'auto'){ if(direction === 'auto'){
//用于控制js获取下拉框的高度 //用于控制js获取下拉框的高度

View File

@ -20,20 +20,24 @@ class Tree extends Component{
} }
init(props){ init(props){
const { tree, dataObj, prop } = props; const { tree, dataObj, flatData, prop } = props;
const { value } = prop const { value, optgroup } = prop
let keys = []; let keys = [];
tree.expandedKeys.forEach(key => { if(tree.expandedKeys === true){
keys.push(key); keys = flatData.filter(item => item[optgroup] === true).map(item => item[value])
}else{
tree.expandedKeys.forEach(key => {
keys.push(key);
let item = dataObj[key]; let item = dataObj[key];
while(item){ while(item){
let pkey = item[value]; let pkey = item[value];
keys.findIndex(k => k === pkey) === -1 && (keys.push(pkey)) keys.findIndex(k => k === pkey) === -1 && (keys.push(pkey))
item = item.__node.parent item = item.__node.parent
} }
}); });
}
this.setState({ expandedKeys: keys }) this.setState({ expandedKeys: keys })
} }

View File

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

View File

@ -117,6 +117,7 @@ xm-select{
} }
.xm-label-block > span{ .xm-label-block > span{
white-space: unset; white-space: unset;
height: 100%;
} }
} }
@ -198,6 +199,17 @@ xm-select{
bottom: 42px; 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{ .xm-group{
cursor: default; cursor: default;
&-item{ &-item{