index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <uni-shadow-root class="weapp-lib-rate-index"><view :class="(utils.bem('rate'))+' custom-class'" @touchmove="onTouchMove">
  3. <view v-for="(item,index) in (innerCountArray)" :key="item.index" :class="utils.bem('rate__item')" :style="style({ paddingRight: index !== count - 1 ? utils.addUnit(gutter) : null })">
  4. <van-icon :name="index + 1 <= innerValue ? icon : voidIcon" :class="utils.bem('rate__icon', [{ disabled, full: index + 1 <= innerValue }])" :style="style({ fontSize: utils.addUnit(size) })" custom-class="icon-class" :data-score="index" :color="disabled ? disabledColor : index + 1 <= innerValue ? color : voidColor" @click="onSelect"></van-icon>
  5. <van-icon v-if="allowHalf" :name="index + 0.5 <= innerValue ? icon : voidIcon" :class="utils.bem('rate__icon', ['half', { disabled, full: index + 0.5 <= innerValue }])" :style="style({ fontSize: utils.addUnit(size) })" custom-class="icon-class" :data-score="index - 0.5" :color="disabled ? disabledColor : index + 0.5 <= innerValue ? color : voidColor" @click="onSelect"></van-icon>
  6. </view>
  7. </view></uni-shadow-root>
  8. </template>
  9. <wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="../wxs/style.wxs" module="style"></wxs>
  10. <script>
  11. import VanIcon from '../icon/index.vue'
  12. global['__wxVueOptions'] = {components:{'van-icon': VanIcon}}
  13. global['__wxRoute'] = 'weapp/lib/rate/index'
  14. "use strict";
  15. var __assign = (this && this.__assign) || function () {
  16. __assign = Object.assign || function(t) {
  17. for (var s, i = 1, n = arguments.length; i < n; i++) {
  18. s = arguments[i];
  19. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
  20. t[p] = s[p];
  21. }
  22. return t;
  23. };
  24. return __assign.apply(this, arguments);
  25. };
  26. Object.defineProperty(exports, "__esModule", { value: true });
  27. var utils_1 = require("../common/utils");
  28. var component_1 = require("../common/component");
  29. var version_1 = require("../common/version");
  30. (0, component_1.VantComponent)({
  31. field: true,
  32. classes: ['icon-class'],
  33. props: {
  34. value: {
  35. type: Number,
  36. observer: function (value) {
  37. if (value !== this.data.innerValue) {
  38. this.setData({ innerValue: value });
  39. }
  40. },
  41. },
  42. readonly: Boolean,
  43. disabled: Boolean,
  44. allowHalf: Boolean,
  45. size: null,
  46. icon: {
  47. type: String,
  48. value: 'star',
  49. },
  50. voidIcon: {
  51. type: String,
  52. value: 'star-o',
  53. },
  54. color: String,
  55. voidColor: String,
  56. disabledColor: String,
  57. count: {
  58. type: Number,
  59. value: 5,
  60. observer: function (value) {
  61. this.setData({ innerCountArray: Array.from({ length: value }) });
  62. },
  63. },
  64. gutter: null,
  65. touchable: {
  66. type: Boolean,
  67. value: true,
  68. },
  69. },
  70. data: {
  71. innerValue: 0,
  72. innerCountArray: Array.from({ length: 5 }),
  73. },
  74. methods: {
  75. onSelect: function (event) {
  76. var _this = this;
  77. var data = this.data;
  78. var score = event.currentTarget.dataset.score;
  79. if (!data.disabled && !data.readonly) {
  80. this.setData({ innerValue: score + 1 });
  81. if ((0, version_1.canIUseModel)()) {
  82. this.setData({ value: score + 1 });
  83. }
  84. wx.nextTick(function () {
  85. _this.$emit('input', score + 1);
  86. _this.$emit('change', score + 1);
  87. });
  88. }
  89. },
  90. onTouchMove: function (event) {
  91. var _this = this;
  92. var touchable = this.data.touchable;
  93. if (!touchable)
  94. return;
  95. var clientX = event.touches[0].clientX;
  96. (0, utils_1.getAllRect)(this, '.van-rate__icon').then(function (list) {
  97. var target = list
  98. .sort(function (cur, next) { return cur.dataset.score - next.dataset.score; })
  99. .find(function (item) { return clientX >= item.left && clientX <= item.right; });
  100. if (target != null) {
  101. _this.onSelect(__assign(__assign({}, event), { currentTarget: target }));
  102. }
  103. });
  104. },
  105. },
  106. });
  107. export default global['__wxComponents']['weapp/lib/rate/index']
  108. </script>
  109. <style platform="mp-weixin">
  110. @import '../common/index.css';.van-rate{display:inline-flex;-webkit-user-select:none;user-select:none}.van-rate__item{padding:0 var(--rate-horizontal-padding,2px);position:relative}.van-rate__item:not(:last-child){padding-right:var(--rate-icon-gutter,4px)}.van-rate__icon{color:var(--rate-icon-void-color,#c8c9cc);display:block;font-size:var(--rate-icon-size,20px);height:100%}.van-rate__icon--half{left:var(--rate-horizontal-padding,2px);overflow:hidden;position:absolute;top:0;width:.5em}.van-rate__icon--full,.van-rate__icon--half{color:var(--rate-icon-full-color,#ee0a24)}.van-rate__icon--disabled{color:var(--rate-icon-disabled-color,#c8c9cc)}
  111. </style>