@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 |
Надеюсь, это поможет! Если у вас есть дополнительные вопросы, пожалуйста, дайте знать.