25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

u-rate.vue 5.9 KiB

2 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <template>
  2. <view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
  3. <view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
  4. <u-icon
  5. :name="activeIndex > index ? activeIcon : inactiveIcon"
  6. @click="click(index + 1, $event)"
  7. :color="activeIndex > index ? activeColor : inactiveColor"
  8. :style="{
  9. fontSize: size + 'rpx',
  10. padding: `0 ${gutter / 2 + 'rpx'}`
  11. }"
  12. ></u-icon>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. /**
  18. * rate 评分
  19. * @description 该组件一般用于满意度调查,星型评分的场景
  20. * @tutorial https://www.uviewui.com/components/rate.html
  21. * @property {String Number} count 最多可选的星星数量(默认5)
  22. * @property {String Number} current 默认选中的星星数量(默认0)
  23. * @property {Boolean} disabled 是否禁止用户操作(默认false)
  24. * @property {String Number} size 星星的大小,单位rpx(默认32)
  25. * @property {String} inactive-color 未选中星星的颜色(默认#b2b2b2)
  26. * @property {String} active-color 选中的星星颜色(默认#FA3534)
  27. * @property {String} active-icon 选中时的图标名,只能为uView的内置图标(默认star-fill)
  28. * @property {String} inactive-icon 未选中时的图标名,只能为uView的内置图标(默认star)
  29. * @property {String} gutter 星星之间的距离(默认10)
  30. * @property {String Number} min-count 最少选中星星的个数(默认0)
  31. * @property {Boolean} allow-half 是否允许半星选择(默认false)
  32. * @event {Function} change 选中的星星发生变化时触发
  33. * @example <u-rate :count="count" :current="2"></u-rate>
  34. */
  35. export default {
  36. name: 'u-rate',
  37. props: {
  38. // 用于v-model双向绑定选中的星星数量
  39. // 1.4.5版新增
  40. value: {
  41. type: [Number, String],
  42. default: -1
  43. },
  44. // 要显示的星星数量
  45. count: {
  46. type: [Number, String],
  47. default: 5
  48. },
  49. // 当前需要默认选中的星星(选中的个数)
  50. // 1.4.5后通过value双向绑定,不再建议使用此参数
  51. current: {
  52. type: [Number, String],
  53. default: 0
  54. },
  55. // 是否不可选中
  56. disabled: {
  57. type: Boolean,
  58. default: false
  59. },
  60. // 星星的大小,单位rpx
  61. size: {
  62. type: [Number, String],
  63. default: 32
  64. },
  65. // 未选中时的颜色
  66. inactiveColor: {
  67. type: String,
  68. default: '#b2b2b2'
  69. },
  70. // 选中的颜色
  71. activeColor: {
  72. type: String,
  73. default: '#FA3534'
  74. },
  75. // 星星之间的间距,单位rpx
  76. gutter: {
  77. type: [Number, String],
  78. default: 10
  79. },
  80. // 最少能选择的星星个数
  81. minCount: {
  82. type: [Number, String],
  83. default: 0
  84. },
  85. // 是否允许半星(功能尚未实现)
  86. allowHalf: {
  87. type: Boolean,
  88. default: false
  89. },
  90. // 选中时的图标(星星)
  91. activeIcon: {
  92. type: String,
  93. default: 'star-fill'
  94. },
  95. // 未选中时的图标(星星)
  96. inactiveIcon: {
  97. type: String,
  98. default: 'star'
  99. }
  100. },
  101. data() {
  102. return {
  103. // 生成一个唯一id,否则一个页面多个评分组件,会造成冲突
  104. elId: this.$u.guid(),
  105. elClass: this.$u.guid(),
  106. starBoxLeft: 0, // 评分盒子左边到屏幕左边的距离,用于滑动选择时计算距离
  107. // 当前激活的星星的index,如果存在value,优先使用value,因为它可以双向绑定(1.4.5新增)
  108. activeIndex: this.value != -1 ? this.value : this.current,
  109. starWidth: 0, // 每个星星的宽度
  110. starWidthArr: [] //每个星星最右边到组件盒子最左边的距离
  111. };
  112. },
  113. watch: {
  114. current(val) {
  115. this.activeIndex = val;
  116. },
  117. value(val) {
  118. this.activeIndex = val;
  119. }
  120. },
  121. methods: {
  122. // 获取评分组件盒子的布局信息
  123. getElRectById() {
  124. // uView封装的获取节点的方法,详见文档
  125. this.$u.getRect('#' + this.elId).then(res => {
  126. this.starBoxLeft = res.left;
  127. })
  128. },
  129. // 获取单个星星的尺寸
  130. getElRectByClass() {
  131. // uView封装的获取节点的方法,详见文档
  132. this.$u.getRect('.' + this.elClass).then(res => {
  133. this.starWidth = res.width;
  134. // 把每个星星右边到组件盒子左边的距离放入数组中
  135. for (let i = 0; i < this.count; i++) {
  136. this.starWidthArr[i] = (i + 1) * this.starWidth;
  137. }
  138. })
  139. },
  140. // 手指滑动
  141. touchMove(e) {
  142. if (this.disabled) {
  143. return;
  144. }
  145. if (!e.changedTouches[0]) {
  146. return;
  147. }
  148. const movePageX = e.changedTouches[0].pageX;
  149. // 滑动点相对于评分盒子左边的距离
  150. const distance = movePageX - this.starBoxLeft;
  151. // 如果滑动到了评分盒子的左边界,就设置为0星
  152. if (distance <= 0) {
  153. this.activeIndex = 0;
  154. }
  155. // 滑动的距离,相当于多少颗星星
  156. let index = Math.ceil(distance / this.starWidth);
  157. this.activeIndex = index > this.count ? this.count : index;
  158. // 对最少颗星星的限制
  159. if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
  160. this.emitEvent();
  161. },
  162. // 通过点击,直接选中
  163. click(index, e) {
  164. if (this.disabled) {
  165. return;
  166. }
  167. // 半星选择,尚未实现
  168. if (this.allowHalf) {
  169. }
  170. // 对第一个星星特殊处理,只有一个的时候,点击可以取消,否则无法作0星评价
  171. if (index == 1) {
  172. if (this.activeIndex == 1) this.activeIndex = 0;
  173. else this.activeIndex = 1;
  174. } else {
  175. this.activeIndex = index;
  176. }
  177. // 对最少颗星星的限制
  178. if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
  179. this.emitEvent();
  180. },
  181. // 发出事件
  182. emitEvent() {
  183. // 发出change事件
  184. this.$emit('change', this.activeIndex);
  185. // 同时修改双向绑定的value的值
  186. if(this.value != -1) {
  187. this.$emit('input', this.activeIndex);
  188. }
  189. }
  190. },
  191. mounted() {
  192. this.getElRectById();
  193. this.getElRectByClass();
  194. }
  195. };
  196. </script>
  197. <style scoped lang="scss">
  198. @import "../../libs/css/style.components.scss";
  199. .u-rate {
  200. display: -webkit-inline-flex;
  201. display: inline-flex;
  202. align-items: center;
  203. margin: 0;
  204. padding: 0;
  205. }
  206. .u-icon {
  207. box-sizing: border-box;
  208. }
  209. </style>