v-tooltip, v-slot, v-btn, v-icon 정보

완전한 개인 메모. 아래 소스 코드의 내용을 풀어 봅니다.

풀고 싶은 소스 코드

<template>
  <v-tooltip open-delay="350" top>
    <template v-slot:activator="{ on }">
      <v-btn v-on="on"
        small
        tile
        text
        :disabled="disabled"
        :color="command.color"
        @click="$emit('click', $event)">
        <v-icon>{{ command.icon }}</v-icon>
      </v-btn>
    </template>
    <span>{{ command.text }}</span>
  </v-tooltip>
</template>

template 태그란?

<template>

</template>

vue는 작성한 템플릿을 파트(컴포넌트라고 부른다)로서 임베드할 수 있다. 컴퍼넌트를 다른 파일로 작성하는 경우, template 태그로 둘러싼다.

v-tooltip이란?

  <v-tooltip open-delay="350" top>

v-tooltip은 vuetify(뷰티파이)의 하나.v- 붙는 것은 vuetify 관련.

tooltip은 HTML 제목 태그의 기능으로, hover했을 때 텍스트를 표시합니다.

· open-delay=" "툴팁을 표시하는 시간을 설정할 수 있다. 단위는 밀리초.

· top상단에 표시합니다.

v-tooltip으로 둘러싸인 요소에 마우스가 올라가면 3.5초 후에 지정한 툴팁을 위쪽에 표시한다.

v-tooltip
API

v-slot:activator란?

<template v-slot:activator="{ on }">

명명된 슬롯을 나타냅니다.

슬롯이란, 아이의 컴퍼넌트로부터 부모의 컴퍼넌트에 템플릿의 일부를 꽂는 기능을 말한다.

여기에서는 activator="{ on }"로 그 요소가 클릭되면, 부모의 템플릿의 내용을 표시한다.

그래서 단독으로는 기능하지 않고, v-on="on"(을)를 붙인 컴퍼넌트와 세트로 사용한다.

    <template v-slot:activator="{ on }">
      <v-btn v-on="on">
        AAA
      </v-btn>
    </template>
    <span>BBB</span>

여기에서는 v-btn과 세트로 되어 있으므로, 「AAA」버튼을 클릭하면, 「BBB」를 표시하는 처리가 된다.

v-btn

<v-btn v-on="on"
        small
        tile
        text
        :disabled="disabled"
        :color="command.color"
        @click="$emit('click', $event)">
</v-btn>

v-btn은 버튼을 표시하는 구성 요소입니다.
v-on="on"이름이 붙은 슬롯의 v-slot:activator="{ on }" 라고 끈다.

・ small :
버튼의 크기.
Xlarge > Large > Medium(기본값) > Small > XSmall

・ tile :
네 모퉁이를 모서리로 만듭니다. border-radius를 제거합니다.

・ text :
배경을 투명하게 만듭니다.

・ :disabled="disabled" :
vue 표기법으로 v-bind의 약어. HTML 태그 안에서 사용하는 것으로 속성을 부여하고 있다.

disabled 속성으로서 "disabled"라는 변수를 설정하고 있다.
": 속성 이름 = "값""

disabled는 불리언으로 true의 경우는 버튼을 누르지 않는 상태가 된다(비활성)

・ :color="command.color" :
vue 표기법으로 v-bind의 약어.
color 속성을 설정하고 있다.

・ @click="$emit('click', $event)" :
vue의 표기. @는 v-on:의 약어.

v-on : click 클릭 이벤트

$emit:
구성 요소 외부(html 파일)에 데이터를 전달합니다.
수신측은 설정된 이벤트명을 「@이벤트명」으로 수신할 필요가 있다.

'click': 전달할 이벤트의 이름.
HTML 파일의 태그 속성으로, @click="メソッド名" (을)를 기술하면(자), 클릭을 감지해 처리를 실행할 수 있다.

$event:
원래 DOM을 전달합니다.
htps // v1-jp. 아 js. 오 rg/구이데/에ごぇ ts. HTML

v-btn
API

v-icon

<v-icon>{{ command.icon }}</v-icon>

v-icon은 아이콘을 표시하는 구성 요소입니다.
mdi+ 아이콘의 이름으로 호출할 수 있다. (mdi = Material Design Icon)

위의 예에서는 command 속성 값 icon을 호출합니다.
직접 설정하는 경우는 아래와 같이 기술.

    <v-icon
      large
      color="teal darken-2"
    >
      mdi-email
    </v-icon>

큰 사이즈로, 색은 틸(파랑과 녹색의 중간색)의 e-mail 아이콘을 표시.



v-icon
icon의 종류

상당한 종류의 아이콘을 사용할 수 있습니다.