三级联动-面向对象

三级联动-面向对象

• Tab
• `import Component from “./Component.js”;

export default class Tab extends Component{
data;
ul1;
li1;
ul;
li;
static i=0;
bool=true;
static obj={};
constructor(_data,_length){
super();
this.data=_data;
this.length=_length;
this.createUl();
Tab.obj[Tab.i++]=this;
}
createUl(){
this.ul=document.createElement(“ul”);
this.li=document.createElement(“li”);
this.ul1=document.createElement(“ul”);
this.li1=document.createElement(“li”);
Object.assign(this.ul.style,{
listStyle:“none”,
margin:0,
padding:0,
width:“60px”,
height:“30px”,
border:“1px solid #cccccc”,
textAlign:“center”,
lineHeight:“30px”,
// borderRadius:“30px”,
});
Object.assign(this.ul1.style,{
listStyle:“none”,
margin:0,
padding:0,
width:“60px”,
position:“absolute”,
top:“40px”,
border:“1px solid #000000”,
display:“none”
});
this.createLi(this.data,this.length);
this.addLi(Tab.obj[0]);
this.li.appendChild(this.ul1);
this.ul.appendChild(this.li);
// this.ul1.appendChild(this.li1);
this.elem.appendChild(this.ul);
this.elem.addEventListener(“click”,(e)=>this.clickHandler(e));
this.ul1.addEventListener(“click”,(e)=>this.clickHandlerUl(e));
this.elem.style.float=“left”;
this.elem.style.marginRight=“10px”;
}
addLi(obj){
// console.log(obj);
}
createLi(data){
let felem=document.createDocumentFragment();
for(var i=0;i<data.length;i++){
let li=document.createElement(“li”);
li.textContent=data[i];
felem.appendChild(li);
}
this.ul1.appendChild(felem);
this.li.appendChild(this.ul1);
this.ul.appendChild(this.li);
}
clickHandler(e){
if(this.bool){
this.ul1.style.display=“block”;
this.bool=false;
}else{
this.ul1.style.display=“none”;
this.bool=true;
}
}
clickHandlerUl(e){
this.li1.textContent=e.target.textContent;
}
}`

• List item