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

Question

正如标题所说，我想在轮播上放置一个搜索栏功能，我正在尝试使用<v-autocomplete> 和v-carousel> 来实现这一点。

使用来自官方Vuetifydocs的代码sn-ps，我设法得到了这个：

<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. 在我当前的实现中，每次搜索状态时我都能成功找到它，但问题是轮播背景过渡效果停止。例如，如果我搜索“Oklahoma”，我可以看到结果，但后台轮播转换停止。如何解决这个问题？

Answer 1

我会按照你提出的问题处理你的问题。

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

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：我无法重现轮播暂停，它一直在我的身上继续。

希望这会有所帮助。