从 ant-design-vue 的 modal 示例中学习到的4个知识点

工作中使用 modal 经常是用到一个学习一个，缺乏系统性学习，这次想通过文章的方式做一个小结。

知识点

插槽

通过提供的插槽可以自定义页脚的内容。这个功能在 Vue 组件中是很常见的，通过插槽可以去自定义组件中的内容，使组件变得更加灵活，功能介绍可以查阅官网。

<a-modal v-model:visible="visible" title="Basic Modal" @ok="visible = false">
    <template #footer>  <!--具名插槽-->
        <a-button>取消</a-button>
        <a-button type="primary">确认</a-button>
    </template>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
</a-modal>

在上面的例子中，最后 modal 页脚显示的内容是里面提供的两个按钮。在官网的 API 介绍中，也可以看到 footer 属性支持 slot，也就是可以使用插槽。

使用 modal 方法

上面的例子是使用组件的形式，其实 modal 还提供方法的形式调用。

import { ref } from "vue";
import { Modal } from "ant-design-vue";

const visible = ref(false);

const warning = () => {
  const modal = Modal.warning({
    title: "test",
    content: "no content",
  });
  let v = 5;
  const timer = setInterval(() => {
    v--;
    modal.update({  // 更新 modal
      title: "test",
      content: "it will close in " + v,
    });
  }, 1000);

  setTimeout(() => {
    clearInterval(timer);
    modal.destroy();  // 销毁 modal
  }, v * 1000);
};

上面的例子实现了打开 modal 后5s关闭。调用 Modal.warning 方法的时候会返回一个引用，可以通过这个引用修改和销毁 modal。

全屏效果

实现全屏效果是很常见的需求，而实现 modal 的全屏效果并不复杂，通过 css 样式即可实现出预期的效果。

<a-modal v-model:visible="visible" title="Basic Modal" width="100%" wrap-class-name="full-modal" @ok="handleOk">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
</a-modal>

.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}

这里面有一个很常见的小技巧，实现全屏效果并不是直接修改源码样式，而是使用类名属性 wrap-class-name 进行包裹。在需要修改源码样式又不想污染该组件的原有样式可以借鉴这种方式。

创建 vnodes 的两种方式

Vue 提供了一个 h() 函数用于创建 vnodes，这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode()。JSX 是 JavaScript 的一个类似 XML 的扩展，它在项目中一般需要通过 @vue/babel-plugin-jsx 插件进行配置支持，如果是通过 vite 或者 vue cli 创建的项目，会自动安装该插件。

const warning = () => {
  Modal.warning({
    title: "test",
    // content: h("div", { style: "color:red;" }, "Some descriptions"), // 方法一
    content: <div style={{ color: "red" }}>Some descriptions</div>, // 方法二
  });
};

上面的例子使用了 h 方法和和 JSX 方式来创建 VNodes，使用后都可以看到红色字体的 Some descriptions。熟悉这两种方式对理解和创建高级组件很有帮助，可以查看官网介绍，里面有详细的 h 方法和 JSX 方法书写的例子。

小结

通过学习 ant-design-vue 的 modal 示例，可以学习到 Vue 中插槽，渲染函数和 JSX 等概念，也可以看到 modal 有组件和函数调用两种使用方式，通过 css 样式可以实现 modal 的全屏效果。