新增fixed布局

This commit is contained in:
maplemei
2021-01-19 16:28:25 +08:00
parent b47c8cfcb9
commit e928c6a038
19 changed files with 131 additions and 66 deletions

View File

@@ -38,6 +38,8 @@
this.fixedControl = bottom > document.documentElement.clientHeight &&
top + 44 <= document.documentElement.clientHeight;
this.$refs.control.style.left = this.fixedControl ? `${ left }px` : '0';
xmSelect.get().forEach(xs => xs.calcPosition());
},
removeScrollHandler() {
this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler);

View File

@@ -48,7 +48,7 @@ layui.use('table', function() {
//修改一些css样式, 这里虽然能够使用, 但是还是不太友好, 努力中...
var cells = document.querySelectorAll('div[lay-id="demo"] .layui-table-cell');
for(var i = 0 ; i < cells.length ; i++ ){
cells[i].style.overflow = 'unset';
//cells[i].style.overflow = 'unset';
cells[i].style.height = 'auto';
}
//渲染多选
@@ -56,6 +56,7 @@ layui.use('table', function() {
var xm = xmSelect.render({
el: '#XM-' + item.id,
autoRow: true,
model: { type: 'fixed' },
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
@@ -70,6 +71,13 @@ layui.use('table', function() {
});
//表格滚动时 重新计算位置
document.querySelector('.layui-table-body').addEventListener('scroll', () => {
xmSelect.get().forEach(function(item){
item.calcPosition();
})
})
</script>
```

View File

@@ -5,45 +5,21 @@
<div id="demo1" class="xm-select-demo"></div>
<script>
var demo1 = xmSelect.render({
xmSelect.render({
el: '#demo1',
autoRow: true,
model: {
label: {
type: 'search'
},
},
radio: true,
filterable: true,
tree: {
show: true,
showFolderIcon: true,
showLine: true,
indent: 20,
expandedKeys: [ -3 ],
simple: true,
clickExpand: false,
clickCheck: false,
strict: false
},
toolbar: {
show: true,
list: ['ALL', 'REVERSE', 'CLEAR']
},
filterable: true,
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, disabled: true, 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},
]},
]
},
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>

View File

@@ -134,7 +134,7 @@ model: {
}
},
},
//展示类型, 下拉框形式: absolute, 直接显示模式: relative
//展示类型, 下拉框形式: absolute, 直接显示模式: relative, 浮动布局: fixed
type: 'absolute',
},
```
@@ -258,3 +258,4 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
| changeExpandedKeys | 树模式下更新节点展开状态, v1.2.0 新增 | (keys: true-全部展开, false-全部关闭, 数组-展开的节点值) |
| enable | 启用选项, disabled=false, v1.2.0 新增 | (array: 想要启用的选项数组) |
| disable | 禁用用选项, disabled=true, v1.2.0 新增 | (array: 想要禁用的选项数组) |
| calcPosition | fixed布局模式下重新计算位置, v1.2.2 新增 | - |