tsx中使用el-dialog设置visible.sync，解决弹窗右上角叉号失效问题
在 TSX 中使用 el-dialog 设置 visible.sync
在 Vue 2 中，.sync 修饰符用于在父子组件之间同步属性值。然而，在 TSX 中并没有类似的 .sync 修饰符。如果要在 TSX 中实现类似的功能，需要手动实现。具体来说，可以通过监听 update:visible 事件来更新 dialogVisible 的值。
为什么需要 visible.sync
如果不设置 visible.sync，会导致 el-dialog 默认自带的右上角的叉号失效，无法关闭弹窗。这是因为 el-dialog 组件内部会触发 update:visible 事件来通知父组件更新 visible 属性的值。如果没有正确处理这个事件，弹窗的状态将无法同步更新。
实现步骤
- 定义 dialogVisible 变量：使用 ref 定义一个响应式变量 dialogVisible。
监听 update:visible 事件：在 el-dialog 组件上绑定 update:visible 事件，当事件被触发时更新 dialogVisible 的值。
设置 visible 属性：将 dialogVisible 的值传递给 el-dialog 的 visible 属性。
示例代码
//其中dialogVisible为自定义的变量
const dialogVisible = ref(false)
<el-dialog
title="动作配置"
on={{ ['update:visible']: ()=>{dialogVisible.value = !dialogVisible.value}}}
visible={ dialogVisible.value }>
自定义内容
</el-dialog>
2. 详细解释
- 定义 dialogVisible 变量，使用 ref 创建了一个响应式变量 dialogVisible，初始值为 false。
- 监听 update:visible 事件：在 el-dialog 组件上绑定 update:visible 事件，当事件被触发时，传入的 value 参数会被赋值给 dialogVisible。
- 设置 visible 属性：将 dialogVisible 的值传递给 el-dialog 的 visible 属性，从而控制对话框的显示和隐藏。
总结
通过上述步骤，我们可以在 TSX 中手动实现类似于 Vue 2 中的 .sync 修饰符的功能。这样可以确保 el-dialog 组件的右上角叉号能够正常关闭弹窗，提升用户体验。
原文地址：https://blog.csdn.net/m0_73761441/article/details/143961827
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！