vue2.0实现前端星星评分功能组件实例代码
栏目: 编程语言 · JavaScript · 发布时间: 6年前
内容简介：本文通过实例代码给大家介绍了vue2.0实现前端星星评分功能组件，非常不错，具有参考借鉴价值，需要的朋友参考下吧
下面给大家分享vue 2.0实现星星评分组件，代码很简单，一起看看吧！
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<template id="pingJia">
<div>
<ul>
<li :class="{li1:1,bg1:index%2}" v-for="(value,index) in list"><span class="stu_span1">
{{value.classs.major}}</span>
<span class="stu_teacher">任课老师：{{value.classs.teacher}}</span>
<div v-for="(item,index1) in value.classs.zh" class="stu_div" :id="index">
<span class="stu_title">{{item.title}}</span>
<span class="stu_bgstar" :id="index1">
<span class="stu_bgstar1" :title="value.classs.title1"></span>
<span class="stu_bgstar1" :title="value.classs.title1"></span>
<span class="stu_bgstar1" :title="value.classs.title1"></span>
<span class="stu_bgstar1" :title="value.classs.title1"></span>
<span class="stu_bgstar1" :title="value.classs.title1"></span>
</span>
<span class="stu_bgstar2" @mousemove="pingjia($event)" :title="value.classs.title1"
@click="pingjia1($event)" @mouseleave="pingjia2($event)"></span>
<span>{{item.lastD}}</span>
</div>
</li>
<button class="but1" @click="pingjia3($event)">评价</button>
</ul>
</div>
</template>
<style>
.li1{
width: 1200px;
/*height: 330px;*/
color: #f60;
border: 1px solid #000000;
font-size: 20px;
line-height: 50px;
}
.bg1{
background: #00A2D4;
}
.but1{
width: 200px;
height: 40px;
font-size: 25px;
float: right;
margin: 5px 5px;
}
.stu_span1{
float: left;
margin: 0px 25px;
}
.stu_teacher{
float: left;
}
.stu_div{
float: left;
width: 1000px;
height: 50px;
}
.stu_title{
float: left;
}
.stu_bgstar{
width: 250px;
height: 50px;
float: left;
margin-left:500px;
/*background: url(../image/star.png);*/
background-size: 50px 50px;
}
.stu_bgstar1{
width: 50px;
height: 50px;
float: left;
background: url(../image/star.png);
background-size: 50px 50px;
margin-left: 0px;
}
.stu_bgstar2{
width: 250px;
height: 50px;
float: left;
/*background: url(../image/star.png);*/
/*background-size: 50px 50px;*/
margin-left: -250px;
opacity: 0;
}
.stu_bgstar3{
background: url(../image/star1.png);
background-size: 50px 50px;
}
.stu_li_text{
width: 95%;
height: 100px;
border: 1px solid #000000;
resize: none;
}
</style>
<script>
export default{
data(){
return{
list:[{classs:{major:"数学",teacher:"郑...0",title1:0,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"语文",teacher:"郑...1",title1:1,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"英语",teacher:"郑...2",title1:2,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"数学",teacher:"郑...3",title1:3,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"数学",teacher:"郑...4",title1:4,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"数学",teacher:"郑...5",title1:5,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}}]
}
},
methods:{
pingjia($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
let a = parseInt($event.offsetX/250*100);
let c = parseFloat($event.offsetX/50);
this.list[wei].classs.zh[b].d = Math.ceil(c);
this.list[wei].classs.title1 = a;
for(let i = 0;i<5;i++){
if(i<this.list[wei].classs.zh[b].d){
$event.target.previousElementSibling.children[i].classList.add('stu_bgstar3');
}
else{
$event.target.previousElementSibling.children[i].classList.remove('stu_bgstar3');
}
}
if(a==0){
$event.target.previousElementSibling.children[0].classList.remove('stu_bgstar3');
}
},
pingjia1($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
this.list[wei].classs.zh[b].lastD = this.list[wei].classs.zh[b].d;
},
pingjia2($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
for(let i = 0;i<5;i++){
if(i<this.list[wei].classs.zh[b].lastD){
$event.target.previousElementSibling.children[i].classList.add('stu_bgstar3');
}
else{
$event.target.previousElementSibling.children[i].classList.remove('stu_bgstar3');
}
}
},
pingjia3($event){
console.log(this.list[0].classs.text);
}
}
}
</script>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
文明之光（第二册）
吴军 / 人民邮电出版社 / 2014-6 / 59.00元
【《文明之光》系列荣获由中宣部、中国图书评论学会和中央电视台联合推选的2014“中国好书”奖】 吴军博士从对人类文明产生了重大影响却在过去被忽略的历史故事里，选择了有意思的几十个片段特写，以人文和科技、经济结合的视角，有机地展现了一幅人类文明发展的宏大画卷。 《文明之光 》系列大致按照从地球诞生到近现代的顺序讲述了人类文明进程的各个阶段，每个章节相对独立，全景式地展现了人类文明发展历程......一起来看看 《文明之光（第二册）》 这本书的介绍吧!
