vue-smart-route 与 vuetify

Posted 2023-02-22

【中文标题】vue-smart-route 与 vuetify

【英文标题】：vue-smart-route with vuetify

【发布时间】：2020-10-03 13:08:28

【问题描述】：

我正在使用包 vue-smart-route 在我的应用程序中创建搜索功能。对于使用 vuetify 的样式。问题是当我使用 vuetify 组件时它不起作用。

将它与 vuetify 组件一起使用：

<v-text-field v-model="search" v-smart-routes="routes" class="mr-4" :label="$t('search') + '...'" hide-details append-icon="mdi-magnify" />

这行不通。

纯html

<input class="mr-4" type="text" v-model="search" v-smart-routes="routes">

这可行，但是我想添加 vuetify 样式。

如何让 vuetify 组件工作？

【参考方案1】：

我 99% 确定 vue-smart-route 不能与 Vuetify 的 <v-text-field/> 一起使用，因为它可能需要一个精确的 <input> HTML 元素，而 <v-text-field/> 创建一个更复杂的 DOM 结构。是这样的，<input> 标签嵌套很深：

<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted">
    <div class="v-input__control">
        <div class="v-input__slot">
            <div class="v-text-field__slot">
                <label for="input-1752" class="v-label v-label--active theme--light"
                    style="left: 0px; right: auto; position: absolute;">Label</label><input id="input-1752"
                    type="text" />
            </div>
        </div>
        <div class="v-text-field__details">
            <div class="v-messages theme--light">
                <div class="v-messages__wrapper"></div>
            </div>
        </div>
    </div>
</div>

所以在这种情况下，我看到了 2 个选项：如果您想坚持这些样式或分支 vue-smart-route 并使其与此 DOM 结构一起使用，请创建类似于此的自定义输入。我希望这会有所帮助。