본문으로 바로가기 본문 바로가기
WIKI 기술 지식 베이스

Rate 별점

원문 보기 위키 갱신

등급을 매기는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

사용자가 제품에 점수를 매길 때 사용할 수 있어요.

읽기 전용 모드

:::demo

<template>
  <d-rate :read="true" v-model="valueReadonly" />
</template>
<script>
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const valueReadonly = ref(3.5);

    return {
      valueReadonly,
    };
  },
});
</script>

:::

동적 모드

:::demo

<template>
  <d-rate v-model="valueDynamic" icon="star-o" />
</template>
<script>
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const valueDynamic = ref(2);

    return {
      valueDynamic,
    };
  },
});
</script>

:::

동적 모드 - 커스터마이즈

:::demo

<template>
  <d-rate character="A" color="#ffa500" v-model="valueCustom" :count="6" />
</template>
<script>
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const valueCustom = ref(3);

    return {
      valueCustom,
    };
  },
});
</script>

:::

절반 선택 모드

:::demo

<template>
  <d-rate v-model="valueHalf" :allow-half="true" @change="change" />
</template>
<script>
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const valueHalf = ref(2.5);

    const change = (val) => {
      console.log(val);
    };

    return {
      valueHalf,
      change,
    };
  },
});
</script>

:::

type 파라미터 사용하기

:::demo

<template>
  <div>
    <d-rate v-model="value1" :read="true" type="success" :count="5" icon="star" />
  </div>
  <div>
    <d-rate v-model="value2" :read="true" type="warning" :count="5" icon="star" />
  </div>
  <div>
    <d-rate v-model="value3" :read="true" type="error" :count="5" />
  </div>
</template>
<script>
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const value1 = ref(3.5);
    const value2 = ref(2);
    const value3 = ref(3);

    return {
      value1,
      value2,
      value3,
    };
  },
});
</script>

:::

Rate 파라미터

파라미터 타입 기본값 설명 Demo 링크
read boolean false 선택, 읽기 전용 모드 설정. 읽기 전용 모드에서는 상호작용 불가 읽기 전용 모드
count number 5 선택, 전체 등급 수 설정 읽기 전용 모드
type RateStatusType -- 선택, 현재 평점 타입 설정. 타입마다 색상이 다름 type 파라미터 사용
color string -- 선택, 별 색상 동적 모드-커스텀
icon string -- 선택, 평점 아이콘 스타일. devUI 아이콘 라이브러리의 모든 아이콘만 지원 동적 모드
character string -- 선택, 평점 아이콘 스타일. icon과 character 중 하나만 설정 가능 동적 모드-커스텀
allow-half boolean false 선택, 동적 모드에서 반선택 허용 여부 반선택 모드

Rate 이벤트

이벤트명 타입 설명 콜백 파라미터 Demo 링크
change EventEmitter<number> 점수 변경 시 트리거 변경 후 점수 반선택 모드

Rate 타입 정의

RateStatusType

type RateStatusType = 'success' | 'warning' | 'error';

더 알아보기 (Learn more)

read로 읽기 전용 표시를 바꾸고, character·icon·color로 별 모양과 색을 자유롭게 꾸밀 수 있어요. allow-half를 켜면 0.5 단위 점수도 입력할 수 있어요.