Vue3组合式API+Nuxt中vue-select v4点击输入框/外部关闭下拉菜单问题

针对Vue3组合式API、NuxtJS环境下使用vue-select@4.0.0-beta.6的场景，你可以按照以下方案修正代码：

问题根源 #

原代码的核心错误在于：把v-model绑定的选中值（selectedDelivery）当成了组件实例，导致无法调用vue-select内置的菜单控制方法；同时没有正确监听全局点击事件来处理外部关闭逻辑。

修正后的代码 #

模板部分 #

<li id="delivery_select">
  <span class="subtitle">Location</span>
  <v-select 
    ref="mySelect" 
    v-model="selectedDelivery" 
    :options="deliveries"
    @click="handleSelectClick"
  ></v-select>
</li>

组合式API脚本部分 #

import { ref, onMounted, onUnmounted } from 'vue'

const mySelect = ref(null)
const selectedDelivery = ref(null)
const deliveries = ref([/* 你的选项数据，比如 { label: 'XXX', value: 'XXX' } */])

// 点击输入框时切换菜单状态：开→关，关→开
const handleSelectClick = () => {
  if (!mySelect.value) return
  mySelect.value.menuIsVisible 
    ? mySelect.value.closeMenu() 
    : mySelect.value.openMenu()
}

// 监听全局点击，点击外部时关闭菜单
const handleOutsideClick = (event) => {
  if (!mySelect.value) return
  // 判断点击目标是否在vue-select组件内部
  if (!mySelect.value.$el.contains(event.target) && mySelect.value.menuIsVisible) {
    mySelect.value.closeMenu()
  }
}

// 组件挂载时绑定全局监听，卸载时移除
onMounted(() => {
  document.addEventListener('click', handleOutsideClick)
})

onUnmounted(() => {
  document.removeEventListener('click', handleOutsideClick)
})

关键说明 #

1. 获取组件实例：通过ref="mySelect"获取vue-select的组件实例，才能调用它内置的menuIsVisible（菜单状态）、openMenu()、closeMenu()方法。
2. 全局点击监听：在组件挂载时给document绑定click事件，判断点击区域是否属于vue-select，不属于则关闭菜单。
3. 生命周期清理：组件卸载时移除全局监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Šarūnas Lekstutis