dykj-outsource-12123/uni_modules/uview-plus/components/u-rate/u-rate.vue
2024-06-28 14:18:30 +08:00

329 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view
class="u-rate"
:id="elId"
ref="u-rate"
:style="[addStyle(customStyle)]"
>
<view
class="u-rate__content"
@touchmove.stop="touchMove"
@touchend.stop="touchEnd"
>
<view
class="u-rate__content__item cursor-pointer"
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: `0 ${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: 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: `0 ${addUnit(gutter / 2)}`
}"
:size="size"
></u-icon>
</view>
</view>
</view>
</view>
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import { addUnit, addStyle, guid, sleep, range, os } from '../../libs/function/index';
// #ifdef APP-NVUE
const dom = weex.requireModule("dom");
// #endif
/**
* rate 评分
* @description 该组件一般用于满意度调查,星型评分的场景
* @tutorial https://ijry.github.io/uview-plus/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: [mpMixin, mixin, props],
data() {
return {
// 生成一个唯一id否则一个页面多个评分组件会造成冲突
elId: guid(),
elClass: guid(),
rateBoxLeft: 0, // 评分盒子左边到屏幕左边的距离,用于滑动选择时计算距离
// #ifdef VUE3
activeIndex: this.modelValue,
// #endif
// #ifdef VUE2
activeIndex: this.value,
// #endif
rateWidth: 0, // 每个星星的宽度
// 标识是否正在滑动由于iOS事件上touch比click先触发导致快速滑动结束后接着触发click导致事件混乱而出错
moving: false,
};
},
watch: {
// #ifdef VUE3
modelValue(val) {
this.activeIndex = val;
},
// #endif
// #ifdef VUE2
value(val) {
this.activeIndex = val;
},
// #endif
activeIndex: 'emitEvent'
},
// #ifdef VUE3
emits: ['update:modelValue', 'change'],
// #endif
methods: {
addStyle,
addUnit,
init() {
sleep().then(() => {
this.getRateItemRect();
this.getRateIconWrapRect();
})
},
// 获取评分组件盒子的布局信息
async getRateItemRect() {
await 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 (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);
// 同时修改双向绑定的值
// #ifdef VUE3
this.$emit("update:modelValue", this.activeIndex);
// #endif
// #ifdef VUE2
this.$emit("input", this.activeIndex);
// #endif
},
// 获取当前激活的评分图标
getActiveIndex(x,isClick = false) {
if (this.disabled || this.readonly) {
return;
}
// 判断当前操作的点的x坐标值是否在允许的边界范围内
const allRateWidth = this.rateWidth * this.count + this.rateBoxLeft;
// 如果小于第一个图标的左边界,设置为最小值,如果大于所有图标的宽度,则设置为最大值
x = 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>