Naive UI 之modal

最新推荐文章于 2025-10-10 04:50:24 发布

原创最新推荐文章于 2025-10-10 04:50:24 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #前端

vue 专栏收录该内容

14 篇文章

订阅专栏

在使用Modal模态框时遇到表单值复用的问题，可以利用on-after-leave事件来解决。当Modal关闭后调用onAfterLeave函数，清空requestParams和jsonData等变量的值，确保下次打开时表单数据初始化。

使用modal模态框时，会出现表单值复用问题，可以使用modal的on-after-leave事件（Modal 关闭后的回调）

<n-modal
      title="资源内容"
      :on-after-leave="onAfterLeave"
      v-model:show="showModal"
      preset="card"
      style="width: 1000px"
    >
</n-modal>

function onAfterLeave() {
    requestParams.address = '';
    requestParams.params = '';
    requestParams.returnParams = '';
    jsonData.value = {};
    operateData.value = [];
  }