Vuetify - Звездные рейтинги

Vuetify - популярный UI-фреймворк для приложений Vue.

В этой статье мы рассмотрим, как работать с фреймворком Vuetify.

Рейтинги

Компонент v-rating позволяет нам добавлять в наше приложение рейтинг в звездочках.

Чтобы использовать это, мы можем написать:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" small></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4,
  }),
};
</script>

v-model имеет значение рейтинга.

background-color имеет цвет заливки.

color имеет цвет контура.

small делает звезды очень маленькими.

Мы также можем установить размер large, x-large и size prop.

Свойство size позволяет нам устанавливать звезды на любое значение размера в пикселях.

Нестандартная длина

Мы можем изменить количество отображаемых звезд.

Для этого мы используем опору length:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" :length="10"></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4,
  }),
};
</script>

Мы устанавливаем length на 10, поэтому мы видим 10 звезд.

Увеличенный

Мы можем добавить полные значки, половинные значки или пустые значки.

Например, мы можем написать:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" half-increments></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4.5,
  }),
};
</script>

Опора half-increments позволяет нам добавлять половинки звезд.

Поэтому, когда мы установим rating на 4,5, мы увидим 4,5 звезды.

Слоты

Мы можем заполнить ячейки звездочек, чтобы настроить звезды по своему желанию.

Например, мы можем написать:

<template>
  <div class="text-center">
    <v-rating v-model="rating">
      <template v-slot:item="props">
        <v-icon
          :color="props.isFilled ? genColor(props.index) : 'grey lighten-1'"
          large
          @click="props.click"
        >{{ props.isFilled ? 'mdi-star-circle' : 'mdi-circle-outline' }}</v-icon>
      </template>
    </v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    colors: ["green", "purple", "orange", "indigo", "red"],
    rating: 4.5,
  }),
  methods: {
    genColor(i) {
      return this.colors[i];
    },
  },
};
</script>

У нас есть свойство isFilled из реквизита слота, чтобы определить, должна ли звезда быть заполнена или нет.

Метод click можно передать в директиву @click в качестве обработчика кликов.

Таким образом, когда мы щелкнем по нему, мы увидим значение, отображаемое звездочками.

Мы получаем разные цвета от разных звезд, возвращая название цвета из метода genColor.

Рейтинги карт

Мы можем поместить на карту v-rating компонент.

Например, мы можем написать:

<template>
  <v-card class="mx-auto elevation-20" color="purple" dark style="max-width: 400px;">
    <v-row justify="space-between">
      <v-col cols="8">
        <v-card-title>
          <div>
            <div class="headline">Song</div>
          </div>
        </v-card-title>
      </v-col>
      <v-col cols="4">
        <v-img
          class="shrink ma-2"
          contain
          height="125px"
          src="https://randomuser.me/api/portraits/women/68.jpg"
          style="flex-basis: 125px"
        ></v-img>
      </v-col>
    </v-row>
    <v-divider dark></v-divider>
    <v-card-actions class="pa-4">
      Rate this album
      <v-spacer></v-spacer>
      <span class="grey--text text--lighten-2 caption mr-2">({{ rating }})</span>
      <v-rating
        v-model="rating"
        background-color="white"
        color="yellow accent-4"
        dense
        half-increments
        hover
        size="18"
      ></v-rating>
    </v-card-actions>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4.5,
  }),
  methods: {
    genColor(i) {
      return this.colors[i];
    },
  },
};
</script>

Мы помещаем компонент v-rating в v-card-actions, чтобы он отображался в нижней части карточки.

Заключение

Мы можем добавить компонент v-rating, чтобы добавить в наше приложение рейтинг в звездочках.

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube!