Una forma común de abrir un cuadro de diálogo en Vue es usar el control el-dialog. Cuando se abre el cuadro de diálogo, a menudo es necesario volver a representar el contenido correspondiente. Esta funcionalidad se puede lograr escuchando la propiedad visible.
El método de implementación específico es el siguiente:
Escuche la propiedad visible en el control el-dialog
<template>
<el-dialog :visible.sync="dialogVisible" @visible-change="handleVisibleChange">
<!-- 对话框内容 -->
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleVisibleChange(visible) {
if (visible) {
// 对话框打开时进行重新渲染
}
}
}
};
</script>
Implemente la lógica de renderizado en el método handleVisibleChange
Aquí hay un código de muestra que representa la hora actual:
<template>
<el-dialog :visible.sync="dialogVisible" @visible-change="handleVisibleChange">
<p>当前时间是：{
{ currentTime }}</p>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
currentTime: null
};
},
methods: {
handleVisibleChange(visible) {
if (visible) {
this.currentTime = new Date().toLocaleString();
}
}
}
};
</script>
En este ejemplo, cuando se muestra el cuadro de diálogo, el método handleVisibleChange volverá a representar y actualizará el valor de currentTime.
Cabe señalar que cuando se abre el cuadro de diálogo, si el contenido del cuadro de diálogo debe volver a representarse, el método handleVisibleChange puede llamarse varias veces. Si la lógica de renderizado lleva mucho tiempo, puede causar problemas de rendimiento. Por lo tanto, se recomienda evitar problemas tanto como sea posible al implementar la lógica de renderizado.
¡Por favor, dale me gusta si es útil y desarrolla un buen hábito!
Preguntas , comunicación , aliento, ¡por favor deje un mensaje!