|
@@ -1,35 +1,32 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view :class="classes">
|
|
<view :class="classes">
|
|
|
- <view
|
|
|
|
|
- class="nut-rate-item"
|
|
|
|
|
- v-for="n in count"
|
|
|
|
|
- :key="n"
|
|
|
|
|
- :style="{ marginRight: pxCheck(spacing) }"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <view class="nut-rate-item" v-for="n in count" :key="n" :style="{ marginRight: pxCheck(spacing) }">
|
|
|
<nut-icon
|
|
<nut-icon
|
|
|
:size="iconSize"
|
|
:size="iconSize"
|
|
|
class="nut-rate-item__icon"
|
|
class="nut-rate-item__icon"
|
|
|
@click="onClick(1, n)"
|
|
@click="onClick(1, n)"
|
|
|
:class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
|
|
:class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
|
|
|
:color="n <= modelValue ? activeColor : voidColor"
|
|
:color="n <= modelValue ? activeColor : voidColor"
|
|
|
|
|
+ :font-class-name="fontClassName"
|
|
|
|
|
+ :class-prefix="classPrefix"
|
|
|
:name="n <= modelValue ? checkedIcon : uncheckedIcon"
|
|
:name="n <= modelValue ? checkedIcon : uncheckedIcon"
|
|
|
/>
|
|
/>
|
|
|
<nut-icon
|
|
<nut-icon
|
|
|
v-if="allowHalf && modelValue + 1 > n"
|
|
v-if="allowHalf && modelValue + 1 > n"
|
|
|
class="nut-rate-item__icon nut-rate-item__icon--half"
|
|
class="nut-rate-item__icon nut-rate-item__icon--half"
|
|
|
@click="onClick(2, n)"
|
|
@click="onClick(2, n)"
|
|
|
|
|
+ :font-class-name="fontClassName"
|
|
|
|
|
+ :class-prefix="classPrefix"
|
|
|
:color="n <= modelValue ? activeColor : voidColor"
|
|
:color="n <= modelValue ? activeColor : voidColor"
|
|
|
:size="iconSize"
|
|
:size="iconSize"
|
|
|
:name="checkedIcon"
|
|
:name="checkedIcon"
|
|
|
/>
|
|
/>
|
|
|
<nut-icon
|
|
<nut-icon
|
|
|
v-else-if="allowHalf && modelValue + 1 < n"
|
|
v-else-if="allowHalf && modelValue + 1 < n"
|
|
|
- class="
|
|
|
|
|
- nut-rate-item__icon
|
|
|
|
|
- nut-rate-item__icon--disabled
|
|
|
|
|
- nut-rate-item__icon--half
|
|
|
|
|
- "
|
|
|
|
|
|
|
+ class="nut-rate-item__icon nut-rate-item__icon--disabled nut-rate-item__icon--half"
|
|
|
@click="onClick(2, n)"
|
|
@click="onClick(2, n)"
|
|
|
|
|
+ :font-class-name="fontClassName"
|
|
|
|
|
+ :class-prefix="classPrefix"
|
|
|
:color="voidColor"
|
|
:color="voidColor"
|
|
|
:size="iconSize"
|
|
:size="iconSize"
|
|
|
:name="uncheckedIcon"
|
|
:name="uncheckedIcon"
|
|
@@ -88,6 +85,14 @@ export default create({
|
|
|
spacing: {
|
|
spacing: {
|
|
|
type: [String, Number],
|
|
type: [String, Number],
|
|
|
default: 14
|
|
default: 14
|
|
|
|
|
+ },
|
|
|
|
|
+ classPrefix: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: 'nut-icon'
|
|
|
|
|
+ },
|
|
|
|
|
+ fontClassName: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: 'nutui-iconfont'
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
emits: ['update:modelValue', 'change'],
|
|
emits: ['update:modelValue', 'change'],
|