采用 uniapp 實現的一款簡約美觀的星級評分模板，提供絲滑動畫效果，用戶可根據自身需求進行自定義修改、擴展，純CSS、HTML實現，支持web、H5、微信小程序（其他小程序請自行測試）

可到插件市場下載嘗試： https://ext.dcloud.net.cn/plugin?id=23736

• 示例

  • 微信小程序端效果
    

  • H5端效果
    

props 屬性

selectedStar

默認值選中星級

selectedStar: {type: number,default: 0,
},

level

最高等級

level: {type: number,default: 5,
},

事件

@change

點擊星級變化時觸發

使用示例

vue2 寫法

<template><view style="padding: 10rpx; display: flex; flex-direction: column;row-gap: 40rpx;"><view style="display: flex; flex: auto;"><StarRating :selected-star="2" :level="3" @change="onChange"></StarRating></view><view style="display: flex; flex: auto;"><StarRating :selected-star="1" :level="5"></StarRating></view><view style="display: flex; flex: auto;"><StarRating :selected-star="5" :level="8"></StarRating></view></view>
</template><script>
import StarRating from './comp/star-rating.vue';
export default {components: {StarRating},data() {return {}},methods: {onChange(value) {console.log('Selected star rating:', value);}}
}
</script><style scoped></style>

vue3 寫法

<template><view style="padding: 10rpx; display: flex; flex-direction: column; row-gap: 40rpx;"><view style="display: flex; flex: auto;"><StarRating :selected-star="2" :level="3" @change="onChange" /></view><view style="display: flex; flex: auto;"><StarRating :selected-star="1" :level="5" /></view><view style="display: flex; flex: auto;"><StarRating :selected-star="5" :level="8" /></view></view>
</template><script setup>
import StarRating from './comp/star-rating.vue';function onChange(value) {console.log('Selected star rating:', value);
}
</script><style scoped></style>