Vuetify - Переключатель видимости активатора списка меню - PullRequest
Новая
       9

Vuetify - Переключатель видимости активатора списка меню

0 голосов
/ 16 января 2019

У меня есть 3 карты, когда при наведении курсора мыши на заголовок карты отображается значок со стрелкой вниз, и я могу щелкнуть по нему, это выпадающее меню с функцией удаления, когда при наведении курсора на заголовок v-карты отображается значок, но после щелкните по нему мышкой в ​​раскрывающемся меню, значок стрелки_down исчез, как правильно это реализовать?

https://codepen.io/sharon-the-encoder/pen/WLWyoG?editors=0010

const cards = [
  {
    title: "Gooey PBJ Brownies",
    author: "John Walibur",
    image: "https://placeimg.com/640/480/nature"
  },
  {
    title: "Crisp Spanish Tortilla Matzo Brei",
    author: "Colman Andrews",
    image: "https://placeimg.com/640/480/animals"
  },
  {
    title: "Grilled Shrimp with Lemon and Garlic",
    author: "Celeste Mills",
    image: "https://placeimg.com/640/480/arch"
  }
];

new Vue({
  el: "#app",
  data: {
    cards: cards,
    selectedCard: -1
  },
  methods: {
    hoverCard(selectedIndex) {
      this.selectedCard = selectedIndex
    },

    isSelected(cardIndex) {
      return this.selectedCard === cardIndex
    },
    
    passmsgid(index) {
      alert(index)
    }
  }
});
body {
  background-color: #e1e7e7;
}
.grey--text.selected {
  color: red !important;
}
.iconkey {
  display: none;
}
.iconkey.selected {
  display: block;
  color: blue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.4.2/vuetify.min.js">
</script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>

<div id="app">
  <v-app>
    <v-content>
      <v-container>Hello world</v-container>

      <v-container fluid>
        <v-layout row wrap>
          <v-flex xs12 sm4 md4 lg4 v-for="(card, index) in cards" :key="index">
            <v-card class="ml-3 mt-3">
              <v-img :src="card.image" height="200px">
              </v-img>

              <v-card-title primary-title @mouseover="hoverCard(index)" @mouseout="hoverCard(-1)">
                <div>
                  <div class="headline">{{card.title}}</div>
                  <span class="grey--text" :class="{'selected': isSelected(index)}">{{card.author}} - 
                        </span>
                  <v-expand-transition>
                    <v-menu bottom transition="scale-transition" nudge-bottom="40">
                      <v-btn icon slot="activator" styole="margin-bottom: -1em;">
                        <v-icon class="iconkey" :class="{'selected': isSelected(index)}">keyboard_arrow_down</v-icon>
                      </v-btn>
                      <v-list>
                        <v-list-tile>
                          <v-list-tile-title @click="passmsgid(index)">Delete</v-list-tile-title>
                        </v-list-tile>
                      </v-list>
                    </v-menu>
                  </v-expand-transition>
                </div>
              </v-card-title>

              <v-card-actions>
                <v-btn flat>Share</v-btn>
                <v-btn flat color="purple">Explore</v-btn>
                <v-spacer></v-spacer>
              </v-card-actions>

            </v-card>
          </v-flex>
        </v-layout>

      </v-container>
    </v-content>
  </v-app>
</div>

1 Ответ

0 голосов
/ 17 января 2019

Обновленное перо с использованием большего количества CSS и без v-hover: Codepen

(Первоначально я использовал v-hover, но для этого случая не нужен) Codepen

Мы будем контролировать видимость, используя следующий класс CSS: 

.hidden {
  visibility: hidden;
}

кнопка меню скрыта, если:
а) мы находимся над родительским фрагментом или
б) при открытии соответствующего меню.

Итак, нам нужно настроить компонент элемента (плитки):

Установить контроль видимости меню: 

data: () => ({
  menu: false,  // control button-menu state (opened / closed)
})

И наш шаблон начинается с компонента v-hover, поэтому мы можем определить, когда наведем на него курсор мыши, и отреагировать на это событие: 

<template>
  <v-hover>
    <v-list-tile slot-scope="{ hover }" @click="">
      // ...
      <v-menu v-model="menu" offset-y left >
        <v-btn slot="activator"
               :class="{hidden: !hover && !menu}"
        >

:class="{hidden: !hover && !menu}" - мы устанавливаем hidden класс на кнопку, когда мы не наводим курсор на родительский тайл и когда соответствующее меню закрыто.

...