上图:

<template>
<div class="container">
<div v-for="(star,index) in stars" :key="index" style="position: relative">
<img :src="star.img" :style="{'width':(2*width + 'rpx'),'height':(2*height + 'rpx')}">
<div class="left" @click="scoreBtn(1,index)"></div>
<div class="right" @click="scoreBtn(2,index)"></div>
</div>
</div>
</template> <script>
export default {
props:["imgs","width","height","starValue"],
data(){
return {
stars:[]
}
},
mounted(){
this.stars = [
{img:this.imgs[0]},
{img:this.imgs[0]},
{img:this.imgs[0]},
{img:this.imgs[0]},
{img:this.imgs[0]}
]
},
methods:{
scoreBtn(type,index){
let score = type === 1? (this.starValue /2):this.starValue;
this.stars[index].img = type === 1? this.imgs[1]:this.imgs[2];
this.stars.forEach((val,ind)=>{
if(ind < index){
score += this.starValue;
val.img = this.imgs[2];
}else if(ind > index) {
val.img = this.imgs[0];
}
});
this.$emit("ok",score)
}
}
}
</script> <style scoped>
.container{
display: flex;
flex-direction: row
}
.right{
position: absolute;
width: 50%;
height: 100%;
top: 0;
left: 50%;
}
.left{
position: absolute;
width: 50%;
height: 100%;
top: 0;
left: 0;
}
</style> <!--
属性 类型 单位 说明
imgs Array 无 imgs为三种状态图片url的数组(注意:数组的顺序为 空心图片url》 半实心图片url 》 实心图片url)
width number px 星星的宽度
height number px 星星图片的高度
starValue number 无 每个星星代表分值
ok method 无 打分后的回调,返回一个分值 距离:
<score :imgs="imgs" :width="width" :height="height" :starValue="starValue" @ok="back"></score> -->

  

mpvue 星星打分组件的更多相关文章

  1. vue 星星评分组件

    显示评分和打分组件,可现实半颗星星效果 效果图: 参数名 类型 说明 score Number 分数 ,默认0,保留一位小数 disabled Boolean 是否只读,默认false,鼠标点击可以打 ...

  2. jquery星级评论打分组件

    <!DOCTYPE HTML><html> <head> <meta charset="utf-8"><title>jq ...

  3. 【原创】用JQury来制作星星打分特效功能

    前言 常常我们看到一些评论,星星打分,今天我们就用Jq代码来实现,看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图 代码 <!DOCTYPE htm ...

  4. mpvue——修改第三方组件样式

    前言 我们都知道在vue中可以定义多个<style>,一般为了防止全局污染,我们会使用<style scoped>代表这里面的css样式只在本页面生效. 全局 这个当时测试是直 ...

  5. 星星打分,今天我们就用Jq代码来实现,看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...

  6. MpVue开发之组件引入的问题

    再一次开发订餐系统中,遇到订餐页面引入头部商品列表,底部组件时,报错,模块编译失败,未进入缓存区. 我以为是新添加的模块没有重新启动导致的,然后重新与运行npm run dev后还是失败, 最后经过反 ...

  7. mp-vue拖拽组件的实现

    作为一个效率还不错的小前端,自己的任务做完之后真的好闲啊,千盼万盼终于盼来了业务的新需求,他要我多加一个排序题,然后用户通过拖拽来排序,项目经理看我是个实习生,说有点复杂做不出来就算了,我这么闲的一个 ...

  8. jquery模仿淘宝星星打分

    今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...

  9. mpvue——引入vant_weapp组件

    克隆仓库 克隆后,将dist目录下的所有文件复制到项目中的/static/vant/目录下,vant目录是我自己创建为了区分的 git clone https://github.com/youzan/ ...

随机推荐

  1. ASP.NET Core结合Nacos来完成配置管理和服务发现

    目录 前言 Nacos的简介 启动Nacos 配置管理 服务发现 写在最后 前言 今年4月份的时候,和平台组的同事一起调研了一下Nacos,也就在那个时候写了.net core版本的非官方版的SDK. ...

  2. 逆向破解之160个CrackMe —— 030

    CrackMe —— 030 160 CrackMe 是比较适合新手学习逆向破解的CrackMe的一个集合一共160个待逆向破解的程序 CrackMe:它们都是一些公开给别人尝试破解的小程序,制作 c ...

  3. Erlcron分析学习

    介绍 Erlcron实现类似Linux下面的cron的计划任务. 源码下载地址:https://github.com/erlware/erlcron 原理 Erlcron进程监控树 ecrn_cron ...

  4. 【Offer】[57-1] 【和为S的两个数字】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一个递增排序的数组和一个数字s,在数组中查找两个数,使得它们的和正好是s.如果有多对数字的和等于s,则输出任意一对即可. 牛客网刷题 ...

  5. 2018阿里-研发工程师JAVA Software Engineer, Java

    岗位描述Job Description如果你想了解JAVA开发在阿里巴巴互联网生态系统中无与伦比的应用广度与深度: 如果你对基础技术感兴趣,你可以参与基础软件的设计.开发和维护,如分布式文件系统.缓存 ...

  6. Intellij IDEA使用restclient测试

    Intellij  IDEA内置了restclient来帮忙我们测试我们的后台代码,让我们可以脱离第三方工具测试,也更不需要我们编写前端代码,直接让我们能想网站发送get,post,put,delet ...

  7. 【学习笔记】第三章 python3核心技术与实践--Jupyter Notebook

    可能你已经知道,Python 在 14 年后的“崛起”,得益于机器学习和数学统计应用的兴起.那为什么 Python 如此适合数学统计和机器学习呢?作为“老司机”的我可以肯定地告诉你,Jupyter N ...

  8. 简易数据分析 12 | Web Scraper 翻页——抓取分页器翻页的网页

    这是简易数据分析系列的第 12 篇文章. 前面几篇文章我们介绍了 Web Scraper 应对各种翻页的解决方法,比如说修改网页链接加载数据.点击"更多按钮"加载数据和下拉自动加载 ...

  9. SSM整合activiti框架

    一:WorkFlow简介 1:什么是工作流工作流(Workflow),指“业务过程的部分或整体在计算机应用环境下的自动化”.是对工作流程及其各操作步骤之间业务规则的抽象.概括描述.在计算机中,工作流属 ...

  10. jmeter 分布式压测

    1.配置主机名称 查看主机名 hostname 配置主机别名 vim /etc/hosts 2.分布式主机也需要配置主机别名 3.每个主机上必需有JAVA环境和jmeter环境 4.如果脚本有参数文件 ...