Блог

Как следует из названия, я хочу разместить функциональность панели поиска поверх карусели, и я пытаюсь достичь этого с помощью <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 amp;amp; val !== this.select amp;amp; 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. Как я могу потерять панель инструментов teal и использовать для поиска только одну простую строку, которая будет расположена в центре карусели?
2. Всякий раз, когда я нажимаю на строку поиска, я вижу это: [object объект]. Как мне избавиться от этого?
3. В моей текущей реализации каждый раз, когда я ищу состояние, я могу успешно найти его, но проблема в том, что эффект перехода фона карусели прекращается. Так, например, если я ищу «Оклахома», я могу видеть результат, но переход фоновой карусели прекращается. Как это можно исправить?

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

1: Бирюзовый цвет указан в вашем объявлении v-toolbar.

 <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’, которая пуста. У вас есть «состояния». Задайте элементы, подобные этому: :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: Я не могу воспроизвести приостановку карусели, она продолжается на протяжении всего моего.

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