index.js 2.5 KB

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