Vue實現(xiàn)星級評價效果
本文實例為大家分享了Vue實現(xiàn)星級評價效果的具體代碼,供大家參考,具體內(nèi)容如下
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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vuex頁面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案
這篇文章主要介紹了vuex頁面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案,幫助大家更好的使用vue框架,感興趣的朋友可以了解下2020-12-12vue動態(tài)添加路由addRoutes之不能將動態(tài)路由存入緩存的解決
這篇文章主要介紹了vue動態(tài)添加路由addRoutes之不能將動態(tài)路由存入緩存的解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序
本文主要介紹了vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05vue + typescript + 極驗登錄驗證的實現(xiàn)方法
這篇文章主要介紹了vue + typescript + 極驗 登錄驗證的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06