https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-1206991964907791&output=html&h=123&slotname=2973502020&adk=805893055&adf=1869670693&pi=t.ma~as.2973502020&w=710&lmt=1657811932&rafmt=11&psa=1&format=710×123&url=https%3A%2F%2Fwww.vue365.cn%2Fvue-awesome-vue-star-rating%2F&wgl=1&uach=WyJXaW5kb3dzIiwiMTAuMC4wIiwieDg2IiwiIiwiMTAzLjAuNTA2MC4xMTQiLFtdLG51bGwsbnVsbCwiNjQiLFtbIi5Ob3QvQSlCcmFuZCIsIjk5LjAuMC4wIl0sWyJHb29nbGUgQ2hyb21lIiwiMTAzLjAuNTA2MC4xMTQiXSxbIkNocm9taXVtIiwiMTAzLjAuNTA2MC4xMTQiXV0sZmFsc2Vd&dt=1657811929814&bpp=1&bdt=275&idt=73&shv=r20220707&mjsv=m202207110101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D7adac311d71d589a-2206bbd22cd5004d%3AT%3D1657808821%3ART%3D1657808821%3AS%3DALNI_MZIFrD9uYIZobeQHdW48rqzJikZ8A&gpic=UID%3D000007b293c1ee54%3AT%3D1657808821%3ART%3D1657808821%3AS%3DALNI_MaNpzjzEkBkSOPV-V6xdmztGGFCzA&prev_fmts=0x0%2C1109x263%2C1065x130%2C290x600%2C290x600%2C710x123&nras=1&correlator=8045453267550&frm=20&pv=1&ga_vid=1991984896.1657811930&ga_sid=1657811930&ga_hid=1573606581&ga_fc=0&u_tz=480&u_his=1&u_h=1080&u_w=1920&u_ah=1040&u_aw=1920&u_cd=24&u_sd=1&dmc=8&adx=412&ady=1601&biw=1903&bih=937&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C44759842%2C31068381%2C42531605%2C42531607%2C31061690&oid=2&pvsid=2677770257281324&tmod=845795112&uas=0&nvt=1&ref=https%3A%2F%2Fwww.vue365.cn%2Frating-plugins%2F&eae=0&fc=1920&brdim=0%2C0%2C0%2C0%2C1920%2C0%2C0%2C0%2C1920%2C937&vis=1&rsz=%7C%7CpeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=5&uci=a!5&btvi=2&fsb=1&xpc=ehfDiqp4N6&p=https%3A//www.vue365.cn&dtd=2959

使用Pure Vue应用程序，无需任何外部程序包，即可轻松实现可定制的Awesome Vue Star Rating。

特征

1. 字体图标星星-缩放而不会损失质量
2. 可自定义的评分和评分说明
3. 选定值和描述的可定制结果
4. 可自定义的星数
5. 创建只读星
6. 可自定义的颜色

安装

npm install --save awesome-vue-star-rating

用法

步骤1：在我们的组件中导入AwesomeVueStarRating

import AwesomeVueStarRating from 'awesome-vue-star-rating' export default {  name: 'app',  components: {    AwesomeVueStarRating  }}</script>

步骤2：将默认值加载到组件

data() {    return {      star: 5, // default star      ratingdescription: [        {          text: 'Poor',          class: 'star-poor'        },        {          text: 'Below Average',          class: 'star-belowAverage'        },        {          text: 'Average',          class: 'star-average'        },        {          text: 'Good',          class: 'star-good'        },        {          text: 'Excellent',          class: 'star-excellent'        }      ],      hasresults: true,      hasdescription: true,      starsize: 'lg', //[xs,lg,1x,2x,3x,4x,5x,6x,7x,8x,9x,10x],      maxstars: 5,      disabled: false    }}

步骤3：将Rate组件放置在模板中

<template>  <div id="app">    <AwesomeVueStarRating :star="this.star" :disabled="this.disabled" :maxstars="this.maxstars" :starsize="this.starsize" :hasresults="this.hasresults" :hasdescription="this.hasdescription" :ratingdescription="this.ratingdescription" />  </div></template>

第4步：自定义星形颜色样式，如下所示

<style lang="scss"> .star {  color: red; } .star.active {  color: red; } .list, .list.disabled {  &:hover {    .star {      color: red !important;    }    .star.active {      color: red;    }  }}</style>

编译和热重装以进行开发

npm run serve