index.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!-- 评分星星组件 -->
  2. <template name="trailerStars">
  3. <view style="display: flex;">
  4. <image style="margin-right: 10upx;" :key="index" :data-index="index" @click="start_click" v-for="(yellow, index) in score"
  5. :src="'/static/start'+(index<currentScore?1:2)+'.png'" :class="allowTap==1?'star-ico':'star-ico2'"></image>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. name: "trailerStars",
  11. data() {
  12. return {
  13. score: 5,
  14. currentScore: 1,
  15. isAllowTap: 0,
  16. };
  17. },
  18. props: {
  19. innerScore: 0,
  20. changeScore: {},
  21. allowTap: {},
  22. },
  23. created() {
  24. this.currentScore = Number(this.innerScore).toFixed(0);
  25. this.isAllowTap = Number(this.allowTap)
  26. },
  27. methods: {
  28. start_click(e) {
  29. if (this.isAllowTap == 1) {
  30. const index = e.currentTarget.dataset.index
  31. this.currentScore = index + 1
  32. this.$emit("changeScore", index + 1)
  33. }
  34. },
  35. },
  36. }
  37. </script>
  38. <style>
  39. .movie-score-wapper {
  40. display: flex;
  41. flex-direction: row;
  42. }
  43. .star-ico {
  44. width: 60upx;
  45. height: 60upx;
  46. }
  47. .star-ico2 {
  48. width: 30upx;
  49. height: 30upx;
  50. }
  51. </style>