index.js 2.2 KB

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