Vue实现星级评价效果
更新时间：2022年03月07日 08:26:29 作者：조국화
这篇文章主要为大家详细介绍了Vue实现星级评价效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现星级评价效果的具体代码，供大家参考，具体内容如下
1、本文五角星采用的阿里巴巴矢量图标库；
2、数据内容可根据实际需求进行改动；
3、主要实现了鼠标滑动改变样式，鼠标离开样式消失，鼠标点击对应的五角星样式被改变及完成评价；
4、本文章只是简单的实现了功能，仅做参考！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五星评价（Vue组件）</title>
<!-- 引入阿里矢量图标 -->
<link rel="stylesheet" href="./iconfont.css" >
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.box{
width:400px;
height: 100px;
border: 1px solid black;
margin:0 auto;
}
.box .icon-wjxb{
font-size:44px;
line-height: 100px;
color:grey;
padding: 0 10px;
}
.box .active{
color:yellow;
}
</style>
</head>
<body>
<!-- 星级评价板块 -->
<div class="box">
<star></star>
</div>
</body>
<script>
// 创建局部组件
var star = {
// 子模版
template:`<div>
<span class="iconfont icon-wjxb" v-for="n in 5" @mouseenter="change(n)" @mouseleave="unchange" :class="{'active':activeIndex>=n}" @click="fix(n)"></span>
</div>`,
data(){
return {
activeIndex:-1, // 用来判断什么时候改变样式
flag:false // 用来验证用户是否点击过
}
},
methods:{
// 鼠标进入触发,接收参数
change(n){
// 判断用户是否点击过
if(!this.flag){
// 没有点击过,改变样式
this.activeIndex = n;
}
},
// 鼠标离开时触发
unchange(){
// 判断用户是否点击过
if(!this.flag){
// 没点击过,鼠标离开后样式消失
this.activeIndex = -1;
}
},
// 点击时触发,接收参数
fix(n){
// 赋值
this.activeIndex = n;
// 改变状态
this.flag = true;
}
}
}
new Vue({
// 挂载元素
el:".box",
// 注册组件
components:{
star:star
}
})
</script>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家详细介绍了vue + elementui实现表格多级表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了使用Vant实现数据分页及下拉加载方式。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
Vue + better-scroll 实现移动端字母索引导航功能
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue + better-scroll 实现移动端字母索引导航功能,需要的朋友可以参考下2018-05-05
今天小编就为大家分享一篇vue-dplayer 视频播放器实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
再做前端页面的时候,想获取本地的ip地址,可能是为了和服务器通信,可能是为了展示,无论哪种,下面给大家总结下方法,这篇文章主要给大家介绍了关于vue前端获取本地IP地址的相关资料,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue 函数调用加括号与不加括号的区别,帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了vue3在router中使用store报错解决方案,就是需要在实例化一下,因为在编译router的时候pinia还未被实例化,文中补充介绍了vue3中router和store详细使用教程方法,感兴趣的朋友一起看看吧2023-11-11
在 Vue 3 中，父子组件之间进行通信有多种方式，下面简单介绍下常见的方式及其用法和使用场景，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2024-01-01
这篇文章主要介绍了Vue3中watch的详解,主要包括Vue2使用watch及Vue3使用watch的方法，通过多种情况实例代码相结合给大家详细讲解，需要的朋友可以参考下2022-11-11
最新评论