index.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  2. /* eslint-disable prefer-spread */
  3. import { use } from '../utils';
  4. import { emit, inherit } from '../utils/functional';
  5. import { preventDefault } from '../utils/event';
  6. import Icon from '../icon'; // Types
  7. var _use = use('rate'),
  8. sfc = _use[0],
  9. bem = _use[1];
  10. function getRateStatus(value, index, allowHalf) {
  11. if (value >= index) {
  12. return 'full';
  13. }
  14. if (value + 0.5 >= index && allowHalf) {
  15. return 'half';
  16. }
  17. return 'void';
  18. }
  19. function Rate(h, props, slots, ctx) {
  20. var icon = props.icon,
  21. size = props.size,
  22. color = props.color,
  23. voidIcon = props.voidIcon,
  24. readonly = props.readonly,
  25. disabled = props.disabled,
  26. voidColor = props.voidColor,
  27. disabledColor = props.disabledColor;
  28. var list = [];
  29. for (var i = 1; i <= props.count; i++) {
  30. list.push(getRateStatus(props.value, i, props.allowHalf));
  31. }
  32. function onSelect(index) {
  33. if (!disabled && !readonly) {
  34. emit(ctx, 'input', index);
  35. emit(ctx, 'change', index);
  36. }
  37. }
  38. function onTouchMove(event) {
  39. if (readonly || disabled || !document.elementFromPoint) {
  40. return;
  41. }
  42. preventDefault(event);
  43. var _event$touches$ = event.touches[0],
  44. clientX = _event$touches$.clientX,
  45. clientY = _event$touches$.clientY;
  46. var target = document.elementFromPoint(clientX, clientY);
  47. if (target && target.dataset) {
  48. var score = target.dataset.score;
  49. /* istanbul ignore else */
  50. if (score) {
  51. onSelect(+score);
  52. }
  53. }
  54. }
  55. function renderStar(status, index) {
  56. var isFull = status === 'full';
  57. var isVoid = status === 'void';
  58. return h("div", {
  59. "key": index,
  60. "class": bem('item')
  61. }, [h(Icon, {
  62. "attrs": {
  63. "name": isFull ? icon : voidIcon,
  64. "size": size + "px",
  65. "data-score": index + 1,
  66. "color": disabled ? disabledColor : isFull ? color : voidColor
  67. },
  68. "class": bem('icon'),
  69. "on": {
  70. "click": function click() {
  71. onSelect(index + 1);
  72. }
  73. }
  74. }), props.allowHalf && h(Icon, {
  75. "attrs": {
  76. "name": isVoid ? voidIcon : icon,
  77. "size": size + "px",
  78. "data-score": index + 0.5,
  79. "color": disabled ? disabledColor : isVoid ? voidColor : color
  80. },
  81. "class": bem('icon', 'half'),
  82. "on": {
  83. "click": function click() {
  84. onSelect(index + 0.5);
  85. }
  86. }
  87. })]);
  88. }
  89. return h("div", _mergeJSXProps([{
  90. "class": bem()
  91. }, inherit(ctx), {
  92. "on": {
  93. "touchmove": onTouchMove
  94. }
  95. }]), [list.map(function (status, index) {
  96. return renderStar(status, index);
  97. })]);
  98. }
  99. Rate.props = {
  100. value: Number,
  101. readonly: Boolean,
  102. disabled: Boolean,
  103. allowHalf: Boolean,
  104. size: {
  105. type: Number,
  106. "default": 20
  107. },
  108. icon: {
  109. type: String,
  110. "default": 'star'
  111. },
  112. voidIcon: {
  113. type: String,
  114. "default": 'star-o'
  115. },
  116. color: {
  117. type: String,
  118. "default": '#ffd21e'
  119. },
  120. voidColor: {
  121. type: String,
  122. "default": '#c7c7c7'
  123. },
  124. disabledColor: {
  125. type: String,
  126. "default": '#bdbdbd'
  127. },
  128. count: {
  129. type: Number,
  130. "default": 5
  131. }
  132. };
  133. export default sfc(Rate);