element-plus/website/docs/jp/rate.md

レート

レーティングに使用

基本的な使い方

:::demo レートはレーティングスコアをいくつかのレベルに分割し、異なる背景色を使うことでこれらのレベルを区別することができます。デフォルトでは背景色は同じですが、colors属性を用いて 3 つのレベルを反映させるために 3 つの要素を持つ配列を割り当てることができ、2 つのしきい値はlow-thresholdとhigh-thresholdで定義することができます。または、2 つのレベル間のしきい値をキー、値を対応する色とするオブジェクトで割り当てることができます。

<div class="block">
  <span class="demonstration">Default</span>
  <el-rate v-model="value1"></el-rate>
</div>
<div class="block">
  <span class="demonstration">Color for different levels</span>
  <el-rate v-model="value2" :colors="colors"> </el-rate>
</div>

<script>
  export default {
    data() {
      return {
        value1: null,
        value2: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'], // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      return {
        value1: ref(null),
        value2: ref(null),
        colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']), // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      };
    },
  });

</setup>
-->

:::

半選を許す

:::demo 属性 allow-half 半星の出現を許す

<div class="block">
  <el-rate v-model="value" allow-half />
</div>

<script>
  export default {
    data() {
      return {
        value: null,
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      return {
        value: ref(null),
      };
    },
  });

</setup>
-->

:::

テキスト付き

評価点を示すためのテキストの使用

:::demo 属性 show-text を追加して、Rate の右にテキストを表示するようにします。テキストは texts を使って異なるスコアに割り当てることができます。texts は配列で、長さが最大スコアの max と等しくなければなりません。

<el-rate
  v-model="value"
  :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
  show-text
>
</el-rate>

<script>
  export default {
    data() {
      return {
        value: null,
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      return {
        value: ref(null),
      };
    },
  });

</setup>
-->

:::

その他のアイコン

異なるレートコンポーネントを区別するために、異なるアイコンを使用することができます。

:::demo icon-classes には 3 つの要素を持つ配列か、2 つのレベルの間のしきい値をキー、値を対応するアイコンクラスとするオブジェクトを渡すことで、アイコンをカスタマイズすることができます。この例では、非選択時にアイコンを設定するために void-icon-class を利用しています。

<el-rate
  v-model="value"
  :icon-classes="iconClasses"
  void-icon-class="icon-rate-face-off"
  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
>
</el-rate>

<script>
  export default {
    data() {
      return {
        value: null,
        iconClasses: [
          'icon-rate-face-1',
          'icon-rate-face-2',
          'icon-rate-face-3',
        ], // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      return {
        value: ref(null),
        iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']) // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
      };
    },
  });

</setup>
-->

:::

読み取り専用

読み取り専用 Rate はレーティングスコアを表示するためのものです。半分星に対応しています。

:::demo 属性 disabled を用いてコンポーネントを読み取り専用にする。右側にレーティングスコアを表示するために show-score を追加します。さらに、属性 score-template を用いてスコアのテンプレートを提供することもできます。これは {value} を含んでいなければならず、{value} はレーティングスコアに置き換えられます。

<el-rate
  v-model="value"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value} points"
>
</el-rate>

<script>
  export default {
    data() {
      return {
        value: 3.7,
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      return {
        value: ref(3.7),
      };
    },
  });

</setup>
-->

:::

属性

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	バインディング値	number	—	0
max	最大レーティングスコア	number	—	5
disabled	レートが読み取り専用かどうか	boolean	—	false
allow-half	ピッキングハーフスタートが許可されているか	boolean	—	false
low-threshold	低レベルと中レベルの間のしきい値。値自体は、低レベルに含まれる	number	—	2
high-threshold	中レベルと高レベルの間のしきい値。値自体は、中レベルに含まれる	number	—	4
colors	アイコンの色を指定します。配列の場合は 3 つの要素を持ち、それぞれがスコアレベルに対応していなければなりません。 オブジェクトの場合は、キーは 2 つのレベル間のしきい値で、値は対応する色でなければなりません。	array/object	—	['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color	非選択アイコンの色	string	—	#C6D1DE
disabled-void-color	非選択時の読み取り専用アイコンの色	string	—	#EFF2F7
icon-classes	アイコンのクラス名を指定します。array の場合は 3 つの要素を持ち、それぞれがスコアレベルに対応していなければなりませんが、object の場合は 2 つのレベル間の閾値がキーとなり、その値が対応するアイコンクラスとなります。	array/object	—	['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
void-icon-class	非選択アイコンのクラス名	string	—	el-icon-star オブジェクト
disabled-void-icon-class	非選択時読み取り専用アイコンのクラス名	string	—	el-icon-star-on
show-text	テキスト表示の有無	boolean	—	false
show-score	現在のスコアを表示するかどうか。show-score と show-text は同時に true にすることはできません。	boolean	—	false
text-color	テキストの色	string	—	#1F2D3D
texts	テキストの配列	array	—	['极差', '失望', '一般', '满意', '惊喜']
score-template	スコアテンプレート	string	—	{value}

イベント

Event Name	Description	Parameters
change	レート値が変更されたときにトリガ	value after changing