index.js 2.0 KB

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