rate.nvue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基本案例</text>
  5. <view class="u-demo-block__content">
  6. <view class="u-page__tag-item">
  7. <u-rate size="20"></u-rate>
  8. </view>
  9. </view>
  10. </view>
  11. <view class="u-demo-block">
  12. <text class="u-demo-block__title">自定义选中星星数量</text>
  13. <view class="u-demo-block__content">
  14. <view class="u-page__tag-item">
  15. <u-rate
  16. size="20"
  17. v-model="value"
  18. @change="change"
  19. ></u-rate>
  20. </view>
  21. </view>
  22. </view>
  23. <view class="u-demo-block">
  24. <text class="u-demo-block__title">自定义星星大小</text>
  25. <view class="u-demo-block__content">
  26. <view class="u-page__tag-item">
  27. <u-rate size="30" count="4"></u-rate>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="u-demo-block">
  32. <text class="u-demo-block__title">是否禁用评分</text>
  33. <view class="u-demo-block__content">
  34. <view class="u-page__rate-item">
  35. <u-rate size="20" disabled></u-rate>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="u-demo-block">
  40. <text class="u-demo-block__title">是否只读评分</text>
  41. <view class="u-demo-block__content">
  42. <view class="u-page__rate-item">
  43. <u-rate size="20" readonly></u-rate>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="u-demo-block">
  48. <text class="u-demo-block__title">自定义选中星星颜色</text>
  49. <view class="u-demo-block__content">
  50. <view class="u-page__rate-item">
  51. <u-rate
  52. size="20"
  53. v-model="activeColorValue"
  54. activeColor="#2979ff"
  55. ></u-rate>
  56. </view>
  57. </view>
  58. </view>
  59. <view class="u-demo-block">
  60. <text class="u-demo-block__title">自定义未选中星星颜色</text>
  61. <view class="u-demo-block__content">
  62. <view class="u-page__rate-item">
  63. <u-rate
  64. size="20"
  65. v-model="value1"
  66. inactiveColor="#2979ff"
  67. ></u-rate>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="u-demo-block">
  72. <text class="u-demo-block__title">禁止触摸选择</text>
  73. <view class="u-demo-block__content">
  74. <view class="u-page__rate-item">
  75. <u-rate size="20" :touchable="false"></u-rate>
  76. </view>
  77. </view>
  78. </view>
  79. <view class="u-demo-block">
  80. <text class="u-demo-block__title">允许触摸选择</text>
  81. <view class="u-demo-block__content">
  82. <view class="u-page__rate-item">
  83. <u-rate size="20" :touchable="true"></u-rate>
  84. </view>
  85. </view>
  86. </view>
  87. <view class="u-demo-block">
  88. <text class="u-demo-block__title">是否允许半星</text>
  89. <view class="u-demo-block__content">
  90. <view class="u-page__rate-item">
  91. <u-rate
  92. size="20"
  93. v-model="HalfValue"
  94. :allowHalf="true"
  95. @change="change"
  96. ></u-rate>
  97. </view>
  98. </view>
  99. </view>
  100. <view class="u-demo-block">
  101. <text class="u-demo-block__title">自定义选中的图标</text>
  102. <view class="u-demo-block__content">
  103. <view class="u-page__rate-item">
  104. <u-rate
  105. size="20"
  106. v-model="activeIconValue"
  107. inactiveIcon="heart"
  108. activeIcon="heart-fill"
  109. ></u-rate>
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. </template>
  115. <script>
  116. export default {
  117. data() {
  118. return {
  119. //自定义星星的个数
  120. value: 3,
  121. value1: 2,
  122. // 自定义选择星星颜色个数
  123. activeColorValue: 3,
  124. // 是否允许半星的个数
  125. HalfValue: 3.5,
  126. // 自定义图标星星个数
  127. activeIconValue: 3,
  128. }
  129. },
  130. watch: {
  131. value(newValue, oldValue) {
  132. // console.log(newValue);
  133. }
  134. },
  135. methods: {
  136. change(e) {
  137. // console.log('change', e);
  138. }
  139. },
  140. }
  141. </script>
  142. <style lang="scss">
  143. .u-page {}
  144. </style>