VUE:实现星级评价,以VUE举例

web前端之VUE 专栏收录该内容
20 篇文章 0 订阅

简介

在很多项目中,需要用到对商品、订单、服务等的评价功能,其中使用星级评价是一种快捷表现满意度的体现。接下来以VUE项目环境列举一个实例。具体样式的话,需要自己根据项目实际情况进行修改。

具体实现

// HTML
<div class="flexRowStartCenter effectAndAttitudeBox">
  <div class="standardTitle">疗效:</div>
  <div class="flexRowStartCenter">
    <img class="standardIcon" :src="index < curativeEffect ? xingIcon : xingIconBot" v-for="(item, index) in curativeEffectList" :key="index" @click="clickXingIconFun(index, 'curativeEffect')" />
  </div>
</div>
<div class="flexRowStartCenter effectAndAttitudeBox">
  <div class="standardTitle">服务:</div>
  <div class="flexRowStartCenter">
    <img class="standardIcon" :src="index < doctorAttitude ? xingIcon : xingIconBot" v-for="(item, index) in doctorAttitudeList" :key="index" @click="clickXingIconFun(index, 'doctorAttitude')" />
  </div>
</div>

// JS
import xingIcon from "@/assets/image/order/xingIcon.png";
import xingIconBot from "@/assets/image/order/xingIconBot.png";
export default {
  data() {
    return {
      xingIcon: xingIcon, // 星级图标:亮色
      xingIconBot: xingIconBot, // 星级图标:灰色
      curativeEffect: 5, // 疗效初始星的颗数
      doctorAttitude: 5, // 服务初始星的颗数
      curativeEffectList: [{}, {}, {}, {}, {}], // 疗效星级列表初始数据
      doctorAttitudeList: [{}, {}, {}, {}, {}] // 服务星级列表初始数据
    }
  },
  method: {
    // 操作:点击星级
    clickXingIconFun(index, type) {
      if (type === "curativeEffect") {
        this.curativeEffect = index + 1;
      } else if (type === "doctorAttitude") {
        this.doctorAttitude = index + 1;
      }
    }
  }
}

// CSS
.flexRowStartCenter {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.effectAndAttitudeBox {
    margin-bottom: 0.5rem;
  }
.standardTitle {
  font-size: 0.6rem;
  color: #242526;
  margin-right: 0.25rem;
}
.standardIcon {
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.2rem;
}

最后

觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值