我将v-text-field组件放置在工具栏中,但它几乎占用了所有可用空间.

<v-toolbar
    dense
  >
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
    <v-toolbar-title>Title</v-toolbar-title>
    <v-text-field
      hide-details
      label="Filled"
      placeholder="Search"
      filled
      rounded
      dense
      single-line
      append-icon="mdi-magnify"
    ></v-text-field>
    <v-btn rounded>Button 1</v-btn>
    <v-btn icon>
      <v-icon></v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </v-toolbar>

推荐答案

你可以用css的作用域样式来实现:

<style scoped>
/deep/ .v-text-field{
      width: 400px;
}
</style>

详细信息请阅读Vuetify documentation.

Vue.js相关问答推荐

具有VUE身份验证的Azure AD

为什么 Pinia/Vuex 比使用服务类的classic 方法更受欢迎?

有没有办法初始化一个保留初始 HTML 的 Vue 对象

从数据库中删除后,Vue.js $remove 不删除元素

为什么组件在 v-if 下没有被销毁

在 vue 组件中检索配置和环境变量

在 vue-router 中带有路由的 Vuejs2 模态

Vuex - 如何跨不同选项卡持久存储更新?

错误:您可能需要额外的加载器来处理这些加载器的结果.

vuejs中通过变量动态调用方法

为什么 vue 文档说 refs 不是响应式的,而实际上它们是响应式的

带有子菜单的 Vuetify 导航抽屉

从我的服务访问路由实例

Vue CLI - 将构建输出组合到单个 html 文件

vue组件中导入和使用three.js库

vue-cli-service build --target lib 导入为 lib 时丢失图像路径

在子元素 vueJS.2 之间切换active类

使用 vuejs 动态设置 id 标签

vuex 是 state.array.push react式的吗?

Vue.js 无法读取 null 的属性 length长度