javascript - 使用 Vuetify 如何将搜索栏放置在轮播上？

Question

正如标题所示，我想在轮播上放置搜索栏功能，我正在尝试使用 <v-autocomplete> 来实现此目的和v-carousel> 。

使用官方的代码片段Vuetify docs ，我已经设法做到了:

<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. 每当我点击搜索栏时，我都会看到:[object Object]。我该如何摆脱这个问题？
3. 在我当前的实现中，每次我搜索一个状态时，我都能成功找到它，但问题是轮播背景过渡效果会停止。例如，如果我搜索“俄克拉荷马州”，我可以看到结果，但背景轮播转换停止。如何解决这个问题？

Answer 1

我会按照您提出的问题来解决您的问题。

1:青色在您的 v-toolbar 声明中指定。

<v-toolbar
  dark
  color="teal"
>

您可以将此颜色设置为您想要的任何颜色，RGB 或十六进制，因此如果您希望它是透明的，您可以这样做。

<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-index 可能需要将其放置在旋转木马上方。在这里您还可以设置文本颜色、宽度等样式。

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:我无法重现轮播暂停，它在我的整个过程中持续进行。

希望这会有所帮助。