Vue 2.x Ant Design Vue 弹出组件 Ant Portal 指令异常的解决之道

2024-01-07 19:21:13

Vue 2.x 使用 Ant Design Vue 1.6.2 版 JSX 写法下弹出组件报 Ant Portal 指令异常的解决之道

在 Vue 2.x 项目中使用 Ant Design Vue 1.6.2 版本时，在 JSX 写法下使用弹出组件可能会遇到 Ant Portal 指令异常的情况。本文将深入探讨此异常背后的原因，并提供一种可靠的解决方案。

问题

在 Vue 2.x 项目中使用 Ant Design Vue 1.6.2 版本，并在 JSX 写法下使用弹出组件时，可能会遇到如下异常：

[Vue warn]: Failed to resolve directive: ant-portal

found in

---> <Modal> at components/Modal.vue

此异常表明，Vue 无法解析 ant-portal 指令。该指令用于将弹出组件渲染到 body 元素之外，以防止内容溢出。

异常原因

该异常通常是由以下原因引起的：

未正确安装 Ant Design Vue 1.6.2 版本
缺少 antd.css 样式文件

解决方案

要解决此异常，请按照以下步骤操作：

确保正确安装 Ant Design Vue 1.6.2 版本： 使用 npm 或 yarn 安装 ant-design-vue。
导入 antd.css 样式文件： 在项目的 <head> 元素中导入 antd.css 样式文件。可以将该文件放在 node_modules/ant-design-vue/dist/antd.css 中找到。

代码示例

在 JSX 写法下正确使用弹出组件的代码示例：

<template>
  <Modal
    visible={visible}
    onCancel={() => { setVisible(false); }}
  >
    <p>弹出组件的内容</p>
  </Modal>
</template>

<script>
import { Modal } from 'ant-design-vue';
import 'antd.css';

export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    setVisible(value) {
      this.visible = value;
    },
  },
};
</script>

结语

通过正确安装 Ant Design Vue 1.6.2 版本和导入 antd.css 样式文件，可以轻松解决 Vue 2.x 项目中使用 Ant Design Vue 时在 JSX 写法下弹出组件报 Ant Portal 指令异常的问题。通过遵循本文提供的步骤，开发者可以确保弹出组件的正常显示和操作。