控制元素隐藏、显示的几种方法
时间：2023-02-17 23:00:00 元器件资讯
文章目录
- 隐藏和显示控制元素的几种方法？
-
- 1. 选择省份，vege的隐藏、cursor不可选，切植（js）
- 2. 增加删除图例(css)
- 3. 按钮isShowStatType=false，关闭checkbox选中显示，选择清空站(css)
隐藏和显示控制元素的几种方法？
1. 选择省份，vege的隐藏、cursor不可选，切植（js）
//menu-list的html <div class="menu-list"> <div *ngFor="let menu of menuList" class="menu" [ngClass]="{'visibility': menu.visibility}"> <ng-container *ngIf="!menu.hide"> //menu-list的css .menu-list {
.menu {
text-align: right; margin-bottom: 10px; cursor: not-allowed; &.visibility {
cursor: pointer; } &.visibility:hover {
// box-shadow: 2px 2px 4px #888888; .select-items {
.menu-item {
// display: inline-block; width: 60px; } } } } //menu-list的ts ///选择省份，vege植被的cursor不可选 setVisibility(menuName: string, visibility: boolean) {
this.menuList.forEach((menu) => {
if (menu.name == menuame) {
menu.visibility = visibility;
}
});
}
//统计的状态与GIF关联 menuName谁 isHide显示/隐藏
setHide(menuName: string, isHide: boolean) {
this.menuList.forEach((menu) => {
if (menu.name == menuName) {
menu.hide = isHide;
}
});
}
//切植
selectValue(menuName: string, selectItem: any) {
this.menuList.forEach((menu) => {
if (menu.name === menuName) {
menu.items.forEach(item => {
item.active = item.value === selectItem;
if (item.value === selectItem) {
this.change.emit(new SelectMenu(menuName, selectItem, true));
}
})
}
});
}
2. 增加删除图例(css)
//法一
if (this.isShowArea && (this.status) === 0) {
this.addLegendControl(this.areaLegend)
} else {
if (this.legendControl) {
this.mapbox.removeControl(this.legendControl)
}
}
//法二
if (lyrId == null) {
if (document.getElementsByClassName("legend")[0]) {
document.getElementsByClassName("legend")[0].className = "hidden legend";
}
}else{
//若不设置legendShow=true，loadYield()函数加载图层时，会默认hidden图例
// if (this.legendShow) {
// document.getElementsByClassName("legend")[0].className = "show legend";
// } else {
// document.getElementsByClassName("legend")[0].className = "hidden legend";
// }
this.legendShow = true;
if (document.getElementsByClassName("legend")[0]) {
document.getElementsByClassName("legend")[0].className = "show legend";
}
}
//样式
.show{
display: block;
}
.hidden{
display: none;
}
.legend {
color: #333333;
width: 100px;
background-color: #fff;
border-radius: 3px;
bottom: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
position: absolute;
left: 0;
z-index: 1;
display: block;
}
3. 按钮isShowStatType=false，关闭checkbox选中显示，清空站点选择(css)
点击按钮-checkbox无选择、地图无对应图层信息-checkbox选择后、地图显示对应图层信息，再点击按钮-地图无图层信息
//html
<span class="stat-select-btn" (click)="isShowStatType=!isShowStatType;selectStatType($event,'国家站')"></span>
<div class="stat-select-check" [ngStyle]="{'display': isShowStatType?'block':'none'}">
<label>
<input type="checkbox" name="statType" (click)="selectStatType($event,'国家站')" [(ngModel)]="gjzStatus">
<span>国家站</span>
</label>
</div>
//ts
selectStatType(e, type) {
if (!this.isShowStatType) {
//关闭checkbox选中显示
this.qyzStatus = false;
this.cliStatus = false;
this.gjzStatus = false;
//清空站点选择
this.statTypeSet = new Set();
}
...
}