在父组件中进行引用 子组件
<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>