Rate 评分

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle=" 评分 ">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="基础用法" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="基础的评分用法" />
			<zk-rate :modelValue="value1" />
		</zk-theme>

		<!-- 自定义数量 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="自定义数量" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="可以自定义星星的数量" />
			<zk-rate :modelValue="value2" :count="6" />
		</zk-theme>

		<!-- 半星评分 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="半星评分" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="支持选中半星" />
			<zk-rate :modelValue="value3" :allowHalf="true" />
		</zk-theme>

		<!-- 自定义图标 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="自定义图标" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="可以自定义图标样式" />
			<zk-rate :modelValue="value4" active-icon="heart-3-fill" inactive-icon="heart-3-line"
				active-color="#ff4444" />
		</zk-theme>

		<!-- 自定义大小 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="自定义大小" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="可以自定义图标大小" />
			<zk-rate :modelValue="value5" :size="50" />
		</zk-theme>

		<!-- 自定义间距 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="自定义间距" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="可以自定义图标间距" />
			<zk-rate :modelValue="value6" :gutter="20" />
		</zk-theme>

		<!-- 只读状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="只读状态" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="只读状态下无法修改评分" />
			<zk-rate :modelValue="value7" :readonly="true" />
		</zk-theme>

		<!-- 禁用状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="禁用状态" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="禁用状态下显示灰色样式" />
			<zk-rate :modelValue="value8" :disabled="true" />
		</zk-theme>

		<!-- 自定义颜色 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="自定义颜色" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="可以自定义激活和未激活的颜色" />
			<zk-rate :modelValue="value10" active-color="#2979ff" inactive-color="#e4e4e4" />
		</zk-theme>

		<!-- 事件回调 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="事件回调" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="评分变化时触发事件" />
			<zk-rate :modelValue="value11" @change="onChange" />
			<zk-text type="third" :size="28" margin="20rpx 0 0 0" :text="`当前值：${value11}`" />
		</zk-theme>

		<!-- 综合示例 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0" :shadow="true">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 10rpx 0" text="综合示例" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="结合多个特性的示例" />
			<zk-rate :modelValue="value12" :count="7" :allowHalf="true" :size="26" :gutter="8" active-icon="star-fill"
				inactive-icon="star-line" active-color="#f0a020" @change="onComplexChange" />
			<zk-text type="third" :size="28" margin="20rpx 0 0 0" :text="`综合评分：${value12}`" />
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				value1: 3,
				value2: 4,
				value3: 3.5,
				value4: 3,
				value5: 3,
				value6: 3,
				value7: 4,
				value8: 3,
				value10: 3,
				value11: 3,
				value12: 4.5
			}
		},
		methods: {
			onChange(value) {
				this.value11 = value
				uni.showToast({
					title: `当前评分: ${value}`,
					icon: 'none'
				});
			},
			onComplexChange(value) {
				uni.showToast({
					title: `综合评分: ${value}`,
					icon: 'none'
				});
			}
		}
	}
</script>

<style>

</style>