背景

現在的大多數評分元件是精確到半顆星星的，例如：antd的評分元件

但是如果遇到精確細節的產品，他會要求成這樣精確到小數位

大眾點評也是這樣的

想要做到細緻到小數的效果要怎麼做呢？我找了大量素材沒有找到合適的解決方案，於是決定自己搞下

零·素材準備

• 一個星星的鏤空png影象 (因為是透明的，需要的小夥伴檢視原始碼可見圖片)

• 兩個設計給你的顏色對比值

• 瞭解下Css漸變的

壹·邏輯概述

貳·星星評分元件

2.1外部計算元件

根據傳入引數計算出滿星，小數點星星以及灰色星星的個數
呼叫星星渲染函式

• 滿星則100填充高亮
• 小數點星星傳入處理後的漸變百分比
• 灰色星星則無資料傳入

2.2 星星填充元件

• 根據出入的數字判斷是否使用漸變色
• div checked-star-box 為相對定位，內部元素絕對定位在統一位置
• 利用png的透明屬性+z-index設定，底部疊加填充漸變色
  

2.3 使用樣式

以下是元件內使用的樣式

總結

我剛開始的時候也沒有思路，設計也說要不先按半個星星的方案，因為網上大都是半顆星星，我查詢了大多的評分方案，或是上層填色位置移動或是jquery實現的半顆星星，，我想著先試試，不行就用半顆星星，經過調研，我觀察到進度條是符合小數點的，感覺完全可以按照進度條去做，最後蓋個罩子，不給他顯示成長方形就行了，根據這個思路，果然實現了小數級別的星星評分，從此經歷得出了以下的總結：

• 不要因為設計把自己困在已有的思維裡，要打破思維的牆，從不同角度看問題
• 要勇於嘗試，你開始去做了，就成功了80%