Vuetify中v-text-field带图标时v-menu宽度无法铺满问题求助

以下是几种可行的解决方案，按需选择：

1. 直接设置v-menu宽度为100% #

给v-menu添加width="100%"属性，让下拉面板直接继承父容器宽度，这是最简单的通用方案：

<v-text-field
  prepend-inner-icon="magnify"
  label="搜索"
>
  <template v-slot:append-inner>
    <v-menu width="100%">
      <template v-slot:activator="{ props }">
        <v-btn v-bind="props" icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </template>
      <v-list>
        <v-list-item title="选项1"></v-list-item>
        <v-list-item title="选项2"></v-list-item>
      </v-list>
    </v-menu>
  </template>
</v-text-field>

2. 自定义CSS强制覆盖宽度 #

如果第一种方法不生效，可通过样式强制修改v-menu下拉面板的宽度限制：

/* 全局样式 */
.v-menu__content {
  width: 100% !important;
  max-width: none !important;
}

若是Vue单文件组件的局部scoped样式，需使用深度选择器：

::v-deep .v-menu__content {
  width: 100% !important;
  max-width: none !important;
}

3. 动态绑定v-menu宽度到文本框实际宽度 #

针对文本框宽度动态变化的场景，通过ref获取文本框实时宽度并绑定给v-menu：

<template>
  <v-text-field
    ref="textField"
    prepend-inner-icon="magnify"
    label="搜索"
  >
    <template v-slot:append-inner>
      <v-menu :width="textFieldWidth">
        <template v-slot:activator="{ props }">
          <v-btn v-bind="props" icon>
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>
        <v-list>
          <v-list-item title="选项1"></v-list-item>
          <v-list-item title="选项2"></v-list-item>
        </v-list>
      </v-menu>
    </template>
  </v-text-field>
</template>

<script>
export default {
  computed: {
    textFieldWidth() {
      return this.$refs.textField?.$el.offsetWidth || 0;
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者web4