Rate

组件类型：UxRateComponentPublicInstance

支持设置数量、最小选择、半星选择、触摸/鼠标拖动选择

平台兼容性

UniApp X

Android	iOS	web	鸿蒙 Next	小程序
√	√	√	x	√

UniApp Vue Nvue

Android	iOS	web	鸿蒙 Next	小程序
x	x	√	x	x

Props

属性名	类型	默认值	说明
name	String		标识符，在回调事件中返回
theme	String		主题颜色
value	Number		分数
count	Number	5	数量
minCount	Number	0	最小选择数量
color	String	`$ux.Conf.placeholderColor`	颜色
darkColor	String		深色none-不显示，auto-自动适配深色模式，其他-颜色
activeColor	String	`$ux.Conf.primaryColor`	选中颜色优先级高于主题
activeDarkColor	String		深色none-不显示，auto-自动适配深色模式，其他-颜色
size	Any	`$ux.Conf.fontSize`	字体大小
gutter	Any	5	间距
type	String	star	类型
icon	String		星星图标优先级高于type
half	Boolean	false	允许半星halfIcon配置时有效
halfIcon	String		半星图标half=true时有效
customFont	String		网络字体路径或自定义字体路径
customFamily	String		字体family
valueFormat	String	__s1__分	格式化文本，有则显示
touchable	Boolean	false	触摸滑动
disabled	Boolean	false	禁用
readonly	Boolean	false	只读
margin	Array		边距[上右下左][上下左右][上下左右]
mt	Any		距上单位px
mr	Any		距右单位px
mb	Any		距下单位px
ml	Any		距左单位px
padding	Array		填充[上右下左][上下左右][上下左右]
pt	Any		上内边距单位px
pr	Any		右内边距单位px
pb	Any		下内边距单位px
pl	Any		左内边距单位px
xstyle	Array		自定义样式

theme

值	说明
primary	主色
warning	警告
success	成功
error	错误
info	文本

darkColor

值	说明
none不显示
auto自动适配深色模式
color其他颜色

activeDarkColor

值	说明
none不显示
auto自动适配深色模式
color其他颜色

type

值	说明
star星星
heart爱心

Events

事件名	说明	参数
change	值改变时触发
touchstart	开始触摸时触发
touchmove	正在触摸时触发
touchend	触摸结束时触发

示例代码

htmlscriptstyle

html

<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="评分" :bold="true">
				<ux-text text="支持设置数量、最小选择、半星选择、触摸/鼠标拖动选择"></ux-text>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-rate theme="warning" :value="value" :size="28" @change="change"></ux-rate>
					<ux-rate theme="success" :value="value" :mt="10" :size="22" @change="change"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="样式" :bold="true">
				<ux-text text="默认支持星星、爱心、半星，也可自定义评分图标" :mb="15"></ux-text>
				<ux-col>
					<ux-rate type="heart" :value="value" :size="24" @change="change"></ux-rate>
					<ux-rate :half="true" type="star" theme="success" :size="24" :value="value1" :mt="10" @change="change1"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="触摸选择" :bold="true">
				<ux-text text="支持手指触摸/鼠标拖动快速选择" :mb="15"></ux-text>
				<ux-col>
					<ux-rate type="heart" theme="error" :touchable="true" :value="value" :size="24" @change="change"></ux-rate>
					<ux-rate :half="true" type="star" :touchable="true" :value="value1" :size="24" :mt="10" @change="change1"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="文本" :bold="true">
				<ux-text text="支持文本格式化，替换文本中所有__s1__为当前值" :mb="15"></ux-text>
				<ux-col>
					<ux-rate type="heart" :value="value" value-format="送您__s1__颗爱心??" :size="18" @change="change"></ux-rate>
					<ux-rate :half="true" type="star" theme="success" :value="value1" value-format="给我__s1__星好评哦~" :size="18" :mt="10" @change="change1"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="数量" :bold="true">
				<ux-text text="可配置总评分数和最小选择" :mb="15"></ux-text>
				<ux-col>
					<ux-rate active-color="yellow" :count="10" :value="value" :size="24" @change="change"></ux-rate>
					<ux-rate theme="warning" type="heart" :min-count="4" :count="8" :value="value" :size="24" :mt="10" @change="change"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="禁用/只读" :bold="true">
				<ux-text text="支持禁用组件、只读状态" :mb="15"></ux-text>
				<ux-col>
					<ux-rate :half="true" type="star" :disabled="true" :value="3.5" :size="24"></ux-rate>
					<ux-rate type="heart" theme="error" :readonly="true" :value="3" :size="24" :mt="10"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-col justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-col>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>

<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="评分" :bold="true">
				<ux-text text="支持设置数量、最小选择、半星选择、触摸/鼠标拖动选择"></ux-text>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-rate theme="warning" :value="value" :size="28" @change="change"></ux-rate>
					<ux-rate theme="success" :value="value" :mt="10" :size="22" @change="change"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="样式" :bold="true">
				<ux-text text="默认支持星星、爱心、半星，也可自定义评分图标" :mb="15"></ux-text>
				<ux-col>
					<ux-rate type="heart" :value="value" :size="24" @change="change"></ux-rate>
					<ux-rate :half="true" type="star" theme="success" :size="24" :value="value1" :mt="10" @change="change1"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="触摸选择" :bold="true">
				<ux-text text="支持手指触摸/鼠标拖动快速选择" :mb="15"></ux-text>
				<ux-col>
					<ux-rate type="heart" theme="error" :touchable="true" :value="value" :size="24" @change="change"></ux-rate>
					<ux-rate :half="true" type="star" :touchable="true" :value="value1" :size="24" :mt="10" @change="change1"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="文本" :bold="true">
				<ux-text text="支持文本格式化，替换文本中所有__s1__为当前值" :mb="15"></ux-text>
				<ux-col>
					<ux-rate type="heart" :value="value" value-format="送您__s1__颗爱心??" :size="18" @change="change"></ux-rate>
					<ux-rate :half="true" type="star" theme="success" :value="value1" value-format="给我__s1__星好评哦~" :size="18" :mt="10" @change="change1"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="数量" :bold="true">
				<ux-text text="可配置总评分数和最小选择" :mb="15"></ux-text>
				<ux-col>
					<ux-rate active-color="yellow" :count="10" :value="value" :size="24" @change="change"></ux-rate>
					<ux-rate theme="warning" type="heart" :min-count="4" :count="8" :value="value" :size="24" :mt="10" @change="change"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="禁用/只读" :bold="true">
				<ux-text text="支持禁用组件、只读状态" :mb="15"></ux-text>
				<ux-col>
					<ux-rate :half="true" type="star" :disabled="true" :value="3.5" :size="24"></ux-rate>
					<ux-rate type="heart" theme="error" :readonly="true" :value="3" :size="24" :mt="10"></ux-rate>
				</ux-col>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-col justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-col>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>

<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	import { UxRateEvent } from '@/uni_modules/ux-frame'
	
	const title = ref('')
	const value = ref(2)
	const value1 = ref(3.5)
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/rate.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
	})
	
	function change(e: UxRateEvent) {
		value.value = e.value
	}
	
	function change1(e: UxRateEvent) {
		value1.value = e.value
	}
</script>

<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	import { UxRateEvent } from '@/uni_modules/ux-frame'
	
	const title = ref('')
	const value = ref(2)
	const value1 = ref(3.5)
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/rate.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
	})
	
	function change(e: UxRateEvent) {
		value.value = e.value
	}
	
	function change1(e: UxRateEvent) {
		value1.value = e.value
	}
</script>

css

<style lang="scss">
	
</style>

<style lang="scss">
	
</style>

Rate ​

平台兼容性 ​

UniApp X ​

UniApp Vue Nvue ​

Props ​

theme ​

darkColor ​

activeDarkColor ​

type ​

Events ​

示例代码 ​

Rate

平台兼容性

UniApp X

UniApp Vue Nvue

Props

theme

darkColor

activeDarkColor

type

Events

示例代码