当前位置：首页 > VUE

Vue使用antdesign实现弹窗

2026-02-23 14:05:03VUE

安装依赖

确保项目中已安装ant-design-vue和vue相关依赖。通过npm或yarn安装：

npm install ant-design-vue@next vue@next
# 或
yarn add ant-design-vue@next vue@next

全局注册组件

在项目的入口文件（如main.js）中全局注册Ant Design Vue组件：

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App.vue';

const app = createApp(App);
app.use(Antd);
app.mount('#app');

使用Modal组件

在Vue单文件组件中，通过a-modal标签实现弹窗。以下是一个基础示例：

<template>
  <div>
    <a-button type="primary" @click="showModal">打开弹窗</a-button>
    <a-modal v-model:visible="visible" title="标题" @ok="handleOk">
      <p>弹窗内容</p>
    </a-modal>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const visible = ref(false);
    const showModal = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    return { visible, showModal, handleOk };
  }
};
</script>

自定义弹窗内容

通过插槽或动态内容扩展弹窗功能。例如添加表单：

<a-modal v-model:visible="visible" title="表单弹窗">
  <a-form :model="formState" layout="vertical">
    <a-form-item label="用户名">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
  </a-form>
</a-modal>

<script>
import { reactive } from 'vue';
export default {
  setup() {
    const formState = reactive({
      username: '',
      password: ''
    });
    return { formState };
  }
};
</script>

控制弹窗行为

通过API动态控制弹窗的显示/隐藏、宽度等属性：

<a-modal 
  v-model:visible="visible" 
  :width="800"
  :footer="null"
  :closable="false"
>
  <custom-component @close="visible = false" />
</a-modal>

异步关闭

在提交表单等异步操作时，通过confirmLoading状态优化用户体验：

Vue使用antdesign实现弹窗

<a-modal 
  v-model:visible="visible" 
  title="异步提交"
  :confirm-loading="confirmLoading"
  @ok="handleAsyncOk"
>
  <p>提交后将延迟关闭</p>
</a-modal>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const confirmLoading = ref(false);
    const handleAsyncOk = () => {
      confirmLoading.value = true;
      setTimeout(() => {
        visible.value = false;
        confirmLoading.value = false;
      }, 2000);
    };
    return { confirmLoading, handleAsyncOk };
  }
};
</script>