评星联动效果

最新推荐文章于 2021-05-27 17:55:15 发布

小月鸭

最新推荐文章于 2021-05-27 17:55:15 发布

阅读量976

点赞数

分类专栏： js 文章标签： vue

本文链接：https://blog.csdn.net/pyj2017/article/details/107140604

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

vue评星联动

业务需要一个评星联动效果，然后用到的框架暂不支持，所以就手写了一个
demo级别所以有点糙
效果如下:
在这里插入图片描述

<view>
		<view class="items">
			<view :class="item.isSelect?'it_selectd item':'item'" v-for="(item , index) in  items" :key="index" @click='czc(item)'>{{item.txt}}</view>
		</view>

		<view class="stars">
			<block v-for="(item , index) in stars" :key="index">
				<image src="../../assets/star1.png" v-if="item.isSelect" class="star" @click='reloadStage(index+1)'></image>
				<image src="../../assets/star.png" v-if="item.isSelect==false" class="star" @click='reloadStage(index+1)'></image>
			</block>
		</view>
	</view>

js部分


	export default {
		data() {
			return {
				stage: 1, //默认情况下的选中等级，分为1-5
				items: [{
						txt: "超级好",isSelect: false,id: 5
					},
					{
						txt: "非常好",isSelect: false,id: 4
					},
					{
						txt: "好",isSelect: false,id: 3
					},
					{
						txt: "不好",isSelect: false,id: 2
					},
					{
						txt: "垃圾",isSelect: false,id: 1
					}
				],
				stars: [{
						isSelect: false,id: 1
					},
					{
						isSelect: false,id: 2
					},
					{
						isSelect: false,id: 3
					},
					{
						isSelect: false,id: 4
					},
					{
						isSelect: false,id: 5
					}
				]
			};
		},
		onLoad: function(options) {
			this.reloadStage();
		},
		methods: {

			czc(e) {
				var stage = e.id;
				this.reloadStage(stage);
			},
			reloadStage(stage) {

				var items = this.items;
				var stars = this.stars;
				stars.map(item => {
					item.isSelect = false
					if (item.id <= stage) {
						item.isSelect = true
					}
				})
				items.map(item => {
					item.isSelect = false
					if (stage == item.id) {
						item.isSelect = true
					}
				})
			}
		}
	}

css

<style lang="less" scoped>
	.items {
		width: 100%;
		display: flex;
		margin: 30upx 0 0 30upx;
	}

	.item {
		text-align: center;
		color: #666;
		padding: 5upx 10upx;
		border: 1upx solid #666;
		box-sizing: border-box;
		margin-right: 10upx;
		border-radius: 8upx;
	}

	.it_selectd {
		color: #007AFF;
		border: 1upx solid #007AFF;
	}

	.stars {
		width: 750rpx;
		display: flex
	}

	.star {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin: 10rpx;
		color: red;
	}
</style>