1、本文五角星采用的阿里巴巴矢量圖標(biāo)庫；
2、數(shù)據(jù)內(nèi)容可根據(jù)實際需求進行改動；
3、主要實現(xiàn)了鼠標(biāo)滑動改變樣式，鼠標(biāo)離開樣式消失，鼠標(biāo)點擊對應(yīng)的五角星樣式被改變及完成評價；
4、本文章只是簡單的實現(xiàn)了功能，僅做參考！

<!doctype html>
<html lang="en">
<head>
?? ?<meta charset="UTF-8">
?? ?<title>五星評價（Vue組件）</title>
?? ?<!-- 引入阿里矢量圖標(biāo) -->
?? ?<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>
?? ?// 創(chuàng)建局部組件
?? ?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:{
?? ??? ??? ?// 鼠標(biāo)進入觸發(fā),接收參數(shù)
?? ??? ??? ?change(n){
?? ??? ??? ??? ?// 判斷用戶是否點擊過
?? ??? ??? ??? ?if(!this.flag){
?? ??? ??? ??? ??? ?// 沒有點擊過,改變樣式
?? ??? ??? ??? ??? ?this.activeIndex = n;
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?// 鼠標(biāo)離開時觸發(fā)
?? ??? ??? ?unchange(){
?? ??? ??? ??? ?// 判斷用戶是否點擊過
?? ??? ??? ??? ?if(!this.flag){
?? ??? ??? ??? ??? ?// 沒點擊過,鼠標(biāo)離開后樣式消失
?? ??? ??? ??? ??? ?this.activeIndex = -1;
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?// 點擊時觸發(fā),接收參數(shù)
?? ??? ??? ?fix(n){
?? ??? ??? ??? ?// 賦值
?? ??? ??? ??? ?this.activeIndex = n;
?? ??? ??? ??? ?// 改變狀態(tài)
?? ??? ??? ??? ?this.flag = true;
?? ??? ??? ?}
?? ??? ?}
?? ?}
?? ?new Vue({
?? ??? ?// 掛載元素
?? ??? ?el:".box",
?? ??? ?// 注冊組件
?? ??? ?components:{
?? ??? ??? ?star:star
?? ??? ?}
?? ?})?? ?
</script>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: