上图:

<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. iphone不支持(格式:2016-02-26 09:12)的格式时间需要转换成:(格式:2016/02/26 09:12)

    function strToTime(str) {return Date.parse(str.replace(/-/g, "/"));} 苹果手机不支持创建这种时间格式 需要转化一 ...

  2. 解决rac错误 ORA-01102: cannot mount database in EXCLUSIVE mode

    启动 Oracle  11g RAC数据库时出现以下错误.只能启动其中一个节点(rac01),另一个节点启动不了(rac02).可能是以前修改cluster_database这个参数引起的.在Orac ...

  3. 为什么不建议使用Date,而是使用Java8新的时间和日期API?

    Java 8:新的时间和日期API 在Java 8之前,所有关于时间和日期的API都存在各种使用方面的缺陷,因此建议使用新的时间和日期API,分别从旧的时间和日期的API的缺点以及解决方法.Java ...

  4. 2019本科se第一次作业-博客初体验-chris

    (1)第一章  计算机专业术语总结: 软件=程序+软件工程.程序=数据结构+算法.软件.程序.用户.需求.应用程序.软件服务.源程序.软件架构(Software Architecture).软件设计与 ...

  5. 从零开始开发IM(即时通讯)服务端(二)

    好消息:IM1.0.0版本已经上线啦,支持特性: 私聊发送文本/文件 已发送/已送达/已读回执 支持使用ldap登录 支持接入外部的登录认证系统 提供客户端jar包,方便客户端开发 github链接: ...

  6. Elasticsearch之联想词示例

    public class LianXiangWord { private static RestClient client; static { client=RestClient.builder(ne ...

  7. 明明有class为什么还是报ClassNotFoundException?

    描述 我们修改接口时,习惯发布一个快照版本用于测试.我们的一个服务也是发布了快照版本,然后一个jar程序要依赖这个服务,修改pom文件打包部署后,通过 java -jar 命令执行这个jar程序,然后 ...

  8. Java 创建/识别条形码、二维码

    条形码(Barcode)是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符.常用于标示物品的生产国.制造厂家.商品名称.生产日期.图书分类号.邮件起止地点.类别.日期等 ...

  9. [币严区块链]ETH搭建节点区块数据同步的三种模式:full、fast、light

    ETH  全节点Archive(归档)模式数据量增长图 上述图表可通过链接查看:https://etherscan.io/chartsync/chainarchive 通过上表,可以看到截止2019年 ...

  10. linux切换jdk

    一.安装openjdk yum search openjdk yum install java-1.8.0-openjdk-devel-debug.x86_64 二.查询java版本 alternat ...