Vuetify 2实现v-menu左侧下拉（替代Vuetify3 Location属性）

Vuetify 2 没有 Vuetify 3 中的 location 属性，要实现下拉菜单左对齐（仅移动端生效），可以通过以下两种方案解决：

方案 1：自定义 CSS 强制左对齐（推荐） #

这种方式简单易维护，直接覆盖 Vuetify 默认的菜单定位样式：

1. 给 v-menu 添加动态类，基于断点判断是否启用左对齐：

<v-menu 
  offset-y
  :class="{ 'mobile-menu-left': !$vuetify.breakpoint.lgAndUp }"
>
  <template v-slot:activator="{ on, attrs }">
    <v-btn
      block
      color="primary"
      dark
      large
      v-bind="attrs"
      v-on="on"
      :class="projecClassProps"
      class="font-weight-bold"
    >
      Projects
    </v-btn>
  </template>
  <v-list color="primary">
    <v-list-item
      v-for="(item, index) in items"
      :key="index"
      class="justify-center"
    >
      <!-- 列表项内容 -->
    </v-list-item>
  </v-list>
</v-menu>

2. 添加 scoped 样式穿透，修改菜单定位：

<style scoped>
::v-deep .mobile-menu-left .v-menu__content {
  @media (max-width: 1263px) { /* 对应 Vuetify 2 的 lg 断点（1264px 及以上为 lgAndUp） */
    left: 0 !important;
    transform: translateX(0) !important;
    /* 可选：让菜单宽度和激活器按钮一致 */
    width: 100% !important;
  }
}
</style>

原理：Vuetify 2 的 v-menu 默认通过 transform 实现居中偏移，这里强制重置 left 和 transform 属性，让菜单左边缘对齐激活器的左侧（如果激活器是 block 级元素，会自动对齐父容器左侧）。

方案 2：动态计算偏移量（精准控制） #

如果需要菜单和激活器边缘完全对齐，可以通过计算宽度差动态设置 offset-x：

1. 给激活器和菜单添加 ref 用于获取元素宽度：

<v-menu 
  offset-y
  :offset-x="menuOffsetX"
>
  <template v-slot:activator="{ on, attrs }">
    <v-btn
      ref="activatorBtn"
      block
      color="primary"
      dark
      large
      v-bind="attrs"
      v-on="on"
      :class="projecClassProps"
      class="font-weight-bold"
    >
      Projects
    </v-btn>
  </template>
  <v-list ref="menuList" color="primary">
    <v-list-item
      v-for="(item, index) in items"
      :key="index"
      class="justify-center"
    >
      <!-- 列表项内容 -->
    </v-list-item>
  </v-list>
</v-menu>

2. 在脚本中计算偏移量，结合响应式断点：

export default {
  data() {
    return {
      menuOffsetX: 0
    }
  },
  watch: {
    '$vuetify.breakpoint.lgAndUp'(isLargeScreen) {
      this.menuOffsetX = isLargeScreen ? 0 : this.calculateOffset()
    }
  },
  mounted() {
    if (!this.$vuetify.breakpoint.lgAndUp) {
      this.menuOffsetX = this.calculateOffset()
    }
  },
  methods: {
    calculateOffset() {
      return this.$nextTick(() => {
        const activatorWidth = this.$refs.activatorBtn.$el.offsetWidth
        const menuWidth = this.$refs.menuList.$el.offsetWidth
        // 计算偏移量抵消默认居中效果，实现左对齐
        return -(menuWidth - activatorWidth) / 2
      })
    }
  }
}

原理：通过计算激活器和菜单的宽度差，设置负的 offset-x 抵消 Vuetify 默认的居中偏移，让菜单左边缘和激活器左边缘对齐。

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