eric-utilslist/js/Star.js

基础组件类，五星好评,商品列表,计数器

import Component from "./Component.js";
export default class Star extends Component{
    label;
    starCon;
    index=-1;//鼠标划过时的索引
    pos=-1;//鼠标点击的索引
    arr;
    face;
    score;
    constructor(_label){
        super("div");
        this.elem.className="stars clear"
        this.label=_label;
        this.elem.innerHTML=`
            <span class='label'>${_label}</span>
            <div class='star-con clear'>
                <span class='star'></span>
                <span class='star'></span>
                <span class='star'></span>
                <span class='star'></span>
                <span class='star'></span>
                <span class='face'></span>
            </div>
            <span class='score'>0分</span>
        `
        this.starCon=this.elem.querySelector(".star-con");
        this.arr=Array.from(this.starCon.children);
        this.face=this.arr.pop();
        this.score=this.elem.querySelector(".score");
        this.starCon.addEventListener("mouseover",e=>this.mouseHandler(e));
        this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e));
        this.starCon.addEventListener("click",e=>this.clickHandler(e));

    }
    mouseHandler(e){
        if(e.type==="mouseleave"){
            this.arr.forEach((item,i)=>{
                if(i>this.pos)
                item.style.backgroundPositionY="0px";
            })
            this.face.style.display="none";
            this.score.textContent=this.pos+1+"分"
            if(this.pos+1>0){
                this.score.style.color="red";
            }else{
                this.score.style.color="#999";
            }
        }else if(e.type==="mouseover"){
            if(e.target.className!=="star") return;
            this.index=this.arr.indexOf(e.target);
            this.arr.forEach((item,i)=>{
                if(this.index>=i){
                    item.style.backgroundPositionY="-16px";
                }else if(i>this.pos){
                    item.style.backgroundPositionY="-0px";
                }
            })
            Object.assign(this.face.style,{
                display:"block",
                left:e.target.offsetLeft+"px",
                backgroundPositionX:(4-this.index)*-20+"px"
            })
            this.score.textContent=this.index+1+"分"
            if(this.index+1>0){
                this.score.style.color="red";
            }
        }
      
    }
    clickHandler(e){
        if(e.target.className!=="star") return;
        this.pos=this.arr.indexOf(e.target);
    }
}