Используя Vuetify, как я могу разместить панель поиска над каруселью?

Question

Как видно из названия, я хочу разместить панель поиска над каруселью, и я пытаюсь добиться этого, используя <v-autocomplete> и v-carousel>.

Используя фрагменты кода из официальных Vuetify документов , мне удалось получить следующее:

<template>
    <v-layout
        justify-center
        app
    >
        <v-flex
            xs12
            sm6
        >
            <v-container
                fluid
                grid-list-md
            >
                <v-layout
                    row
                    wrap
                >
                    <!--Carousel-->
                    <v-flex xs6>
                        <v-carousel
                            hide-controls
                            hide-delimiters
                            height='200'
                            interval='2500'
                        >
                            <v-toolbar
                            dark
                            color="teal"
                            >
                                <v-toolbar-title>State selection</v-toolbar-title>
                                    <v-autocomplete
                                    v-model="select"
                                    :loading="loading"
                                    :items="items"
                                    :search-input.sync="search"
                                    cache-items
                                    dense
                                    hide-no-data
                                    hide-details
                                    label="What state are you from?"
                                    solo-inverted
                                    >
                                    </v-autocomplete>
                                    <v-btn icon>
                                    <v-icon>more_vert</v-icon>
                                    </v-btn>
                                </v-toolbar>
                            <v-carousel-item
                                v-for="(item,i) in items"
                                :key="i"
                                :src="item.src"
                            >
                            </v-carousel-item>
                        </v-carousel>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-flex>
    </v-layout>
</template>

<script>
    <!--I use selective imports. This might not be needed for you when trying to reproduce it -->
            import VContainer from "vuetify/lib/components/VGrid/VContainer";
            import VFlex from "vuetify/lib/components/VGrid/VFlex";
            import VLayout from "vuetify/lib/components/VGrid/VLayout";
            import VCard from "vuetify/lib/components/VCard/VCard";
            import VImg from "vuetify/lib/components/VImg/VImg";
            import VCarousel from "vuetify/lib/components/VCarousel/VCarousel";
            import VAutocomplete from "vuetify/lib/components/VAutocomplete/VAutocomplete";

            export default {
                name: "HomeContents",
                data: () => ({
                    loading: false,
                    items: [],
                    search: null,
                    select: null,
                    states: [
                        'Alabama',
                        'Alaska',
                        'American Samoa',
                        'Arizona',
                        'Arkansas',
                        'California',
                        'Colorado',
                        'Ohio',
                        'Oklahoma',
                        'Oregon',
                        'Washington',
                        'West Virginia',
                        'Wisconsin',
                        'Wyoming'
                    ]
                }),
                watch: {
                    search (val) {
                    val && val !== this.select && this.querySelections(val)
                    }
                },
                methods: {
                    querySelections (v) {
                        this.loading = true
                        // Simulated ajax query
                        setTimeout(() => {
                        this.items = this.states.filter(e => {
                        return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
                        })
                        this.loading = false
                        }, 500)
                    }
                },
                components: {
                    VContainer,
                    VFlex,
                    VLayout,
                    VCard,
                    VImg,
                    VCarousel,
                    VAutocomplete
                }
            }
        </script>

Проблемы, с которыми я сталкиваюсь, следующие:

1. Как я могу потерять панель инструментов чирка и иметь одну простую строку для поиска, , которая будет расположена в центре карусели ?
2. Всякий раз, когда я нажимаю в строке поиска, я вижу это: [объект объекта].Как мне избавиться от этого?
3. В моей текущей реализации каждый раз, когда я ищу состояние, я могу успешно его найти, но проблема в том, что эффект перехода из карусели в фоновый режим прекращается.Так, например, если я ищу «Оклахома», я вижу результат, но фоновый переход карусели останавливается.Как это можно исправить?

Answer 1

Я отвечу на ваши вопросы, когда вы их зададите.

1: Цвет бирюзового цвета указан в объявлении панели инструментов v.

<v-toolbar
  dark
  color="teal"
>

Вы можете установить этораскрасьте все, что хотите, rgb или hex, поэтому если вы хотите, чтобы он был прозрачным, вы можете сделать это.

<v-toolbar
  dark
  color="rgba(0,0,0,0)"
>

Чтобы указать положение панели инструментов, все сводится к стилю.Вы можете настроить стили vuetify по умолчанию, но для отдельного элемента, подобного этому, самый простой способ установить стиль, который переопределит стиль по умолчанию, - это использовать встроенный стиль, например:

<v-toolbar
  dark
  color="rgba(0,0,0,0)"
  style="position:absolute;top:75px;z-index:400;"
>

Поскольку вы установили высотуВы можете расположить панель инструментов, чтобы отцентрировать ее.Для размещения над каруселью может потребоваться z-индекс.Здесь вы также можете задать цвет текста, ширину и т. Д.

2: в опубликованном вами коде причина, по которой вы получаете [object Object], заключается в том, что v-autocomplete пытается перебрать 'элементы', которые пусты,У вас есть «состояния».Настройте элементы следующим образом: :items="states" Чтобы все заработало как положено, я настроил его следующим образом:

<v-autocomplete
style="background:rgba(0,0,0,0)"
v-model="select"
:items="states"
:loading="isLoading"
:search-input.sync="search"
color="white"
hide-no-data
hide-selected
item-text="Description"
item-value="state"
label="States"
placeholder="Start typing to Search"
prepend-icon="mdi-database-search"
return-object
>
</v-autocomplete>

Это прямо из документов vuetify.

3: я не могуВоспроизведите паузу карусели, она продолжается на моем.

Надеюсь, это поможет.