欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react 实现评分组件

程序员文章站 2022-07-09 21:18:13
写了个评分组件,效果如下 组件Rate.js 组件样式 Rate.less 背景图 调用 number:为评分总数,默认为5 def:为评分数,默认为0 ......

写了个评分组件,效果如下

react 实现评分组件

组件rate.js

import react, { component } from 'react'
import './rate.less'

export default class rate extends component {
  state = {
    count: this.props.number || 5,
    num: this.props.def || 0,
    enter: 0,
    leave: this.props.def || 0,
    state: ['不满意', '满意', '超满意']
  }
  /** 页面渲染前 */
  componentwillmount = () => {}
  /** 页面渲染后 */
  componentdidmount = () => {}
  /** 数据更新前 */
  componentwillupdate = () => {
    this.showstate()
  }
  showstate() {
    let { count, num, enter, state } = this.state
    let f = math.ceil(count / 2)
    if (num == 0 && enter == 0) {
      return ''
    } else if (num < f && enter < f) {
      return state[0]
    } else if (
      num == count ||
      enter == count
    ) {
      return state[2]
    } else {
      return state[1]
    }
  }
  /** 数据更新后 */
  componentdidupdate = () => {}
  render() {
    let { count, num, enter, leave } = this.state
    return (
      <div classname="rate">
        <p classname="photo">
          {new array(count).fill().map((item, index) => (
            <span
              key={index}
              onclick={() => {
                num = index + 1
                leave = num
                this.setstate({ num, leave })
              }}
              onmouseenter={() => {
                enter = index + 1
                num = 0
                this.setstate({ enter, num })
              }}
              onmouseleave={() => {
                enter = 0
                num = leave
                this.setstate({ enter, num })
              }}
            >
              {enter > index ? (
                <i classname="high" />
              ) : num > index ? (
                <i classname="high" />
              ) : (
                <i classname="nohigh" />
              )}
            </span>
          ))}
          {this.showstate()}
        </p>
      </div>
    )
  }
}

组件样式 rate.less

.rate .photo span {
  position: relative;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  overflow: hidden;
  margin-right: 0.1rem;
  cursor: pointer;
}
.rate .photo span:last-child {
  margin-right: 0px;
}
.rate .photo span .nohigh {
  background-color: red;
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  top: 0;
  left: 0;
  background: url('./star.png') no-repeat;
  background-size: 0.4rem 0.4rem;
}
.rate .photo span .high {
  background-color: purple;
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  top: 0;
  left: 0;
  background: url('./star_active.png') no-repeat;
  background-size: 0.4rem 0.4rem;
}
.rate .starnum {
  font-size: 26px;
  color: #de4414;
  margin-top: 0.04rem;
  margin-bottom: 0.1rem;
}
.rate .bottoms {
  height: 54px;
  border-top: 1px solid #d8d8d8;
}
.rate .photo {
  margin-top: 30px;
}
.rate .bottoms a {
  margin-bottom: 0;
}
.rate .bottoms .garybtn {
  margin-right: 57px !important;
}
.rate .bottoms a {
  width: 130px;
  height: 35px;
  line-height: 35px;
  border-radius: 3px;
  display: inline-block;
  font-size: 16px;
  transition: all 0.2s linear;
  margin: 16px 0 22px;
  text-align: center;
  cursor: pointer;
}
.garybtn {
  margin-right: 60px !important;
  background-color: #e1e1e1;
  color: #999999;
}
.bluebtn {
  background-color: #1968b1;
  color: #fff;
}
.bluebtn:hover {
  background: #0e73d0;
}

  

背景图

react 实现评分组件react 实现评分组件

调用

<rate number={10} def={5} />
number:为评分总数,默认为5
def:为评分数,默认为0