index.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import { getAllRect } from '../common/utils';
  2. import { VantComponent } from '../common/component';
  3. import { canIUseModel } from '../common/version';
  4. VantComponent({
  5. field: true,
  6. classes: ['icon-class'],
  7. props: {
  8. value: {
  9. type: Number,
  10. observer(value) {
  11. if (value !== this.data.innerValue) {
  12. this.setData({ innerValue: value });
  13. }
  14. },
  15. },
  16. readonly: Boolean,
  17. disabled: Boolean,
  18. allowHalf: Boolean,
  19. size: null,
  20. icon: {
  21. type: String,
  22. value: 'star',
  23. },
  24. voidIcon: {
  25. type: String,
  26. value: 'star-o',
  27. },
  28. color: {
  29. type: String,
  30. value: '#ffd21e',
  31. },
  32. voidColor: {
  33. type: String,
  34. value: '#c7c7c7',
  35. },
  36. disabledColor: {
  37. type: String,
  38. value: '#bdbdbd',
  39. },
  40. count: {
  41. type: Number,
  42. value: 5,
  43. observer(value) {
  44. this.setData({ innerCountArray: Array.from({ length: value }) });
  45. },
  46. },
  47. gutter: null,
  48. touchable: {
  49. type: Boolean,
  50. value: true,
  51. },
  52. },
  53. data: {
  54. innerValue: 0,
  55. innerCountArray: Array.from({ length: 5 }),
  56. },
  57. methods: {
  58. onSelect(event) {
  59. const { data } = this;
  60. const { score } = event.currentTarget.dataset;
  61. if (!data.disabled && !data.readonly) {
  62. this.setData({ innerValue: score + 1 });
  63. if (canIUseModel()) {
  64. this.setData({ value: score + 1 });
  65. }
  66. wx.nextTick(() => {
  67. this.$emit('input', score + 1);
  68. this.$emit('change', score + 1);
  69. });
  70. }
  71. },
  72. onTouchMove(event) {
  73. const { touchable } = this.data;
  74. if (!touchable) return;
  75. const { clientX } = event.touches[0];
  76. getAllRect(this, '.van-rate__icon').then((list) => {
  77. const target = list
  78. .sort((item) => item.right - item.left)
  79. .find((item) => clientX >= item.left && clientX <= item.right);
  80. if (target != null) {
  81. this.onSelect(
  82. Object.assign(Object.assign({}, event), { currentTarget: target })
  83. );
  84. }
  85. });
  86. },
  87. },
  88. });