上图:

<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. 工作中遇到的99%SQL优化,这里都能给你解决方案(二)

    -- 示例表 CREATE TABLE `employees` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(24) NOT NULL ...

  2. Redis哨兵模式实现集群的高可用

    先了解一下哨兵都 做了什么工作:Redis 的 Sentinel 系统用于管理多个 Redis 服务器(instance), 该系统执行以下三个任务: 监控(Monitoring): Sentinel ...

  3. Android源码阅读技巧--查找开发者选项中显示触摸操作源码

    在开发者模式下,在开发者选项中,可以勾选“显示触摸操作”,然后只要点击屏幕就会在点击的位置有圈圈显示.如何找到绘制圈圈的代码部分,有什么技巧来阅读代码量这么大的android系统源码呢?以下请跟着小老 ...

  4. git 中文乱码-一次被坑经历

    git log和gitcommit中文出现乱码,花了大半天的时间试了网上的各种方法,还是搞不定. 只好放大招. 卸载软件后重装,还是不行.然后git config --list 发现一些奇怪的配置信息 ...

  5. 基于servlet的图书管理系统

    该项目是Java语言开发的图书管理系统,IDE采用eclipse,技术采用servlet,数据库使用mysql,前端页面采用bootstrap框架,简介美观. 系统具备基础的功能,读者可以注册登录,登 ...

  6. 快速了解TCP的流量控制与拥塞控制

    有关TCP你不能不知道的三次握手和四次挥手问题,点我跳转 流量控制 1. 滑动窗口 数据的传送过程中很可能出现接收方来不及接收的情况,这时就需要对发送方进行控制以免数据丢失.利用滑动窗口机制可以很方便 ...

  7. xshell使用小技巧

    1. 方便复制:Tool -->  options --> right buttion(paste the clipboard contents) and copy selected te ...

  8. 用101000张食物图片实现图像识别(数据的获取与处理)-python-tensorflow框架

    前段时间,日剧<轮到你了>大火,作为程序员的我,看到了另外一个程序员—二阶堂,他的生活作息,以及饮食规律,让我感同身受,最让我感触的是他做的AI聊天机器人,AI菜品分析机器人,AI罪犯分析 ...

  9. 磁盘告警之---神奇的魔法(Sparse file)

      一.问题来源 半夜钉钉接到告警,某台机器的磁盘使用率少于20%,于是迷糊中爬起来,咔咔咔 find / -size +1G,咔咔咔,把几个只有4-5G的日志文件echo空值了一下,然后吓蒙了,刚刚 ...

  10. Java方法调用的字节码指令学习

    Java1.8环境下,我们在编写程序时会进行各种方法调用,虚拟机在执行这些调用的时候会用到不同的字节码指令,共有如下五种: invokespecial:调用私有实例方法: invokestatic:调 ...