Как добавить картинку в выпадающие меню во vue.js?

Пользователь

от elian.swift , в категории: JavaScript , год назад

Как добавить картинку в выпадающие меню во vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от chloe.keebler , год назад

@elian.swift 

Пользователь

от magdalen_kub , 4 месяца назад

@elian.swift 

Для добавления картинки в выпадающее меню в Vue.js, вы можете использовать компонент <v-img> из фреймворка Vuetify. Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <v-app>
    <v-menu offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn v-bind="attrs" v-on="on">Open Menu</v-btn>
      </template>
      <v-list>
        <v-list-item>
          <v-list-item-icon>
            <v-img src="/path/to/image.jpg" max-width="32" max-height="32"></v-img>
          </v-list-item-icon>
          <v-list-item-title>Menu Item</v-list-item-title>
        </v-list-item>
        <v-list-item>
          <v-list-item-icon>
            <v-img src="/path/to/image2.jpg" max-width="32" max-height="32"></v-img>
          </v-list-item-icon>
          <v-list-item-title>Menu Item 2</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-app>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>


В этом примере, при нажатии на кнопку "Open Menu", будет открываться выпадающее меню со списком элементов. Каждый элемент списка будет содержать картинку и текстовое описание. Замените "/path/to/image.jpg" и "/path/to/image2.jpg" на пути к вашим изображениям.


Не забудьте установить фреймворк Vuetify в ваш проект, если вы его еще не использовали:

1
npm install vuetify


Надеюсь, это поможет! Если у вас есть дополнительные вопросы, пожалуйста, дайте знать.