index.js 2.1KB

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