u-rate.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <template>
  2. <view
  3. class="u-rate"
  4. :id="elId"
  5. ref="u-rate"
  6. :style="[$u.addStyle(customStyle)]"
  7. >
  8. <view
  9. class="u-rate__content"
  10. @touchmove.stop="touchMove"
  11. @touchend.stop="touchEnd"
  12. >
  13. <view
  14. class="u-rate__content__item"
  15. v-for="(item, index) in Number(count)"
  16. :key="index"
  17. :class="[elClass]"
  18. >
  19. <view
  20. class="u-rate__content__item__icon-wrap"
  21. ref="u-rate__content__item__icon-wrap"
  22. @tap.stop="clickHandler($event, index + 1)"
  23. >
  24. <u-icon
  25. :name="
  26. Math.floor(activeIndex) > index
  27. ? activeIcon
  28. : inactiveIcon
  29. "
  30. :color="
  31. disabled
  32. ? '#c8c9cc'
  33. : Math.floor(activeIndex) > index
  34. ? activeColor
  35. : inactiveColor
  36. "
  37. :custom-style="{
  38. 'padding-left': $u.addUnit(gutter / 2),
  39. 'padding-right': $u.addUnit(gutter / 2)
  40. }"
  41. :size="size"
  42. ></u-icon>
  43. </view>
  44. <view
  45. v-if="allowHalf"
  46. @tap.stop="clickHandler($event, index + 1)"
  47. class="u-rate__content__item__icon-wrap u-rate__content__item__icon-wrap--half"
  48. :style="[{
  49. width: $u.addUnit(rateWidth / 2),
  50. }]"
  51. ref="u-rate__content__item__icon-wrap"
  52. >
  53. <u-icon
  54. :name="
  55. Math.ceil(activeIndex) > index
  56. ? activeIcon
  57. : inactiveIcon
  58. "
  59. :color="
  60. disabled
  61. ? '#c8c9cc'
  62. : Math.ceil(activeIndex) > index
  63. ? activeColor
  64. : inactiveColor
  65. "
  66. :custom-style="{
  67. 'padding-left': $u.addUnit(gutter / 2),
  68. 'padding-right': $u.addUnit(gutter / 2)
  69. }"
  70. :size="size"
  71. ></u-icon>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. </template>
  77. <script>
  78. import props from './props.js';
  79. // #ifdef APP-NVUE
  80. const dom = weex.requireModule("dom");
  81. // #endif
  82. /**
  83. * rate 评分
  84. * @description 该组件一般用于满意度调查,星型评分的场景
  85. * @tutorial https://www.uviewui.com/components/rate.html
  86. * @property {String | Number} value 用于v-model双向绑定选中的星星数量 (默认 1 )
  87. * @property {String | Number} count 最多可选的星星数量 (默认 5 )
  88. * @property {Boolean} disabled 是否禁止用户操作 (默认 false )
  89. * @property {Boolean} readonly 是否只读 (默认 false )
  90. * @property {String | Number} size 星星的大小,单位px (默认 18 )
  91. * @property {String} inactiveColor 未选中星星的颜色 (默认 '#b2b2b2' )
  92. * @property {String} activeColor 选中的星星颜色 (默认 '#FA3534' )
  93. * @property {String | Number} gutter 星星之间的距离 (默认 4 )
  94. * @property {String | Number} minCount 最少选中星星的个数 (默认 1 )
  95. * @property {Boolean} allowHalf 是否允许半星选择 (默认 false )
  96. * @property {String} activeIcon 选中时的图标名,只能为uView的内置图标 (默认 'star-fill' )
  97. * @property {String} inactiveIcon 未选中时的图标名,只能为uView的内置图标 (默认 'star' )
  98. * @property {Boolean} touchable 是否可以通过滑动手势选择评分 (默认 'true' )
  99. * @property {Object} customStyle 组件的样式,对象形式
  100. * @event {Function} change 选中的星星发生变化时触发
  101. * @example <u-rate :count="count" :value="2"></u-rate>
  102. */
  103. export default {
  104. name: "u-rate",
  105. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  106. data() {
  107. return {
  108. // 生成一个唯一id,否则一个页面多个评分组件,会造成冲突
  109. elId: uni.$u.guid(),
  110. elClass: uni.$u.guid(),
  111. rateBoxLeft: 0, // 评分盒子左边到屏幕左边的距离,用于滑动选择时计算距离
  112. activeIndex: this.value,
  113. rateWidth: 0, // 每个星星的宽度
  114. // 标识是否正在滑动,由于iOS事件上touch比click先触发,导致快速滑动结束后,接着触发click,导致事件混乱而出错
  115. moving: false,
  116. };
  117. },
  118. watch: {
  119. value(val) {
  120. this.activeIndex = val;
  121. },
  122. activeIndex: 'emitEvent'
  123. },
  124. methods: {
  125. init() {
  126. uni.$u.sleep().then(() => {
  127. this.getRateItemRect();
  128. this.getRateIconWrapRect();
  129. })
  130. },
  131. // 获取评分组件盒子的布局信息
  132. async getRateItemRect() {
  133. await uni.$u.sleep();
  134. // uView封装的获取节点的方法,详见文档
  135. // #ifndef APP-NVUE
  136. this.$uGetRect("#" + this.elId).then((res) => {
  137. this.rateBoxLeft = res.left;
  138. });
  139. // #endif
  140. // #ifdef APP-NVUE
  141. dom.getComponentRect(this.$refs["u-rate"], (res) => {
  142. this.rateBoxLeft = res.size.left;
  143. });
  144. // #endif
  145. },
  146. // 获取单个星星的尺寸
  147. getRateIconWrapRect() {
  148. // uView封装的获取节点的方法,详见文档
  149. // #ifndef APP-NVUE
  150. this.$uGetRect("." + this.elClass).then((res) => {
  151. this.rateWidth = res.width;
  152. });
  153. // #endif
  154. // #ifdef APP-NVUE
  155. dom.getComponentRect(
  156. this.$refs["u-rate__content__item__icon-wrap"][0],
  157. (res) => {
  158. this.rateWidth = res.size.width;
  159. }
  160. );
  161. // #endif
  162. },
  163. // 手指滑动
  164. touchMove(e) {
  165. // 如果禁止通过手动滑动选择,返回
  166. if (!this.touchable) {
  167. return;
  168. }
  169. this.preventEvent(e);
  170. const x = e.changedTouches[0].pageX;
  171. this.getActiveIndex(x);
  172. },
  173. // 停止滑动
  174. touchEnd(e) {
  175. // 如果禁止通过手动滑动选择,返回
  176. if (!this.touchable) {
  177. return;
  178. }
  179. this.preventEvent(e);
  180. const x = e.changedTouches[0].pageX;
  181. this.getActiveIndex(x);
  182. },
  183. // 通过点击,直接选中
  184. clickHandler(e, index) {
  185. // ios上,moving状态取消事件触发
  186. if (uni.$u.os() === "ios" && this.moving) {
  187. return;
  188. }
  189. this.preventEvent(e);
  190. let x = 0;
  191. // 点击时,在nvue上,无法获得点击的坐标,所以无法实现点击半星选择
  192. // #ifndef APP-NVUE
  193. x = e.changedTouches[0].pageX;
  194. // #endif
  195. // #ifdef APP-NVUE
  196. // nvue下,无法通过点击获得坐标信息,这里通过元素的位置尺寸值模拟坐标
  197. x = index * this.rateWidth + this.rateBoxLeft;
  198. // #endif
  199. this.getActiveIndex(x,true);
  200. },
  201. // 发出事件
  202. emitEvent() {
  203. // 发出change事件
  204. this.$emit("change", this.activeIndex);
  205. // 同时修改双向绑定的value的值
  206. this.$emit("input", this.activeIndex);
  207. },
  208. // 获取当前激活的评分图标
  209. getActiveIndex(x,isClick = false) {
  210. if (this.disabled || this.readonly) {
  211. return;
  212. }
  213. // 判断当前操作的点的x坐标值,是否在允许的边界范围内
  214. const allRateWidth = this.rateWidth * this.count + this.rateBoxLeft;
  215. // 如果小于第一个图标的左边界,设置为最小值,如果大于所有图标的宽度,则设置为最大值
  216. x = uni.$u.range(this.rateBoxLeft, allRateWidth, x) - this.rateBoxLeft
  217. // 滑动点相对于评分盒子左边的距离
  218. const distance = x;
  219. // 滑动的距离,相当于多少颗星星
  220. let index;
  221. // 判断是否允许半星
  222. if (this.allowHalf) {
  223. index = Math.floor(distance / this.rateWidth);
  224. // 取余,判断小数的区间范围
  225. const decimal = distance % this.rateWidth;
  226. if (decimal <= this.rateWidth / 2 && decimal > 0) {
  227. index += 0.5;
  228. } else if (decimal > this.rateWidth / 2) {
  229. index++;
  230. }
  231. } else {
  232. index = Math.floor(distance / this.rateWidth);
  233. // 取余,判断小数的区间范围
  234. const decimal = distance % this.rateWidth;
  235. // 非半星时,只有超过了图标的一半距离,才认为是选择了这颗星
  236. if (isClick){
  237. if (decimal > 0) index++;
  238. } else {
  239. if (decimal > this.rateWidth / 2) index++;
  240. }
  241. }
  242. this.activeIndex = Math.min(index, this.count);
  243. // 对最少颗星星的限制
  244. if (this.activeIndex < this.minCount) {
  245. this.activeIndex = this.minCount;
  246. }
  247. // 设置延时为了让click事件在touchmove之前触发
  248. setTimeout(() => {
  249. this.moving = true;
  250. }, 10);
  251. // 一定时间后,取消标识为移动中状态,是为了让click事件无效
  252. setTimeout(() => {
  253. this.moving = false;
  254. }, 10);
  255. },
  256. },
  257. mounted() {
  258. this.init();
  259. },
  260. };
  261. </script>
  262. <style lang="scss" scoped>
  263. @import "../../libs/css/components.scss";
  264. $u-rate-margin: 0 !default;
  265. $u-rate-padding: 0 !default;
  266. $u-rate-item-icon-wrap-half-top: 0 !default;
  267. $u-rate-item-icon-wrap-half-left: 0 !default;
  268. .u-rate {
  269. @include flex;
  270. align-items: center;
  271. margin: $u-rate-margin;
  272. padding: $u-rate-padding;
  273. /* #ifndef APP-NVUE */
  274. touch-action: none;
  275. /* #endif */
  276. &__content {
  277. @include flex;
  278. &__item {
  279. position: relative;
  280. &__icon-wrap {
  281. &--half {
  282. position: absolute;
  283. overflow: hidden;
  284. top: $u-rate-item-icon-wrap-half-top;
  285. left: $u-rate-item-icon-wrap-half-left;
  286. }
  287. }
  288. }
  289. }
  290. }
  291. .u-icon {
  292. /* #ifndef APP-NVUE */
  293. box-sizing: border-box;
  294. /* #endif */
  295. }
  296. </style>