139 lines
2.5 KiB
Vue
139 lines
2.5 KiB
Vue
<template>
|
||
<view class="cl-rate">
|
||
<view class="cl-rate__icon" v-for="(item, index) in list" :key="index" @tap="onTap(index)">
|
||
<cl-icon :class-name="icon" :size="size" :color="voidColor"></cl-icon>
|
||
|
||
<view
|
||
class="cl-rate__icon-active"
|
||
:style="{
|
||
width: item.width,
|
||
}"
|
||
>
|
||
<cl-icon :class-name="icon" :size="size" :color="item.color"></cl-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cl-rate__text" v-if="showText">
|
||
{{ text }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { computed, defineComponent, ref, watch, type PropType } from "vue";
|
||
import { useForm } from "../../hooks";
|
||
import { getCurrentColor } from "../../utils";
|
||
import { isEmpty } from "lodash-es";
|
||
|
||
export default defineComponent({
|
||
name: "cl-rate",
|
||
|
||
props: {
|
||
// 绑定值
|
||
modelValue: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
// 评分图标
|
||
icon: {
|
||
type: String,
|
||
default: "cl-icon-favor-fill",
|
||
},
|
||
// 选中颜色，Array下为多色
|
||
color: {
|
||
type: [String, Array] as PropType<string | string[]>,
|
||
default: "",
|
||
},
|
||
// 空的颜色
|
||
voidColor: {
|
||
type: String,
|
||
default: "#C6D1DE",
|
||
},
|
||
// 图标大小
|
||
size: {
|
||
type: [Number, String],
|
||
default: 40,
|
||
},
|
||
// 最大值
|
||
max: {
|
||
type: Number,
|
||
default: 5,
|
||
},
|
||
// 是否禁用
|
||
disabled: {
|
||
type: Boolean,
|
||
default: null,
|
||
},
|
||
// 显示文本
|
||
showText: {
|
||
type: Boolean,
|
||
default: null,
|
||
},
|
||
// 文本组
|
||
texts: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
},
|
||
|
||
setup(props, { emit }) {
|
||
const { disabled } = useForm();
|
||
|
||
// 绑定值
|
||
const value = ref(0);
|
||
|
||
watch(
|
||
() => props.modelValue,
|
||
(val) => {
|
||
value.value = Number(val);
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
);
|
||
|
||
// 文本内容
|
||
const text = computed(() => {
|
||
return isEmpty(props.texts) ? value.value : props.texts[Math.ceil(value.value) - 1];
|
||
});
|
||
|
||
// 列表
|
||
const list = computed(() => {
|
||
return new Array(props.max).fill(1).map((_, i) => {
|
||
const int: number = parseInt(String(value.value));
|
||
const dec: number = value.value - int;
|
||
|
||
// 处理宽度和颜色
|
||
return {
|
||
width: (value.value > i ? (int > i ? 100 : dec * 100) : 0) + "%",
|
||
color: getCurrentColor({
|
||
value: value.value,
|
||
color: props.color,
|
||
max: props.max,
|
||
}),
|
||
};
|
||
});
|
||
});
|
||
|
||
// 点击
|
||
function onTap(index: number) {
|
||
if (disabled.value || props.disabled) {
|
||
return false;
|
||
}
|
||
|
||
value.value = index + 1;
|
||
|
||
emit("update:modelValue", value.value);
|
||
emit("change", value.value);
|
||
}
|
||
|
||
return {
|
||
value,
|
||
list,
|
||
text,
|
||
onTap,
|
||
};
|
||
},
|
||
});
|
||
</script>
|