uni-rate.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "UniRate",
  5. props: {
  6. isFill: {
  7. // 星星的类型,是否镂空
  8. type: [Boolean, String],
  9. default: true
  10. },
  11. color: {
  12. // 星星未选中的颜色
  13. type: String,
  14. default: "#ececec"
  15. },
  16. activeColor: {
  17. // 星星选中状态颜色
  18. type: String,
  19. default: "#ffca3e"
  20. },
  21. disabledColor: {
  22. // 星星禁用状态颜色
  23. type: String,
  24. default: "#c0c0c0"
  25. },
  26. size: {
  27. // 星星的大小
  28. type: [Number, String],
  29. default: 24
  30. },
  31. value: {
  32. // 当前评分
  33. type: [Number, String],
  34. default: 0
  35. },
  36. modelValue: {
  37. // 当前评分
  38. type: [Number, String],
  39. default: 0
  40. },
  41. max: {
  42. // 最大评分
  43. type: [Number, String],
  44. default: 5
  45. },
  46. margin: {
  47. // 星星的间距
  48. type: [Number, String],
  49. default: 0
  50. },
  51. disabled: {
  52. // 是否可点击
  53. type: [Boolean, String],
  54. default: false
  55. },
  56. readonly: {
  57. // 是否只读
  58. type: [Boolean, String],
  59. default: false
  60. },
  61. allowHalf: {
  62. // 是否显示半星
  63. type: [Boolean, String],
  64. default: false
  65. },
  66. touchable: {
  67. // 是否支持滑动手势
  68. type: [Boolean, String],
  69. default: true
  70. }
  71. },
  72. data() {
  73. return {
  74. valueSync: "",
  75. userMouseFristMove: true,
  76. userRated: false,
  77. userLastRate: 1
  78. };
  79. },
  80. watch: {
  81. value(newVal) {
  82. this.valueSync = Number(newVal);
  83. },
  84. modelValue(newVal) {
  85. this.valueSync = Number(newVal);
  86. }
  87. },
  88. computed: {
  89. stars() {
  90. const value = this.valueSync ? this.valueSync : 0;
  91. const starList = [];
  92. const floorValue = Math.floor(value);
  93. const ceilValue = Math.ceil(value);
  94. for (let i = 0; i < this.max; i++) {
  95. if (floorValue > i) {
  96. starList.push({
  97. activeWitch: "100%"
  98. });
  99. } else if (ceilValue - 1 === i) {
  100. starList.push({
  101. activeWitch: (value - floorValue) * 100 + "%"
  102. });
  103. } else {
  104. starList.push({
  105. activeWitch: "0"
  106. });
  107. }
  108. }
  109. return starList;
  110. },
  111. marginNumber() {
  112. return Number(this.margin);
  113. }
  114. },
  115. created() {
  116. this.valueSync = Number(this.value || this.modelValue);
  117. this._rateBoxLeft = 0;
  118. this._oldValue = null;
  119. },
  120. mounted() {
  121. setTimeout(() => {
  122. this._getSize();
  123. }, 100);
  124. },
  125. methods: {
  126. touchstart(e) {
  127. if (this.readonly || this.disabled)
  128. return;
  129. const {
  130. clientX,
  131. screenX
  132. } = e.changedTouches[0];
  133. this._getRateCount(clientX || screenX);
  134. },
  135. touchmove(e) {
  136. if (this.readonly || this.disabled || !this.touchable)
  137. return;
  138. const {
  139. clientX,
  140. screenX
  141. } = e.changedTouches[0];
  142. this._getRateCount(clientX || screenX);
  143. },
  144. /**
  145. * 兼容 PC @tian
  146. */
  147. mousedown(e) {
  148. },
  149. mousemove(e) {
  150. },
  151. mouseleave(e) {
  152. },
  153. /**
  154. * 获取星星个数
  155. */
  156. _getRateCount(clientX) {
  157. this._getSize();
  158. const size = Number(this.size);
  159. if (isNaN(size)) {
  160. return new Error("size 属性只能设置为数字");
  161. }
  162. const rateMoveRange = clientX - this._rateBoxLeft;
  163. let index = parseInt(rateMoveRange / (size + this.marginNumber));
  164. index = index < 0 ? 0 : index;
  165. index = index > this.max ? this.max : index;
  166. const range = parseInt(rateMoveRange - (size + this.marginNumber) * index);
  167. let value = 0;
  168. if (this._oldValue === index && !this.PC)
  169. return;
  170. this._oldValue = index;
  171. if (this.allowHalf) {
  172. if (range > size / 2) {
  173. value = index + 1;
  174. } else {
  175. value = index + 0.5;
  176. }
  177. } else {
  178. value = index + 1;
  179. }
  180. value = Math.max(0.5, Math.min(value, this.max));
  181. this.valueSync = value;
  182. this._onChange();
  183. },
  184. /**
  185. * 触发动态修改
  186. */
  187. _onChange() {
  188. this.$emit("input", this.valueSync);
  189. this.$emit("update:modelValue", this.valueSync);
  190. this.$emit("change", {
  191. value: this.valueSync
  192. });
  193. },
  194. /**
  195. * 获取星星距离屏幕左侧距离
  196. */
  197. _getSize() {
  198. common_vendor.index.createSelectorQuery().in(this).select(".uni-rate").boundingClientRect().exec((ret) => {
  199. if (ret) {
  200. this._rateBoxLeft = ret[0].left;
  201. }
  202. });
  203. }
  204. }
  205. };
  206. if (!Array) {
  207. const _easycom_uni_icons2 = common_vendor.resolveComponent("uni-icons");
  208. _easycom_uni_icons2();
  209. }
  210. const _easycom_uni_icons = () => "../../../uni-icons/components/uni-icons/uni-icons.js";
  211. if (!Math) {
  212. _easycom_uni_icons();
  213. }
  214. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  215. return {
  216. a: common_vendor.f($options.stars, (star, index, i0) => {
  217. return {
  218. a: "66d805e8-0-" + i0,
  219. b: "66d805e8-1-" + i0,
  220. c: star.activeWitch,
  221. d: index,
  222. e: common_vendor.o((...args) => $options.touchstart && $options.touchstart(...args), index),
  223. f: common_vendor.o((...args) => $options.touchmove && $options.touchmove(...args), index),
  224. g: common_vendor.o((...args) => $options.mousedown && $options.mousedown(...args), index),
  225. h: common_vendor.o((...args) => $options.mousemove && $options.mousemove(...args), index),
  226. i: common_vendor.o((...args) => $options.mouseleave && $options.mouseleave(...args), index)
  227. };
  228. }),
  229. b: common_vendor.p({
  230. color: $props.color,
  231. size: $props.size,
  232. type: $props.isFill ? "star-filled" : "star"
  233. }),
  234. c: common_vendor.p({
  235. color: $props.disabled ? $props.disabledColor : $props.activeColor,
  236. size: $props.size,
  237. type: "star-filled"
  238. }),
  239. d: $props.disabled ? 1 : "",
  240. e: $options.marginNumber + "px"
  241. };
  242. }
  243. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:/zx/mall-front-app/uni_modules/uni-rate/components/uni-rate/uni-rate.vue"]]);
  244. wx.createComponent(Component);