js网站源码,网站推广基本方法,建e网设计案例,深圳福田区网站建设页面动态布局经常性要交给客户来操作#xff0c;他们按时他们的习惯在同一个屏幕内显示若干个子视图#xff0c;尤其是在医学影像领域对于影像的同屏显示目视对比显的更为重要。
来看看如下的用户体验#xff1a; 设计为最多支持5行6列页面展示后#xff0c;右侧的布局则动…页面动态布局经常性要交给客户来操作他们按时他们的习惯在同一个屏幕内显示若干个子视图尤其是在医学影像领域对于影像的同屏显示目视对比显的更为重要。
来看看如下的用户体验 设计为最多支持5行6列页面展示后右侧的布局则动态跟随来显示更多影像图像在目视范围内则可以做出更多读片等判断操作。
下面来给出实现代码。
首先给出页面代码因页面较为复杂这里只给核心处的代码你只需要重点关注el-popover组件位置的使用即可 div classlayout-view flex-row jc-center v-forlayItem in layoutSeriTools:keylayItem.icon :class{ tool-item-hl: layItem.selected }clickseriesLayoutAction(layItem)el-image v-iflayItem.tag ! 4 classlayout-item :srclayItem.icon/el-imageel-popover refboxPopover_0 v-else classlayout-item popper-classpop-grid-view placementright-starttriggerhoverdiv classv-box-view mouseleaveleaveBoxAction(0)div classv-box-item-view :class{ hili-box: ibox.selected }v-for(ibox, ixIndex) in layItem.child :keyixIndexmouseenterhoverBoxAction(0, ibox) clickboxClickAction(0)/div/divel-image slotreference classlayout-item :srclayItem.icon/el-image/el-popoverel-image v-iflayItem.tag 4 classdown-view:srcrequire(/assets/images/downArrow.png)/el-image
/div 我使用的elmentUI,其主题默认是白色我根据页面修改了组件的样式你想改就改不改就忽略。 style langscss scoped
.dropdown-menu-view {background: #222;background-color: #222;border: 2px solid #343434;
}.dropdown-menu-item-view {color: white;:hover {background-color: rgba(2, 134, 240, 0.2);color: white;}
}
/stylestyle
.popperView.el-select-dropdown {border: 2px solid #343434;
}.popperView .el-select-dropdown__list {background-color: #222;
}/* 自定义选中的选项背景色 */
.popperView .el-select-dropdown__item.selected {background-color: rgba(2, 134, 240, 0.2);color: white;
}/* 自定义鼠标悬停的选项背景色 */
.popperView .el-select-dropdown__item:hover {background-color: #ecf5ff;
}.popperView .el-select-dropdown__item {background-color: transparent;:hover {background-color: rgba(2, 134, 240, 0.2);color: white;}
}.el-popper[x-placement^top] .popper__arrow::after {border-top-color: #343434;
}.el-popper[x-placement^top] .popper__arrow {border-top-color: #343434;
}.el-popper[x-placement^bottom] .popper__arrow::after {border-bottom-color: #343434;
}.el-popper[x-placement^bottom] .popper__arrow {border-bottom-color: #343434;
}.el-popper[x-placement^right] .popper__arrow {border-right-color: #343434;
}.el-popper[x-placement^right] .popper__arrow::after {border-right-color: #343434 !important;
}.pop-grid-view.el-popper {background: #1a1a1a;background-color: #1a1a1a;border: 3px solid #343434;padding: 0px;border-radius: 0px;
}
/style 数据定义元素从左到右均在数组中定义只有最后一个元素时才会显示自定义宫格功能所以数据仍然定义在其child中注意其他元素并没有child。 layoutSeriTools: [{tag: 0,icon: require(/assets/images/layout-1.png),title: ,selected: true,toolsId:
}, {tag: 1,icon: require(/assets/images/layout-2.png),title: ,selected: false,toolsId:
}, {tag: 2,icon: require(/assets/images/layout-3.png),title: ,selected: false,toolsId:
}, {tag: 3,icon: require(/assets/images/layout-4.png),title: ,selected: false,toolsId:
}, {tag: 4,icon: require(/assets/images/layout-5.png),title: ,selected: false,toolsId: ,child: []
}], 给最后一个元素塞入5行6列的数据因为VUE本身就是MVVM即我们好数据对数据进行直接操作时页面则会动态渲染。我们不可能愚蠢的去手动一个一个塞所以这里使用for循环来塞。cols代表第几列rows代码第几行通过求商、求余来控制方格的元数据。 let boxItem aForm.layoutSeriTools.filter(p p.tag 4)[0]
for (let i 0; i 30; i) {let e {selected: false,cols: i % 6,rows: parseInt(i / 6)}boxItem.child.push(e)
} 通过上面的代码就已经可以正常的弹出定义的行列显示现在添加业务数据的控制逻辑 鼠标滑动到哪格中小于这个格元数据的行、列则选中否则不选中这个方法则是核心 hoverBoxAction(tag, item) {let list tag 0 ? this.layoutSeriTools.filter(p p.tag 4)[0].child : this.layoutPicTools.filter(p p.tag 4)[0].childlet row item.rowslet col item.colslist.forEach(m {m.notClearn falsem.selected m.cols col m.rows row});
},
boxClickAction(tag) {let tList tag 0 ? this.layoutSeriTools:this.layoutPicToolslet list tList.filter(p p.tag 4)[0].childlet nList list.filter(p p.selected true)nList.forEach(m {m.notClearn true});tList.filter(pp.selected true).firstObject().selected falsetList.filter(pp.tag 4).firstObject().selected truethis.$refs[boxPopover_${tag}][0].doClose()
},
leaveBoxAction(tag) {//别有用意不要随便改时间只是为了动画同步setTimeout(() {let list tag 0 ? this.layoutSeriTools.filter(p p.tag 4)[0].child : this.layoutPicTools.filter(p p.tag 4)[0].childlist.forEach(m {if (!m.notClearn) {m.selected false}});}, 300);
} 祝你使用丝滑若有疑问请发表评论或者私信沟通。
