如何使用 vuetify 将扩展搜索图标添加到文本框中？

Question

我最近开始在我的 RTL 项目（用 Vue 2 编写）中使用 vuetifyjs。我在卡片中添加了一个表格，并添加了文档中显示的搜索栏。我正在尝试做两件事：

\n

\n
1. 将“要显示的项目数”选项从页脚移动到顶部。
\n
2. 使搜索栏可以从图标中消失。
\n

\n

基本上：

\n

\n

对于第一种情况，我在文档中找不到执行此操作的方法。对于第二种情况，我试图实现此输出：

\n

\n

我也尝试查看文档，但找不到执行此操作的方法。我还遇到了这篇文章：Expand Searchbar with Search icon as well as show close icon onclick using Javascript

\n

我当前的代码：

\n

<div>\n  <v-card>\n    <v-card-title>\n      <v-text-field\n        v-model="searchText"\n        append-icon="mdi-magnify"\n        label="\xd7\x97\xd7\x99\xd7\xa4\xd7\x95\xd7\xa9"\n        single-line\n        hide-details\n      ></v-text-field>\n    </v-card-title>\n    <v-data-table\n      class="elevation-1"\n      :headers="headers"\n      :items="items"\n      :items-per-page="itemsPerPage"\n      :footer-props="settings"\n    >\n    </v-data-table>\n  </v-card>\n</div>\n

\n

在哪里：

\n

settings: {\n \'items-per-page-options\': [10, 25, 50, 100],\n \'items-per-page-text\': \'\xd7\xa1\xd7\x94\xd7\x9b\'\n},\nitemsPerPage: 10\n

\n

使用 vuetify 可以实现这一点吗？

\n

Answer 1

https://codepen.io/pradipta-chatterjee/pen/YzaJXeW

<v-text-field
        v-model.trim="searchText"
        dense
        filled
        rounded
        clearable
        placeholder="Search"
        prepend-inner-icon="mdi-magnify"
        class="pt-6 shrink expanding-search"
        :class="{ closed: searchBoxClosed && !searchText }"
        @focus="searchBoxClosed = false"
        @blur="searchBoxClosed = true"
    ></v-text-field>

检查一下我感觉的代码笔，我有你想要的东西。