index.js 2.0KB

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