封装星星评分

 在父组件中进行引用 子组件

<template>
  <div>
    <!-- 
      实现思路
      1.element icon图标 灰色黄色绝对定位
      2.设置评分对应分数赋值给黄色星星要显示的数量 黄色星星对应显示
      3.点击黄色星星 取消评分 两个相同事件传一个状态用来区分设置评分还是取消评分
      4.设置 赋值 取消评分 数量减一
      5.并且将我们选中的数量显示到我们的页面上
     -->
    <!-- input框事件,点击回车显示到将对应的星星显示到我们的页面中 -->
    <!-- 默认为五个 -->
    <rates :score.sync="curScore" />
  </div>
</template>

<script>
import rates from '@/components/rates.vue'
export default {
  components: { rates },
  data() {
    return {
      curScore: 5,
    }
  },
  created() {},
  mounted() {},
  methods: {},
}
</script>
<style scoped lang="scss"></style>

子组件中的数据

<template>
  <div class="rate">
    <span>得分：{{ inum }}分</span>
    <div class="star">
      <div class="box">
// 我们可以在class中改变所需要的样式
        <i
          class="el-icon-chat-round"
          name="star-o"
          v-for="(i, index) in score"
          :key="index"
          @click="setScore(i, 0)"
        ></i>
      </div>

      <div class="theSelected">
        <i
          class="ii el-icon-chat-line-round"
          @click="setScore(i, 1)"
          v-for="(i, index) in inum"
          :key="index"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 分数，默认5
    score: {
      type: Number,
      default: 5,
    },
  },

  data() {
    return {
      inum: 0,
    }
  },
  created() {},
  mounted() {},
  methods: {
    setScore(i, flag) {
      // i：分数
      // flag:0-->设置星星  1-->取消星星
      if (flag === 0) {
        this.inum = i
      } else {
        this.inum = i - 1
      }
    },
  },
}
</script>
<style scoped lang="scss">
.star {
  position: relative;
}
.box {
  position: absolute;
  top: 50px;
  left: 300px;
}
.theSelected {
  position: absolute;
  top: 50px;
  left: 300px;
}
.el-icon-chat-round,
.el-icon-chat-line-round {
  padding: 0 20px;
}
i {
  font-size: 40px;
}
.ii {
  color: rgb(173, 221, 192);
}
</style>