第4节：el-select 弹窗事件控制（打开 / 关闭、选中事件、弹窗滚动事件）

本节重点：监听下拉弹窗的显示隐藏，区分「选中值变化」和「弹窗打开关闭」，弹窗相关事件，还有弹窗关闭阻止场景。

核心事件清单（el-select）

visible-change：弹窗打开 / 关闭触发 ，参数 (boolean)，true = 弹窗打开，false = 弹窗关闭
change：选中的值发生变化才触发，弹窗打开关闭不会触发这个事件（很多新手混淆这点）
blur：选择框失去焦点
focus：选择框获得焦点

补充：el-select 没有直接的 popper-open，visible-change 就是用来监听下拉弹窗的。

完整可测试代码

复制代码

<template>
  <div class="container">
    <el-select
      v-model="selectVal"
      placeholder="请选择，看控制台打印事件"
      @visible-change="handleVisibleChange"
      @change="handleChange"
    >
      <el-option label="Vue" value="vue" />
      <el-option label="React" value="react" />
      <el-option label="Angular" value="angular" />
    </el-select>

    <div style="margin-top:20px">
      <p>弹窗状态：{{ popVisible ? '已打开' : '已关闭' }}</p>
      <p>当前选中值：{{ selectVal }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const selectVal = ref('')
const popVisible = ref(false)

// 弹窗打开/关闭事件
const handleVisibleChange = (flag) => {
  popVisible.value = flag
  console.log('visible-change 弹窗状态：', flag)
}

// 选中值变更事件
const handleChange = (val) => {
  console.log('change 选中新值：', val)
}
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

测试步骤

打开浏览器控制台（F12）
点击下拉框展开弹窗：触发 visible-change(true)，change 不会触发
点击选项选中：先关闭弹窗 visible-change(false)，然后触发 change
点击空白处关闭弹窗：只触发 visible-change(false)，change 不触发
再次点开下拉：visible-change(true)

业务常见场景

需要弹窗打开时远程请求加载选项数据 ：写在 handleVisibleChange，判断 flag === true 请求

⚠️ 坑点：每次打开都会触发，注意加锁防止重复请求（比如加 loading 标记）