评分

评级组件是构建用户小部件时的专门但至关重要的部分。 通过评级收集用户反馈是一种简单的分析，可以为您的产品或应用程序提供大量反馈。

用例

v-rating 组件提供了一个用于收集用户反馈的简单接口。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-rating v-model="rating"></v-rating>
  4.   </div>
  5. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       rating: 3,
  5.     }),
  6.   }
  7. </script>

Ratings（评分） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Ratings（评分） - 图2

实战场

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-text-field
  4.       v-model="fullIcon"
  5.       color="red darken-4"
  6.       label="Full icon"
  7.     ></v-text-field>
  8.     <v-text-field
  9.       v-model="halfIcon"
  10.       :disabled="!halfIncrements"
  11.       color="red darken-4"
  12.       label="Half icon"
  13.     ></v-text-field>
  14.     <v-text-field
  15.       v-model="emptyIcon"
  16.       color="red darken-4"
  17.       label="Empty icon"
  18.     ></v-text-field>
  19.     <v-row>
  20.       <v-switch
  21.         v-model="halfIncrements"
  22.         class="ma-2"
  23.         color="red darken-4"
  24.         label="Half increments"
  25.       ></v-switch>
  26.       <v-switch
  27.         v-model="hover"
  28.         class="ma-2"
  29.         color="red darken-4"
  30.         label="Hover"
  31.       ></v-switch>
  32.       <v-switch
  33.         v-model="readonly"
  34.         class="ma-2"
  35.         color="red darken-4"
  36.         label="Readonly"
  37.       ></v-switch>
  38.       <v-switch
  39.         v-model="dense"
  40.         class="ma-2"
  41.         color="red darken-4"
  42.         label="Dense"
  43.       ></v-switch>
  44.     </v-row>
  45.     <v-slider
  46.       v-model="length"
  47.       color="red darken-4"
  48.       min="1"
  49.       max="15"
  50.       label="Custom length"
  51.     ></v-slider>
  52.     <v-slider
  53.       v-model="rating"
  54.       color="blue darken-4"
  55.       min="0"
  56.       :max="length"
  57.       :step="halfIncrements ? 0.5 : 1"
  58.       label="Value"
  59.     ></v-slider>
  60.     <v-slider
  61.       v-model="size"
  62.       color="green darken-4"
  63.       min="0"
  64.       max="100"
  65.       label="Size"
  66.     ></v-slider>
  67.     <v-autocomplete
  68.       v-model="color"
  69.       :items="colors"
  70.       label="Color"
  71.     ></v-autocomplete>
  72.     <v-autocomplete
  73.       v-model="bgColor"
  74.       :items="bgColors"
  75.       label="Background color"
  76.     ></v-autocomplete>
  77.     <v-rating
  78.       v-model="rating"
  79.       :length="length"
  80.       :empty-icon="emptyIcon"
  81.       :full-icon="fullIcon"
  82.       :half-icon="halfIcon"
  83.       :half-increments="halfIncrements"
  84.       :hover="hover"
  85.       :readonly="readonly"
  86.       :size="size"
  87.       :dense="dense"
  88.       :color="color"
  89.       :background-color="bgColor"
  90.     ></v-rating>
  91.     <div>
  92.       <span class="caption text-uppercase">model:</span>
  93.       <span class="font-weight-bold">
  94.         {{ rating }}
  95.       </span>
  96.     </div>
  97.   </div>
  98. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       emptyIcon: 'mdi-heart-outline',
  5.       fullIcon: 'mdi-heart',
  6.       halfIcon: 'mdi-heart-half-full',
  7.       halfIncrements: false,
  8.       hover: true,
  9.       length: 5,
  10.       rating: 2,
  11.       readonly: false,
  12.       size: 64,
  13.       dense: false,
  14.       color: 'red lighten-3',
  15.       colors: [
  16.         'primary',
  17.         'warning',
  18.         'green',
  19.         'red',
  20.         'blue',
  21.         'error',
  22.         'teal',
  23.         'red lighten-3',
  24.       ],
  25.       bgColor: 'grey lighten-1',
  26.       bgColors: [
  27.         'grey lighten-2',
  28.         'warning lighten-1',
  29.         'green lighten-2',
  30.         'red lighten-2',
  31.         'grey',
  32.         '#eee',
  33.         'cyan lighten-2',
  34.         'grey lighten-1',
  35.       ],
  36.     }),
  37.   }
  38. </script>

Ratings（评分） - 图3

示例

下面是一些简单到复杂的例子。

大小变量

使用 v-icon 中可用的相同大小调整类，或为您自己提供 size 属性。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-rating
  4.       v-model="rating"
  5.       background-color="purple lighten-3"
  6.       color="purple"
  7.       small
  8.     ></v-rating>
  9.     <v-rating
  10.       v-model="rating"
  11.       background-color="pink lighten-3"
  12.       color="pink"
  13.     ></v-rating>
  14.     <v-rating
  15.       v-model="rating"
  16.       background-color="orange lighten-3"
  17.       color="orange"
  18.       medium
  19.     ></v-rating>
  20.     <v-rating
  21.       v-model="rating"
  22.       background-color="green lighten-3"
  23.       color="green"
  24.       large
  25.     ></v-rating>
  26.     <v-rating
  27.       v-model="rating"
  28.       background-color="red lighten-3"
  29.       color="red"
  30.       x-large
  31.     ></v-rating>
  32.     <v-rating
  33.       v-model="rating"
  34.       background-color="indigo lighten-3"
  35.       color="indigo"
  36.       size="64"
  37.     ></v-rating>
  38.   </div>
  39. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       rating: 4,
  5.     }),
  6.   }
  7. </script>

Ratings（评分） - 图4

色彩

v-rating 组件可以根据需要进行着色，可以设置选定和未选定的颜色。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-rating
  4.       v-model="rating"
  5.       background-color="purple lighten-3"
  6.       color="purple"
  7.     ></v-rating>
  8.     <v-rating
  9.       v-model="rating"
  10.       background-color="pink lighten-3"
  11.       color="pink"
  12.     ></v-rating>
  13.     <v-rating
  14.       v-model="rating"
  15.       background-color="orange lighten-3"
  16.       color="orange"
  17.     ></v-rating>
  18.     <v-rating
  19.       v-model="rating"
  20.       background-color="green lighten-3"
  21.       color="green"
  22.     ></v-rating>
  23.     <v-rating
  24.       v-model="rating"
  25.       background-color="red lighten-3"
  26.       color="red"
  27.     ></v-rating>
  28.     <v-rating
  29.       v-model="rating"
  30.       background-color="indigo lighten-3"
  31.       color="indigo"
  32.     ></v-rating>
  33.   </div>
  34. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       rating: 4,
  5.     }),
  6.   }
  7. </script>

Ratings（评分） - 图5

自定义长度

有时应用程序会调用自定义实现。轻松改变长度或显示图标。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-slider
  4.       v-model="length"
  5.       color="red darken-4"
  6.       min="1"
  7.       max="15"
  8.       label="Custom length"
  9.     ></v-slider>
  10.     <v-rating
  11.       v-model="rating"
  12.       :length="length"
  13.       color="red lighten-3"
  14.       background-color="grey lighten-1"
  15.     ></v-rating>
  16.     <div>
  17.       <span class="caption text-uppercase">model:</span>
  18.       <span class="font-weight-bold">
  19.         {{ rating }}
  20.       </span>
  21.     </div>
  22.   </div>
  23. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       length: 5,
  5.       rating: 2,
  6.     }),
  7.   }
  8. </script>

Ratings（评分） - 图6

增量

评分可以包含 3 个已定义的图标：full-icon, half-icon（带有 half-increments 属性）和 empty-icon。

template script

  1. <template>
  2.   <v-card
  3.     class="elevation-16 mx-auto"
  4.     width="300"
  5.   >
  6.     <v-card-title
  7.       class="headline"
  8.       primary-title
  9.     >
  10.       Rate Our Framework
  11.     </v-card-title>
  12.     <v-card-text>
  13.       If you enjoy using Vuetify, please take a few seconds to rate your experience with the framework. It really helps!
  15.       <div class="text-center mt-12">
  16.         <v-rating
  17.           v-model="rating"
  18.           color="yellow darken-3"
  19.           background-color="grey darken-1"
  20.           empty-icon="$ratingFull"
  21.           half-increments
  22.           hover
  23.         ></v-rating>
  24.       </div>
  25.     </v-card-text>
  26.     <v-divider></v-divider>
  27.     <v-card-actions class="justify-space-between">
  28.       <v-btn text>No Thanks</v-btn>
  29.       <v-btn
  30.         color="primary"
  31.         text
  32.       >
  33.         Rate Now
  34.       </v-btn>
  35.     </v-card-actions>
  36.   </v-card>
  37. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       rating: 4.5,
  5.     }),
  6.   }
  7. </script>

Ratings（评分） - 图7

Light Vuetify Stickers

Stick them to your car, laptop or favorite mug. They are made from a durable vinyl with a laminate that is weather-proof against rain, sun, wind and snow, and even dishwasher safe.

ads by Vuetify

](https://store.vuetifyjs.com/product/vuetify-light-sticker?ref=vuetifyjs.com)

插槽

提供了插槽，使您在显示评分时有更大的自由度。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-rating v-model="rating">
  4.       <template v-slot:item="props">
  5.         <v-icon
  6.           :color="props.isFilled ? genColor(props.index) : 'grey lighten-1'"
  7.           large
  8.           @click="props.click"
  9.         >
  10.           {{ props.isFilled ? 'mdi-star-circle' : 'mdi-circle-outline' }}
  11.         </v-icon>
  12.       </template>
  13.     </v-rating>
  14.   </div>
  15. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       colors: ['green', 'purple', 'orange', 'indigo', 'red'],
  5.       rating: 4.5,
  6.     }),
  7.     methods: {
  8.       genColor (i) {
  9.         return this.colors[i]
  10.       },
  11.     },
  12.   }
  13. </script>

Ratings（评分） - 图8

卡片评分

评分组件与产品搭配得很好，使您可以收集和显示客户反馈。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto elevation-20"
  4.     color="purple"
  5.     dark
  6.     style="max-width: 400px;"
  7.   >
  8.     <v-row justify="space-between">
  9.       <v-col cols="8">
  10.         <v-card-title primary-title>
  11.           <div>
  12.             <div class="headline">Halycon Days</div>
  13.             <div>Ellie Goulding</div>
  14.             <div>(2013)</div>
  15.           </div>
  16.         </v-card-title>
  17.       </v-col>
  18.       <v-img
  19.         class="shrink ma-2"
  20.         contain
  21.         height="125px"
  22.         src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"
  23.         style="flex-basis: 125px"
  24.       ></v-img>
  25.     </v-row>
  26.     <v-divider dark></v-divider>
  27.     <v-card-actions class="pa-4">
  28.       Rate this album
  29.       <v-spacer></v-spacer>
  30.       <span class="grey--text text--lighten-2 caption mr-2">
  31.         ({{ rating }})
  32.       </span>
  33.       <v-rating
  34.         v-model="rating"
  35.         background-color="white"
  36.         color="yellow accent-4"
  37.         dense
  38.         half-increments
  39.         hover
  40.         size="18"
  41.       ></v-rating>
  42.     </v-card-actions>
  43.   </v-card>
  44. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       rating: 4.3,
  5.     }),
  6.   }
  7. </script>

Ratings（评分） - 图9

高级用法

v-rating 组件恰好适合现有组件。 构建具有丰富功能和精美设计的真正复杂的示例。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto overflow-hidden"
  4.     style="max-width: 600px;"
  5.   >
  6.     <v-row>
  7.       <v-col class="d-flex" cols="6">
  8.         <v-img
  9.           src="https://cdn.vuetifyjs.com/images/ratings/fortnite1.png"
  10.         ></v-img>
  11.       </v-col>
  12.       <v-col cols="6">
  13.         <v-container
  14.           class="pa-0 pl-2"
  15.           style="margin: -4px 0"
  16.         >
  17.           <v-row>
  18.             <v-col class="d-flex" cols="7">
  19.               <v-img
  20.                 src="https://cdn.vuetifyjs.com/images/ratings/fortnite2.png"
  21.               ></v-img>
  22.             </v-col>
  23.             <v-col class="d-flex" cols="5">
  24.               <v-img
  25.                 src="https://cdn.vuetifyjs.com/images/ratings/fortnite3.png"
  26.               ></v-img>
  27.             </v-col>
  28.             <v-col class="d-flex" cols="5">
  29.               <v-img
  30.                 src="https://cdn.vuetifyjs.com/images/ratings/fortnite4.png"
  31.               ></v-img>
  32.             </v-col>
  33.             <v-col class="d-flex" cols="7">
  34.               <v-img
  35.                 src="https://cdn.vuetifyjs.com/images/ratings/fortnite5.png"
  36.               ></v-img>
  37.             </v-col>
  38.           </v-row>
  39.         </v-container>
  40.       </v-col>
  41.     </v-row>
  42.     <v-card-title class="align-start">
  43.       <div>
  44.         <span class="headline">FORTNITE</span>
  45.         <div class="grey--text font-weight-light">Video game</div>
  46.       </div>
  47.       <v-spacer></v-spacer>
  48.       <v-dialog
  49.         v-model="dialog"
  50.         width="400"
  51.       >
  52.         <template v-slot:activator="{ on }">
  53.           <v-icon v-on="on">
  54.             mdi-share-variant
  55.           </v-icon>
  56.         </template>
  57.         <v-card>
  58.           <v-card-title>
  59.             <span class="title font-weight-bold">Share</span>
  60.             <v-spacer></v-spacer>
  61.             <v-btn
  62.               class="mx-0"
  63.               icon
  64.               @click="dialog = false"
  65.             >
  66.               <v-icon>mdi-close-circle-outline</v-icon>
  67.             </v-btn>
  68.           </v-card-title>
  69.           <v-list>
  70.             <v-list-item @click="">
  71.               <v-list-item-action>
  72.                 <v-icon color="indigo">mdi-facebook-box</v-icon>
  73.               </v-list-item-action>
  74.               <v-card-title>Facebook</v-card-title>
  75.             </v-list-item>
  76.             <v-list-item @click="">
  77.               <v-list-item-action>
  78.                 <v-icon color="cyan">mdi-twitter-box</v-icon>
  79.               </v-list-item-action>
  80.               <v-card-title>Twitter</v-card-title>
  81.             </v-list-item>
  82.             <v-list-item @click="">
  83.               <v-list-item-action>
  84.                 <v-icon>mdi-email</v-icon>
  85.               </v-list-item-action>
  86.               <v-card-title>Email</v-card-title>
  87.             </v-list-item>
  88.           </v-list>
  89.           <v-text-field
  90.             ref="link"
  91.             :label="copied ? 'Link copied' : 'Click to copy link'"
  92.             class="pa-4"
  93.             readonly
  94.             value="https://g.co/kgs/nkrK43"
  95.             @click="copy"
  96.           ></v-text-field>
  97.         </v-card>
  98.       </v-dialog>
  99.     </v-card-title>
  100.     <v-divider></v-divider>
  101.     <v-card-actions>
  102.       <span class="pl-2 grey--text text--darken-2 font-weight-light caption">16,544 reviews</span>
  103.       <v-spacer></v-spacer>
  104.       <v-rating
  105.         v-model="rating"
  106.         length="10"
  107.         readonly
  108.       >
  109.         <template v-slot:item="props">
  110.           <v-icon
  111.             :color="props.isFilled ? 'purple darken-4' : ''"
  112.             v-text="`mdi-numeric-${props.index}-box`"
  113.           ></v-icon>
  114.         </template>
  115.       </v-rating>
  116.     </v-card-actions>
  117.     <div class="pa-4 pt-0 caption">
  118.       <em>Portions of the materials used are trademarks and/or copyrighted works of Epic Games, Inc. All rights reserved by Epic. This material is not official and is not endorsed by Epic.</em>
  119.     </div>
  120.   </v-card>
  121. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       copied: false,
  5.       dialog: false,
  6.       rating: 10,
  7.     }),
  9.     methods: {
  10.       copy () {
  11.         const markup = this.$refs.link
  12.         markup.focus()
  13.         document.execCommand('selectAll', false, null)
  14.         this.copied = document.execCommand('copy')
  15.       },
  16.     },
  17.   }
  18. </script>

Ratings（评分） - 图10