评分组件

QRating 是一个允许用户对项目进行评分的组件。

QRating API

QRating API
icon-aria-label
: String | Array
v1.20.3+
说明
在 Icon 上设置的 aria-label 的标签；如果提供了一个数组，每个评分值将使用数组中对应的 aria-label（从0开始）；如果提供了字符串值，则评分值将被追加；如果未提供，则将使用图标的名称。

用法

基础

<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-model="ratingModel"
        size="1.5em"
        icon="thumb_up"
      />
      <q-rating
        v-model="ratingModel"
        size="2em"
        color="red-7"
        icon="favorite_border"
      />
      <q-rating
        v-model="ratingModel"
        size="2.5em"
        color="purple-4"
        icon="create"
      />
      <q-rating
        v-model="ratingModel"
        size="3em"
        color="brown-5"
        icon="pets"
      />
      <q-rating
        v-model="ratingModel"
        size="3.5em"
        color="green-5"
        icon="star_border"
      />
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <q-rating
      v-model="ratingModel"
      size="2em"
      :max="10"
      color="primary"
    />
  </div>
</template>

图标

<template>
  <div class="q-pa-md">
    <q-rating
      v-model="ratingModel"
      size="3.5em"
      icon="img:https://cdn.quasar.dev/logo-v2/svg/logo.svg"
    />
  </div>
</template>

在下面的示例中，我们使用了 icon-selected 属性，但是请注意我们仍然可以使用 icon 属性，此时 icon 属性会成为未被选中时的图标。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-model="ratingModel"
        size="3.5em"
        color="green-5"
        icon="star_border"
        icon-selected="star"
      />
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-model="ratingModel"
        :max="4"
        size="3.5em"
        color="green-5"
        :icon="icons"
      />
    </div>
  </div>
</template>

颜色

在下面的示例中，我们使用了 color-selected 属性，但是请注意我们仍然可以使用 color 属性，此时 color 属性会成为未被选中时的颜色。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-model="ratingModel"
        size="3.5em"
        color="grey"
        :color-selected="ratingColors"
      />
    </div>
  </div>
</template>

浮点数评分

<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-model="model1"
        max="7"
        size="3em"
        color="green-5"
        icon="star_border"
        icon-selected="star"
        icon-half="star_half"
      />

      <q-rating
        v-model="model2"
        max="7"
        size="3em"
        color="yellow"
        icon="star_border"
        icon-selected="star"
        icon-half="star_half"
        no-dimming
      />

      <q-rating
        v-model="model3"
        max="7"
        size="3em"
        color="red"
        color-selected="red-9"
        icon="favorite_border"
        icon-selected="favorite"
        icon-half="favorite"
        no-dimming
      />

      <div>
        <q-btn
          color="grey"
          no-caps
          label="Reset"
          @click="resetModels"
        />
      </div>
    </div>
  </div>
</template>

没有调光

<template>
  <div class="q-pa-md">
    <q-rating
      v-model="model"
      max="5"
      size="3.5em"
      color="yellow"
      icon="star_border"
      icon-selected="star"
      icon-half="star_half"
      no-dimming
    />
  </div>
</template>

悬浮提示

我们可以为每个图标添加一个提示，如下所示:

<template>
  <div class="q-pa-md">
    <q-rating
      v-model="ratingModel"
      size="2em"
      :max="3"
      color="primary"
    >
      <template v-slot:tip-1>
        <q-tooltip>Not bad</q-tooltip>
      </template>
      <template v-slot:tip-2>
        <q-tooltip>Good</q-tooltip>
      </template>
      <template v-slot:tip-3>
        <q-tooltip>Very good!</q-tooltip>
      </template>
    </q-rating>
  </div>
</template>

尺寸

除了下述标准尺寸，您还可以使用 size 属性设置自定义的尺寸。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']"
        :key="size"
        :size="size"
        v-model="ratingModel"
        icon="stars"
        color="primary"
      />
    </div>
  </div>
</template>

只读和禁用

<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-model="ratingModel"
        size="2em"
        color="orange"
        readonly
      />

      <q-rating
        v-model="ratingModel"
        size="2em"
        color="purple"
        disable
      />
    </div>
  </div>
</template>

原生表单提交

当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QRating 声明 name 属性，否则表单数据中不会包含它：

<template>
  <div class="q-pa-md">
    <q-form @submit="onSubmit" class="q-gutter-md">
      <q-rating
        name="quality"
        v-model="quality"
        max="5"
        size="3.5em"
        color="yellow"
        icon="star_border"
        icon-selected="star"
        no-dimming
      />

      <div>
        <q-btn label="Submit" type="submit" color="primary"/>
      </div>
    </q-form>

    <q-card v-if="submitResult.length > 0" flat bordered class="q-mt-md bg-grey-2">
      <q-card-section>Submitted form contains the following formData (key = value):</q-card-section>
      <q-separator />
      <q-card-section class="row q-gutter-sm items-center">
        <div
          v-for="(item, index) in submitResult"
          :key="index"
          class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
        >{{ item.name }} = {{ item.value }}</div>
      </q-card-section>
    </q-card>
  </div>
</template>
查看更多？
Vue 组件
Pull to refresh 下拉刷新
Vue 组件
Responsive 响应式
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。