Tuniao UI Uniapp V3

Appearance

12:13

TnRate-评分 ​

评分组件一般用户设置评分，如评价等。

组件位置 ​

typescript
import TnRate from '@tuniao/tnui-vue3-uniapp/components/rate/src/rate.vue'
import TnRate from '@tuniao/tnui-vue3-uniapp/components/rate/src/rate.vue'
typescript
import TnRate from '@/uni_modules/tuniaoui-vue3/components/rate/src/rate.vue'
import TnRate from '@/uni_modules/tuniaoui-vue3/components/rate/src/rate.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

  • 通过v-model绑定评分的值
  • 设置allow-half为true，则以 0.5 为一个刻度进行选择评分
  • 通过min参数设置最小评分，默认为 0
  • 通过max参数设置最大评分，默认为 5，即星星显示的数量
vue
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate v-model="rateValue" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate v-model="rateValue" />
</template>

修改最小、最大值 ​

vue
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate v-model="rateValue" :min="1" :max="6" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate v-model="rateValue" :min="1" :max="6" />
</template>

允许选中一半 ​

vue
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate v-model="rateValue" allow-half />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate v-model="rateValue" allow-half />
</template>

设置尺寸 ​

可以通过size参数设置组件的尺寸，默认有sm、lg、xl三种尺寸，也可以通过size参数传递自定义的尺寸

vue
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate v-model="rateValue" size="sm" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate v-model="rateValue" size="sm" />
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate v-model="rateValue" size="80rpx" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate v-model="rateValue" size="80rpx" />
</template>

修改选中和未选中的图标、颜色 ​

  • 通过active-icon参数设置选中的图标
  • 通过inactive-icon参数设置未选中的图标
  • 通过active-color参数设置选中的颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值字体颜色
  • 通过inactive-color参数设置未选中的颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值字体颜色
vue
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate
    v-model="rateValue"
    inactive-icon="like"
    active-icon="like-fill"
    inactive-color="#ccc"
    active-color="tn-red"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(0)
</script>

<template>
  <TnRate
    v-model="rateValue"
    inactive-icon="like"
    active-icon="like-fill"
    inactive-color="#ccc"
    active-color="tn-red"
  />
</template>

自定义指定位置的图标颜色信息 ​

通过给custom-data传递一个对象，其中key是需要修改哪个位置的图标颜色信息，value是需要修改的图标颜色信息，可以传递hex、rgb、rgba和图鸟内置颜色的值字体颜色，value包含active-icon、inactive-icon、active-color、inactive-color四个参数

vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { RateCustomDataMap } from '@tuniao/tnui-vue3-uniapp'
const rateValue = ref(0)

const customRateData: RateCustomDataMap = {
  1: {
    inactiveIcon: 'like',
    activeIcon: 'like-fill',
    inactiveColor: 'tn-red-light',
    activeColor: 'tn-red',
  },
  2: {
    inactiveColor: 'tn-grey-disabled',
    activeColor: '#784532',
  },
}
</script>

<template>
  <TnRate v-model="rateValue" :custom-data="customRateData" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { RateCustomDataMap } from '@tuniao/tnui-vue3-uniapp'
const rateValue = ref(0)

const customRateData: RateCustomDataMap = {
  1: {
    inactiveIcon: 'like',
    activeIcon: 'like-fill',
    inactiveColor: 'tn-red-light',
    activeColor: 'tn-red',
  },
  2: {
    inactiveColor: 'tn-grey-disabled',
    activeColor: '#784532',
  },
}
</script>

<template>
  <TnRate v-model="rateValue" :custom-data="customRateData" />
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { RateCustomDataMap } from '@/uni_modules/tuniaoui-vue3'
const rateValue = ref(0)

const customRateData: RateCustomDataMap = {
  1: {
    inactiveIcon: 'like',
    activeIcon: 'like-fill',
    inactiveColor: 'tn-red-light',
    activeColor: 'tn-red',
  },
  2: {
    inactiveColor: 'tn-grey-disabled',
    activeColor: '#784532',
  },
}
</script>

<template>
  <tn-rate v-model="rateValue" :custom-data="customRateData" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { RateCustomDataMap } from '@/uni_modules/tuniaoui-vue3'
const rateValue = ref(0)

const customRateData: RateCustomDataMap = {
  1: {
    inactiveIcon: 'like',
    activeIcon: 'like-fill',
    inactiveColor: 'tn-red-light',
    activeColor: 'tn-red',
  },
  2: {
    inactiveColor: 'tn-grey-disabled',
    activeColor: '#784532',
  },
}
</script>

<template>
  <tn-rate v-model="rateValue" :custom-data="customRateData" />
</template>

API ​

Props ​

属性名说明类型默认值可选值
model-value/v-modelrate 评分绑定的值Number0-
min最小值Number0-
max最大值Number5-
allow-half是否允许半选Booleanfalsetrue
readonly是否只读Booleanfalsetrue
size尺寸，可以传递带单位的尺寸值String-sm / lg / xl
inactive-icon未选中时的图标Stringstar图标有效值
active-icon选中时的图标Stringstar-fill图标有效值
inactive-color未选中时的颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
active-color选中时的颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
gutter每个图标的间距，默认单位 rpxString--
custom-data自定义指定位置的图标颜色信息RateCustomDataMap--
validate-event值发生修改时是否触发表单验证Booleantruefalse

Events ​

事件名说明类型
change选中的值发生改变(value: number) => void

RateCustomDataMap ​

参数说明必填
inactiveIcon未选中时的图标否
activeIcon选中时的图标否
inactiveColor未选中时的颜色，支持图鸟内置的颜色值、hex、rgb、rgba否
activeColor选中时的颜色，支持图鸟内置的颜色值、hex、rgb、rgba否

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI