企业官网建设流程全解析

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

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

核心事件清单（el-select）

1. visible-change：弹窗打开 / 关闭触发，参数(boolean)，true = 弹窗打开，false = 弹窗关闭
2. change：选中的值发生变化才触发，弹窗打开关闭不会触发这个事件（很多新手混淆这点）
3. blur：选择框失去焦点
4. 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>

测试步骤

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

业务常见场景

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

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