寫仿豆瓣的小項目的時候會經(jīng)常用到rating評分姑尺，于是將其封裝成組件。
template：
<div class="rating" >
? ? <!-- 如果是1分應該是半星 -->
? ? <template v-if="half === 0&&full===0">
? ? ? <span>暫無評分</span>
? ? </template>
? ? <template v-else>
? ? ? <!-- 數(shù)字可以進行循環(huán)茎毁，表示循環(huán)多少次 -->
? ? ? <template v-for="n in full">
? ? ? ? <span class="star-full"></span>
? ? ? </template>
? ? ? <template v-for="n in half">
? ? ? ? <span class="star-half"></span>
? ? ? </template>
? ? ? <template v-for="n in gray">
? ? ? ? <span class="star-gray"></span>
? ? ? </template>
? ? ? <span class="rank">{{rank}}</span>
? ? </template>
? </div>
這里用span表示星星，是因為圖片用background渲染忱辅，也可以直接將span換成img加載圖片七蜘。
script：
<script>
export default {
? name: 'rating',
? props: {
? ? rank: {
//指定rank的類型，這個值必需墙懂，但是防止出錯橡卤，可以指定一個默認值
? ? ? type: Number,
? ? ? required: true,
? ? ? default:5
? ? }
? },
? data () {
? ? return {
? ? ? full: 0,
? ? ? half: 0,
? ? ? gray: 0
? ? }
? },
? created () {
? ? this.fun();
? },
? methods:{
? ? fun(){
? ? ? this.full = parseInt(this.rank / 2);
? ? ? this.half = this.rank % 2 === 0 ? 0 : 1
? ? ? this.gray = 5 - this.full - this.half
? ? }
? },
? watch:{
? ? rank(){
? ? ? this.fun();
? ? }
? }
}
</script>
如果只在created的時候計算full，half损搬，gray的值碧库，則父組件使用rating的時候更新了數(shù)據(jù)則星星的渲染不會改變，所以使用watch監(jiān)聽rank的改變巧勤。
style：
<style lang="scss" scoped>
.rating {
? margin-top: 0.4rem;
? font-size: 1.4rem;
? color: #aaa;
}
.star-full {
? display: inline-block;
? width: 1.3rem;
? height: 1.3rem;
? background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAfhJREFUOBGlVD1LHFEUPXfWrzGJO2uhaIQ0iljESgKSpAjBwpXVKikEl6TzD6TwJ4gWaQMBS8WQgCRZ61QpglUgRbQUbMR1XfwodvbmvE1mdt/ssDPBC493733nnrkf7w2QQrSU29D9wY8poJAkkG6hD8O5E+IGgJsHkr8+7hTjdDpsnA0PLkHE4yK2r5iETyYUfdUkkRa96W3VOhLqXv8oFHNhgGCC/Xwc2jFKR0J0966w1IwVp/LasiNGOBTdxV24bhbqenCQRUY9qLzl2CasGEUVdbyA1M5R1wrq/gUqVxUp4tLghCX85D7VlonFksJQ9Un3w5S8c2sy8z3TGtGDRsla8op0vKe3O0UuMRBVDm9N8uX1Zg/3s8+hmU/sGS/wf8kN0UWZP/tgokJCY+jX3ENmWqJ3zNiJonoKXxalcPY9wFqExqmf3fvIuL+SM2WZNX9SCheHAZnZ2++h9FyxufdaQfG6CBznTvQshtDhSyA4jQieRmExhO2gaFBoi5OK8EkYECiqX9jdd1wauP7tbVgrw8a/TzETBpkp1nWZ96sg8+VV8j0j6VF4Dozo3sB4ix0ZypD3iO3r+QvQbfi1KVkobwcBkj//hmp5msSbXHxqlC67bCtDDr2fN/43wYvMaFkK1dOALNjlJa6Z8RuIP0vfAZfVhj/iqoy46fpKwgAAAABJRU5ErkJggg==);
? background-size: 1.3rem 1.3rem;
}
.star-gray {
? display: inline-block;
? width: 1.3rem;
? height: 1.3rem;
? background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAeRJREFUOBGtlDsvBFEUx3d2djfiMbTsQ0NEwTaiQSGiRKWREDofgMJHEAqdSPSE0BC9SiEqWQWSzT4SzSbrsR7Fzo7fEXfNg9klbjI5j/s/vzn3MRMI1DFyudxaPp8/qEMa0GqJ0ul0QzgcvtM0zbAsqzMWi+X9aoJ+kzIXiUSmgLXhinZOcn6jJpDieRvA7tvSX64vMJvNdiAdV3I67c5kMkMq/s76AgHMUqTbC0Oh0II9dvvVQ0mlUs2GYbRWKpU2ij4swA3pylX0ZJrmNPn7crn8oOv6Y7FYfEgmk8+i07gOl0z24js6cUHqCU1uwbksefcfYPJCHeDFx5LpUq7DNp2GZeYPw2KrVuLx+Gp1D4GOATwEZvwGSFdv6Oe48PtSVwVKwCfWB/SEJyZxHaMAcBLYmdI6gJIEGg0Gg1e4tTqVZfawzBsFE+u5h4heyLfYRT/4LERrcs95gNwr+RI8nbsLJWa5I+68B8hbPSJ3kYq/03qAvHVYFShL7phni9hSuU/r0TqA8u9DOGArKvCZzXCKEzyL7O8o4Fs1T4ftHGKXisU6gOzfIKLIp2CnVCr1JhKJHVXAiZ4C7Ae8Ts6UPDfCsUUhJRYLrJGCa+xSNBo9ss8pH+gr/jK/tj0a2ETv2IZ35FSkS7HbzakAAAAASUVORK5CYII=);
? background-size: 1.3rem 1.3rem;
}
.star-half {
? display: inline-block;
? width: 1.3rem;
? height: 1.3rem;
? background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAyhJREFUSA29l89rE0EUx99siqZgm0YFC00KVXuwUSMUpGitBaFgi0VEhIqHWkHw4B+gCIognrz1ZrwKVVSqtYIn9SDVHkQFQSOEmkYqaNOkQjRt8vxuyK6TzUx+LLQDm3nzfsxn982b2Q2Ry8bP/JOJROLT3Nyc380UhpsgnvLvJhLDzLzDMIwzbuZwBSZDnLNgQvyXLV0tfd1gvkcbiNh+SoDDSHd3LTDZp24wbfINkxBb5Uk8Ho+dAVlfSa4fLAwV5HQ8Hm+sBHLa6gLzdGOAmAackyDdPlwnnfpK47rAxBtHkWZdjCoTWrZukrIAxv4B9GyZoajAE/ch3Tt1dqe+ZjBNtfQDvN05gTQGW4xJ44qi4Kf+ETxLEF4+9D7KF3trzNRSsBE1O9Oc2PMhCxi2l91WIf3EwZKGPo0+VeytsalLw+d7Aw6Du3aYKThzIEqs1QYNcGgFrNV0RF/wl3tLBoZfF6zr+7Ng0ELyCDFPrBcXqX4P1n4DdfqHBpMjgN9YazigT1KpVG9bW1u8sKJYCRaDyStE+VHcQHYtbgDQW5FI5HgoFPptzl9WOjzdchjqR6iMqu9ZRVWX3TOAK7guBIPBO7LRWcMkBpdeEq/2IAlfZUc3MoCLuAacUHOuMrCpFEPLXygDONOMOXbZvgHaA+gLVbwSbDqKE8u/8NTvVEG16ABNAxrV+WrBhQBBfbrAanocFKH5+fktOj8tmB82mUFdusAa9CKfzx/S+WnB5PUgqHjm6aKr6PEhqM2YHsz6oCo824x0Y2uqmx5sVFlfJrNwnquntbXhaDTabI8kQQnmSWrCCbZP8pNEXkG136Qfi3sDgcAxVO8pGBckB1n0eL3eXllhyUowNWw+iOX1WE52z/QG7+tucTR5uXDGwwD4/Ww2uwvibVz4UCltunVWgw0uLQqmZWTgIr1dPCCGkh9Lpybq6OhYwsF/PpfL9SMDn2U7xsp1VoOZpG3Aj4kyXXiJjItreN4Krb29/VUmkwljG10H0HrZdMdiMa8zzPxiULUZJG0bce6SGEo9UDnodJ2dnX9hu4p/FxP40B+HzLOzs6iL0vYPbfQF9yQ167cAAAAASUVORK5CYII=);
? background-size: 1.3rem 1.3rem;
}
.rank {
? padding-right: 0.8rem;
}
</style>
樣式其實可以根據(jù)自己的需求而定嵌灰，這里為了方便組件的復用，所以將圖片轉為base64編碼的格式進行顯示颅悉。如果是將圖片和組件放在一起的話也可以直接使用普通鏈接的形式沽瞭。
