Как добавить картинку в выпадающие меню во vue.js?
Как добавить картинку в выпадающие меню во vue.js?
2 ответа
от
magdalen_kub ,
7 дней назад
@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 |
Надеюсь, это поможет! Если у вас есть дополнительные вопросы, пожалуйста, дайте знать.
15