본문 바로가기

컴퓨터

vue 드롭다운 메뉴 v-menu dropdown

<template>
  <div class="text-center">
    <v-menu
      offset-y
      open-on-hover
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="primary"
          v-bind="attrs"
          v-on="on"
        >
        <v-icon>mdi-account-circle</v-icon>
        </v-btn>
      </template>
      <v-list>
        <v-list-item link>
          <v-list-item-title>회원정보 수정</v-list-item-title>
        </v-list-item>
        <v-list-item link>
          <v-list-item-title v-on:click="logout">로그아웃</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

v-list-item 에 link 속성을 부여해야 마우스 호버시 포인터로 표시된다.

'컴퓨터' 카테고리의 다른 글

Nas 에서 root 계정으로 로그인 하기  (0) 2021.10.15
html 포함하기  (0) 2021.10.06
Synology NAS 용량 계산기  (0) 2021.07.27
자바스크립트 시간 자정으로 설정  (0) 2021.07.09
뷰티파이 사용법 Vuetify Usage  (0) 2021.07.02