소개

v-chip

v-chip의 좋은 점

상한 및 새로운 추가 제어

  watch: {
    value(target: Object[]): void {
      // 上限設定
      if (target.length > 5) {
        this.$nextTick(() => target.pop());
        return;
      }

      const added = target[target.length - 1];
      // 新規追加の判断と制御
      if (typeof added === 'string') {
        if (!this.allowCreateLabel) {
          this.$nextTick(() => target.pop());
          return;
        }
      }
    }
  }

v-timeline

v-timeline의 좋은 점

자신인지 아닌지로 좌우를 나누는 것을 나눕니다

<v-timeline>
  <v-timeline-item
    v-for="comment in event.comments"
    :key="comment.commentId"
    :left="!isMe(comment)"
    :right="isMe(comment)"
  >
    <template v-slot:icon>
      <v-icon color="white">person</v-icon>
    </template>
    <v-card class="elevation-2">
      <!-- /// -->
    </v-card>
  </v-timeline-item>
</v-timeline>

v-calendar

v-calendar의 좋은 점

매일 이미지를 나란히 표시

<v-calendar ref="calendar" type="month">
  <template v-slot:day="{ present, date }">
    <template v-if="dateEventMap.has(date)">
      <template v-for="(event, i) in dateEventMap.get(date)">
        <nuxt-link
          :key="i"
          tag="img"
          :src="event.eventImageUrl"
          :width="`${100 / dateEventMap.get(date).length}%`"
          height="72"
          :to="`/events/${event.eventId}`"
        >
        </nuxt-link>
      </template>
    </template>
  </template>
</v-calendar>

요약