index.js 3.5 KB

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