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>

我面临的问题如下：

如何丢失蓝绿色工具栏，而只用一条简单的单行进行搜索，将其放置在转盘的中央？
每当我在搜索栏上单击时，都会看到：[object Object]。我该如何摆脱呢？
使用当前的实现，每次我搜索状态时都能够成功找到它，但是问题是轮播背景过渡效果停止了。因此，例如，如果我搜索“俄克拉荷马州”，则可以看到结果，但背景轮播过渡停止。如何解决？

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索引放置在转盘上方。在这里，您还可以设置文本的颜色，宽度等样式。

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：我无法重现轮播暂停，这种暂停一直持续到我的整个过程。

希望这会有所帮助。

使用Vuetify如何在转盘上放置搜索栏？

1 个答案: