在 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 属性的值。如果没有正确处理这个事件，弹窗的状态将无法同步更新。

实现步骤

1. 定义 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 组件的右上角叉号能够正常关闭弹窗，提升用户体验。