ngAfterViewInit(): void {
this.initViewAllBtn();
}
查看全部按钮这个时候还没有加载所以需要通过声明周期钩子回调
initViewAllBtn() {
const description = document.getElementById('desc') as HTMLElement;
if (description == null) {
return;
}
const viewAllDiv = document.createElement("div");
// const all = document.getElementById('all');
const descString = description.textContent;
const showString = '查看全部';
const hideString = '收起';
const n = description.offsetHeight;
// if (n === 0) {
// return;
// }
viewAllDiv.style.fontSize = '1rem';
viewAllDiv.style.color = '#637aa6';
viewAllDiv.style.marginTop = '0.63rem';
viewAllDiv.style.lineHeight = '1rem';
if (n <= 110) {
// all.style.display = 'none';
viewAllDiv.style.display = 'none';
// description.style.height = 'auto';
} else {
viewAllDiv.innerHTML = showString;
viewAllDiv.style.display = 'block';
// all.innerHTML = showString;
// all.style.display = 'block';
description.setAttribute('class', 'sub-show');
}
viewAllDiv.onclick = (e) => {
if (description.classList.length > 0) {
description.innerHTML = descString;
description.classList.remove("sub-show");
viewAllDiv.innerHTML = hideString;
} else {
description.innerHTML = descString;
viewAllDiv.innerHTML = showString;
description.setAttribute('class', 'sub-show');
}
};
if (document.getElementById(this.descriptionSectionId)) {
document.getElementById(this.descriptionSectionId).appendChild(viewAllDiv);
}
}