From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 30 Nov 2023 16:36:45 +0800
Subject: [PATCH] fix:是否修改
---
uni_modules/uview-ui/components/u-rate/u-rate.vue | 306 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 306 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-rate/u-rate.vue b/uni_modules/uview-ui/components/u-rate/u-rate.vue
new file mode 100644
index 0000000..1aa5dd0
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-rate/u-rate.vue
@@ -0,0 +1,306 @@
+<template>
+ <view
+ class="u-rate"
+ :id="elId"
+ ref="u-rate"
+ :style="[$u.addStyle(customStyle)]"
+ >
+ <view
+ class="u-rate__content"
+ @touchmove.stop="touchMove"
+ @touchend.stop="touchEnd"
+ >
+ <view
+ class="u-rate__content__item"
+ v-for="(item, index) in Number(count)"
+ :key="index"
+ :class="[elClass]"
+ >
+ <view
+ class="u-rate__content__item__icon-wrap"
+ ref="u-rate__content__item__icon-wrap"
+ @tap.stop="clickHandler($event, index + 1)"
+ >
+ <u-icon
+ :name="
+ Math.floor(activeIndex) > index
+ ? activeIcon
+ : inactiveIcon
+ "
+ :color="
+ disabled
+ ? '#c8c9cc'
+ : Math.floor(activeIndex) > index
+ ? activeColor
+ : inactiveColor
+ "
+ :custom-style="{
+ 'padding-left': $u.addUnit(gutter / 2),
+ 'padding-right': $u.addUnit(gutter / 2)
+ }"
+ :size="size"
+ ></u-icon>
+ </view>
+ <view
+ v-if="allowHalf"
+ @tap.stop="clickHandler($event, index + 1)"
+ class="u-rate__content__item__icon-wrap u-rate__content__item__icon-wrap--half"
+ :style="[{
+ width: $u.addUnit(rateWidth / 2),
+ }]"
+ ref="u-rate__content__item__icon-wrap"
+ >
+ <u-icon
+ :name="
+ Math.ceil(activeIndex) > index
+ ? activeIcon
+ : inactiveIcon
+ "
+ :color="
+ disabled
+ ? '#c8c9cc'
+ : Math.ceil(activeIndex) > index
+ ? activeColor
+ : inactiveColor
+ "
+ :custom-style="{
+ 'padding-left': $u.addUnit(gutter / 2),
+ 'padding-right': $u.addUnit(gutter / 2)
+ }"
+ :size="size"
+ ></u-icon>
+ </view>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+
+ // #ifdef APP-NVUE
+ const dom = weex.requireModule("dom");
+ // #endif
+ /**
+ * rate ������
+ * @description ������������������������������������������������������������
+ * @tutorial https://www.uviewui.com/components/rate.html
+ * @property {String | Number} value ������v-model��������������������������������� (������ 1 )
+ * @property {String | Number} count ��������������������������� ��������� 5 ���
+ * @property {Boolean} disabled ������������������������ ��������� false ���
+ * @property {Boolean} readonly ������������ ��������� false ���
+ * @property {String | Number} size ������������������������px ��������� 18 ���
+ * @property {String} inactiveColor ������������������������ ��������� '#b2b2b2' ���
+ * @property {String} activeColor ��������������������� ��������� '#FA3534' ���
+ * @property {String | Number} gutter ��������������������� ��������� 4 ���
+ * @property {String | Number} minCount ��������������������������� ��������� 1 ���
+ * @property {Boolean} allowHalf ������������������������ ��������� false ���
+ * @property {String} activeIcon ���������������������������������uView��������������� ��������� 'star-fill' ���
+ * @property {String} inactiveIcon ������������������������������������uView��������������� ��������� 'star' ���
+ * @property {Boolean} touchable ������������������������������������������ ��������� 'true' ���
+ * @property {Object} customStyle ������������������������������
+ * @event {Function} change ������������������������������������
+ * @example <u-rate :count="count" :value="2"></u-rate>
+ */
+ export default {
+ name: "u-rate",
+ mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+ data() {
+ return {
+ // ������������������id���������������������������������������������������������
+ elId: uni.$u.guid(),
+ elClass: uni.$u.guid(),
+ rateBoxLeft: 0, // ������������������������������������������������������������������������������
+ activeIndex: this.value,
+ rateWidth: 0, // ���������������������
+ // ���������������������������������iOS���������touch���click������������������������������������������������������click������������������������������
+ moving: false,
+ };
+ },
+ watch: {
+ value(val) {
+ this.activeIndex = val;
+ },
+ activeIndex: 'emitEvent'
+ },
+ methods: {
+ init() {
+ uni.$u.sleep().then(() => {
+ this.getRateItemRect();
+ this.getRateIconWrapRect();
+ })
+ },
+ // ���������������������������������������
+ async getRateItemRect() {
+ await uni.$u.sleep();
+ // uView���������������������������������������������
+ // #ifndef APP-NVUE
+ this.$uGetRect("#" + this.elId).then((res) => {
+ this.rateBoxLeft = res.left;
+ });
+ // #endif
+ // #ifdef APP-NVUE
+ dom.getComponentRect(this.$refs["u-rate"], (res) => {
+ this.rateBoxLeft = res.size.left;
+ });
+ // #endif
+ },
+ // ���������������������������
+ getRateIconWrapRect() {
+ // uView���������������������������������������������
+ // #ifndef APP-NVUE
+ this.$uGetRect("." + this.elClass).then((res) => {
+ this.rateWidth = res.width;
+ });
+ // #endif
+ // #ifdef APP-NVUE
+ dom.getComponentRect(
+ this.$refs["u-rate__content__item__icon-wrap"][0],
+ (res) => {
+ this.rateWidth = res.size.width;
+ }
+ );
+ // #endif
+ },
+ // ������������
+ touchMove(e) {
+ // ���������������������������������������������
+ if (!this.touchable) {
+ return;
+ }
+ this.preventEvent(e);
+ const x = e.changedTouches[0].pageX;
+ this.getActiveIndex(x);
+ },
+ // ������������
+ touchEnd(e) {
+ // ���������������������������������������������
+ if (!this.touchable) {
+ return;
+ }
+ this.preventEvent(e);
+ const x = e.changedTouches[0].pageX;
+ this.getActiveIndex(x);
+ },
+ // ���������������������������
+ clickHandler(e, index) {
+ // ios������moving������������������������
+ if (uni.$u.os() === "ios" && this.moving) {
+ return;
+ }
+ this.preventEvent(e);
+ let x = 0;
+ // ���������������nvue������������������������������������������������������������������������
+ // #ifndef APP-NVUE
+ x = e.changedTouches[0].pageX;
+ // #endif
+ // #ifdef APP-NVUE
+ // nvue���������������������������������������������������������������������������������������������
+ x = index * this.rateWidth + this.rateBoxLeft;
+ // #endif
+ this.getActiveIndex(x,true);
+ },
+ // ������������
+ emitEvent() {
+ // ������change������
+ this.$emit("change", this.activeIndex);
+ // ���������������������������value������
+ this.$emit("input", this.activeIndex);
+ },
+ // ���������������������������������
+ getActiveIndex(x,isClick = false) {
+ if (this.disabled || this.readonly) {
+ return;
+ }
+ // ���������������������������x���������������������������������������������
+ const allRateWidth = this.rateWidth * this.count + this.rateBoxLeft;
+ // ������������������������������������������������������������������������������������������������������������������������
+ x = uni.$u.range(this.rateBoxLeft, allRateWidth, x) - this.rateBoxLeft
+ // ���������������������������������������������
+ const distance = x;
+ // ������������������������������������������
+ let index;
+ // ������������������������
+ if (this.allowHalf) {
+ index = Math.floor(distance / this.rateWidth);
+ // ������������������������������������
+ const decimal = distance % this.rateWidth;
+ if (decimal <= this.rateWidth / 2 && decimal > 0) {
+ index += 0.5;
+ } else if (decimal > this.rateWidth / 2) {
+ index++;
+ }
+ } else {
+ index = Math.floor(distance / this.rateWidth);
+ // ������������������������������������
+ const decimal = distance % this.rateWidth;
+ // ������������������������������������������������������������������������������������
+ if (isClick){
+ if (decimal > 0) index++;
+ } else {
+ if (decimal > this.rateWidth / 2) index++;
+ }
+
+ }
+ this.activeIndex = Math.min(index, this.count);
+ // ���������������������������
+ if (this.activeIndex < this.minCount) {
+ this.activeIndex = this.minCount;
+ }
+
+ // ���������������������click���������touchmove������������
+ setTimeout(() => {
+ this.moving = true;
+ }, 10);
+ // ���������������������������������������������������������������click������������
+ setTimeout(() => {
+ this.moving = false;
+ }, 10);
+ },
+ },
+ mounted() {
+ this.init();
+ },
+ };
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+$u-rate-margin: 0 !default;
+$u-rate-padding: 0 !default;
+$u-rate-item-icon-wrap-half-top: 0 !default;
+$u-rate-item-icon-wrap-half-left: 0 !default;
+
+.u-rate {
+ @include flex;
+ align-items: center;
+ margin: $u-rate-margin;
+ padding: $u-rate-padding;
+ /* #ifndef APP-NVUE */
+ touch-action: none;
+ /* #endif */
+
+ &__content {
+ @include flex;
+
+ &__item {
+ position: relative;
+
+ &__icon-wrap {
+ &--half {
+ position: absolute;
+ overflow: hidden;
+ top: $u-rate-item-icon-wrap-half-top;
+ left: $u-rate-item-icon-wrap-half-left;
+ }
+ }
+ }
+ }
+}
+
+.u-icon {
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ /* #endif */
+}
+</style>
--
Gitblit v1.8.0