uni-rate.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <view class="uni-rate">
  3. <view
  4. v-for="(star, index) in stars"
  5. :key="index"
  6. :style="{ marginLeft: margin + 'px' }"
  7. class="uni-rate-icon"
  8. @click="_onClick(index)"
  9. >
  10. <uni-icons
  11. :size="size"
  12. :color="color"
  13. :type="isFill ? 'star-filled' : 'star'"
  14. />
  15. <view
  16. :style="{ width: star.activeWitch }"
  17. class="uni-rate-icon-on">
  18. <uni-icons
  19. :size="size"
  20. :color="activeColor"
  21. type="star-filled"/>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import uniIcons from '../uni-icons/uni-icons.vue'
  28. export default {
  29. name: 'UniRate',
  30. components: {
  31. uniIcons
  32. },
  33. props: {
  34. isFill: {
  35. // 星星的类型,是否镂空
  36. type: [Boolean, String],
  37. default: true
  38. },
  39. color: {
  40. // 星星的颜色
  41. type: String,
  42. default: '#ececec'
  43. },
  44. activeColor: {
  45. // 星星选中状态颜色
  46. type: String,
  47. default: '#ffca3e'
  48. },
  49. size: {
  50. // 星星的大小
  51. type: [Number, String],
  52. default: 24
  53. },
  54. value: {
  55. // 当前评分
  56. type: [Number, String],
  57. default: 0
  58. },
  59. max: {
  60. // 最大评分
  61. type: [Number, String],
  62. default: 5
  63. },
  64. margin: {
  65. // 星星的间距
  66. type: [Number, String],
  67. default: 0
  68. },
  69. disabled: {
  70. // 是否可点击
  71. type: [Boolean, String],
  72. default: false
  73. }
  74. },
  75. data () {
  76. return {
  77. valueSync: ''
  78. }
  79. },
  80. computed: {
  81. stars () {
  82. const value = Number(this.valueSync) ? Number(this.valueSync) : 0
  83. const starList = []
  84. const floorValue = Math.floor(value)
  85. const ceilValue = Math.ceil(value)
  86. for (let i = 0; i < this.max; i++) {
  87. if (floorValue > i) {
  88. starList.push({
  89. activeWitch: '100%'
  90. })
  91. } else if (ceilValue - 1 === i) {
  92. starList.push({
  93. activeWitch: (value - floorValue) * 100 + '%'
  94. })
  95. } else {
  96. starList.push({
  97. activeWitch: '0'
  98. })
  99. }
  100. }
  101. return starList
  102. }
  103. },
  104. created () {
  105. this.valueSync = this.value
  106. },
  107. methods: {
  108. _onClick (index) {
  109. if (this.disabled) {
  110. return
  111. }
  112. this.valueSync = index + 1
  113. this.$emit('change', {
  114. value: this.valueSync
  115. })
  116. }
  117. }
  118. }
  119. </script>
  120. <style lang="scss">
  121. .uni-rate {
  122. line-height: 0;
  123. font-size: 0;
  124. display: flex;
  125. flex-direction: row;
  126. &-icon {
  127. position: relative;
  128. line-height: 0;
  129. font-size: 0;
  130. display: inline-block;
  131. &-on {
  132. line-height: 1;
  133. position: absolute;
  134. top: 0;
  135. left: 0;
  136. overflow: hidden;
  137. }
  138. }
  139. }
  140. </style>