graceNvueStar.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template name="graceStart">
  2. <view class="grace-stars">
  3. <view
  4. class="grace-stars-items" v-for="(item, index) in totalstars"
  5. :key="index"
  6. @tap="changnum"
  7. :data-val="index">
  8. <text class="grace-icons" :style="{'color': activecolor, 'font-size' : fontSize}" v-if="starnum > index">&#xe634;</text>
  9. <text class="grace-icons" :style="{'color': color, 'font-size' : fontSize}" v-else>&#xe634;</text>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. name: "graceStart",
  16. props:{
  17. fontSize : {
  18. type : String,
  19. default : '50rpx'
  20. },
  21. totalstars : {
  22. type : Number,
  23. default : 5
  24. },
  25. starnum : {
  26. type : Number,
  27. default : 0
  28. },
  29. color : {
  30. type : String,
  31. default : '#E1E1E1'
  32. },
  33. activecolor :{
  34. type : String,
  35. default : '#F5C359'
  36. },
  37. cantap : {
  38. type : Boolean,
  39. default : true
  40. }
  41. },
  42. methods: {
  43. changnum : function(e){
  44. if (!this.cantap){return ;}
  45. var val = Number(e.currentTarget.dataset.val);
  46. this.$emit("starchange", Number(val + 1));
  47. }
  48. }
  49. }
  50. </script>
  51. <style scoped>
  52. .grace-stars{flex-wrap:nowrap; flex-direction:row;}
  53. .grace-stars-items{text-align:center;}
  54. </style>