uni-app uniRate 动态赋值

最新推荐文章于 2024-09-30 16:59:18 发布

前端学习007

最新推荐文章于 2024-09-30 16:59:18 发布

阅读量1.1k

点赞数

分类专栏： uni-app 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44433499/article/details/115202834

版权

本文详细探讨了在uni-app中如何对uniRate组件进行动态赋值，通过实例展示了在vue框架下利用uniRate实现星星评分功能的具体步骤和关键代码，帮助开发者理解并掌握该组件在实际项目中的应用。

摘要由CSDN通过智能技术生成

uni-rate.vue 组件：

<template>
	<view>
		<view ref="uni-rate" class="uni-rate">
			<view v-if="" class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}" :style="{ 'margin-right': margin + 'px' }" v-for="(star, index) in stars" :key="index" @touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown" @mousemove.stop="mousemove" @mouseleave="mouseleave">
				<uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
				<!-- #ifdef APP-NVUE -->
				<view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
					<uni-icons style="text-align: left;" :color="disabled?'#ccc':activeColor" :size="size" type="star-filled" />
				</view>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<view :style="{ width: star.activeWitch}" class="uni-rate__icon-on">
					<uni-icons :color="disabled?disabledColor:activeColor" :size="size" type="star-filled" />
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-NVUE
	const dom = uni.requireNativePlugin('dom');
	// #endif
	import uniIcons from "../extUI/icons/icons.nvue";
	/**
	 * Rate 评分
	 * @description 评分组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=33
	 * @property {Boolean} 	isFill = [true|false] 		星星的类型，是否为实心类型, 默认为实心
	 * @property {String} 	color 						未选中状态的星星颜色，默认为