250 lines
8.3 KiB
Vue
250 lines
8.3 KiB
Vue
<template>
|
||
<view
|
||
class="u-rate"
|
||
:class="customClass"
|
||
:style="$u.toStyle(customStyle)"
|
||
:id="elId"
|
||
@touchmove.stop.prevent="touchMove"
|
||
>
|
||
<view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
|
||
<u-icon
|
||
:name="String(Number(activeIndex) > Number(index) ? elActiveIcon : inactiveIcon)"
|
||
@click="click(Number(index) + 1, $event)"
|
||
:color="String(Number(activeIndex) > Number(index) ? elActiveColor : inactiveColor)"
|
||
:custom-style="{
|
||
fontSize: size + 'rpx',
|
||
padding: `0 ${Number(gutter) / 2 + 'rpx'}`
|
||
}"
|
||
:custom-prefix="customPrefix"
|
||
:show-decimal-icon="showDecimalIcon(Number(index))"
|
||
:percent="decimal"
|
||
:inactive-color="inactiveColor"
|
||
></u-icon>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'u-rate',
|
||
options: {
|
||
addGlobalClass: true,
|
||
// #ifndef MP-TOUTIAO
|
||
virtualHost: true,
|
||
// #endif
|
||
styleIsolation: 'shared'
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
|
||
import { $u } from '../..';
|
||
import { RateProps } from './types';
|
||
|
||
/**
|
||
* rate 评分
|
||
* @description 该组件一般用于满意度调查，星型评分的场景
|
||
* @tutorial https://uviewpro.cn/zh/components/rate.html
|
||
* @property {String|Number} count 最多可选的星星数量（默认5）
|
||
* @property {String|Number} current 默认选中的星星数量（默认0）
|
||
* @property {Boolean} disabled 是否禁止用户操作（默认false）
|
||
* @property {String|Number} size 星星的大小，单位rpx（默认32）
|
||
* @property {String} inactive-color 未选中星星的颜色（默认var(--u-light-color)）
|
||
* @property {String} active-color 选中的星星颜色（默认var(--u-type-error)）
|
||
* @property {String} active-icon 选中时的图标名，只能为uView的内置图标（默认star-fill）
|
||
* @property {String} inactive-icon 未选中时的图标名，只能为uView的内置图标（默认star）
|
||
* @property {String|Number} gutter 星星之间的距离（默认10）
|
||
* @property {String|Number} min-count 最少选中星星的个数（默认0）
|
||
* @property {Boolean} allow-half 是否允许半星选择（默认false）
|
||
* @event {Function} change 选中的星星发生变化时触发
|
||
* @example <u-rate :count="count" :current="2"></u-rate>
|
||
*/
|
||
const props = defineProps(RateProps);
|
||
|
||
const emit = defineEmits(['update:modelValue', 'change']);
|
||
const instance = getCurrentInstance();
|
||
// 生成唯一id，防止页面多个评分组件冲突
|
||
const elId = ref($u.guid());
|
||
const elClass = ref($u.guid());
|
||
const starBoxLeft = ref(0); // 评分盒子左边到屏幕左边的距离
|
||
const starWidth = ref(0); // 每个星星的宽度
|
||
const starWidthArr = ref<number[]>([]); //每个星星最右边到组件盒子最左边的距离
|
||
// 当前激活的星星的index，如果存在value，优先使用value，因为它可以双向绑定(1.4.5新增)
|
||
const activeIndex = ref(Number(props.modelValue) !== -1 ? Number(props.modelValue) : Number(props.current));
|
||
|
||
// 监听props变化，保持activeIndex同步
|
||
watch(
|
||
() => props.current,
|
||
val => {
|
||
activeIndex.value = Number(val);
|
||
}
|
||
);
|
||
watch(
|
||
() => props.modelValue,
|
||
val => {
|
||
activeIndex.value = Number(val);
|
||
}
|
||
);
|
||
|
||
/**
|
||
* 计算当前星星的显示小数部分（半星）
|
||
*/
|
||
const decimal = computed((): number => {
|
||
if (props.disabled) {
|
||
// 只在允许半星时才返回小数部分，否则始终为0
|
||
if (props.allowHalf) {
|
||
// 计算当前激活星星的小数部分（如3.5星，返回50）
|
||
const val = Number(activeIndex.value);
|
||
return (val - Math.floor(val)) * 100;
|
||
}
|
||
return 0;
|
||
} else if (props.allowHalf) {
|
||
// 允许半星时，返回50，否则0
|
||
return 50;
|
||
}
|
||
return 0;
|
||
});
|
||
/**
|
||
* 计算当前激活的图标
|
||
*/
|
||
const elActiveIcon = computed(() => {
|
||
const len = props.icons.length;
|
||
// 此处规则类似于下方的elActiveColor参数，都是根据一定的规则，显示不同的图标
|
||
// 结果可能如此：icons参数传递了3个图标，当选中两个时，用第一个图标，4个时，用第二个图标
|
||
// 第三个时，用第三个图标作为激活的图标
|
||
if (len && len <= Number(props.count)) {
|
||
const step = Math.round(Number(activeIndex.value) / Math.round(Number(props.count) / len));
|
||
if (step < 1) return props.icons[0];
|
||
if (step > len) return props.icons[len - 1];
|
||
return props.icons[step - 1];
|
||
}
|
||
return props.activeIcon;
|
||
});
|
||
/**
|
||
* 计算当前激活的颜色
|
||
*/
|
||
const elActiveColor = computed(() => {
|
||
const len = props.colors.length;
|
||
// 如果有设置colors参数(此参数用于将图标分段，比如一共5颗星，colors传3个颜色值，那么根据一定的规则，2颗星可能为第一个颜色
|
||
// 4颗星为第二个颜色值，5颗星为第三个颜色值)
|
||
if (len && len <= Number(props.count)) {
|
||
const step = Math.round(Number(activeIndex.value) / Math.round(Number(props.count) / len));
|
||
if (step < 1) return props.colors[0];
|
||
if (step > len) return props.colors[len - 1];
|
||
return props.colors[step - 1];
|
||
}
|
||
return props.activeColor;
|
||
});
|
||
|
||
/**
|
||
* 获取评分组件盒子的布局信息
|
||
*/
|
||
function getElRectById() {
|
||
// uView封装的获取节点的方法，详见文档
|
||
$u.getRect('#' + elId.value, instance).then((res: any) => {
|
||
starBoxLeft.value = res.left;
|
||
});
|
||
}
|
||
/**
|
||
* 获取单个星星的尺寸
|
||
*/
|
||
function getElRectByClass() {
|
||
// uView封装的获取节点的方法，详见文档
|
||
$u.getRect('.' + elClass.value, instance).then((res: any) => {
|
||
starWidth.value = res.width;
|
||
// 把每个星星右边到组件盒子左边的距离放入数组中
|
||
for (let i = 0; i < Number(props.count); i++) {
|
||
starWidthArr.value[i] = (i + 1) * starWidth.value;
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* 手指滑动评分
|
||
*/
|
||
function touchMove(e: any) {
|
||
if (props.disabled) {
|
||
return;
|
||
}
|
||
if (!e.changedTouches[0]) {
|
||
return;
|
||
}
|
||
const movePageX = e.changedTouches[0].pageX;
|
||
// 滑动点相对于评分盒子左边的距离
|
||
const distance = movePageX - starBoxLeft.value;
|
||
// 如果滑动到了评分盒子的左边界，就设置为0星
|
||
if (distance <= 0) {
|
||
activeIndex.value = 0;
|
||
}
|
||
// 滑动的距离，相当于多少颗星星
|
||
let index = Math.ceil(distance / starWidth.value);
|
||
activeIndex.value = index > Number(props.count) ? Number(props.count) : index;
|
||
// 对最少颗星星的限制
|
||
if (activeIndex.value < Number(props.minCount)) activeIndex.value = Number(props.minCount);
|
||
emitEvent();
|
||
}
|
||
/**
|
||
* 通过点击，直接选中
|
||
*/
|
||
function click(index: number, e: any) {
|
||
if (props.disabled) {
|
||
return;
|
||
}
|
||
// 半星选择，尚未实现
|
||
if (props.allowHalf) {
|
||
// 预留半星实现
|
||
}
|
||
// 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价
|
||
if (index == 1) {
|
||
if (activeIndex.value == 1) {
|
||
activeIndex.value = 0;
|
||
} else {
|
||
activeIndex.value = 1;
|
||
}
|
||
} else {
|
||
activeIndex.value = index;
|
||
}
|
||
// 对最少颗星星的限制
|
||
if (activeIndex.value < Number(props.minCount)) activeIndex.value = Number(props.minCount);
|
||
emitEvent();
|
||
}
|
||
/**
|
||
* 发出事件
|
||
*/
|
||
function emitEvent() {
|
||
// 发出change事件
|
||
emit('change', activeIndex.value);
|
||
// 同时修改双向绑定的value的值
|
||
if (Number(props.modelValue) !== -1) {
|
||
emit('update:modelValue', activeIndex.value);
|
||
}
|
||
}
|
||
/**
|
||
* 是否显示半星图标
|
||
*/
|
||
function showDecimalIcon(index: number) {
|
||
return props.disabled && parseInt(String(activeIndex.value)) === index;
|
||
}
|
||
|
||
onMounted(() => {
|
||
getElRectById();
|
||
getElRectByClass();
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '../../libs/css/style.components.scss';
|
||
|
||
.u-rate {
|
||
display: -webkit-inline-flex;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.u-icon {
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|