问题描述
多个组件同时引入Modal,使用Modal.confirm模态框,打包后发布到服务器,在某个页面进行刷新操作后,模态框不能正常弹出。
解决方案:
全局引入Modal,每个组件使用的时候从全局引入,具体实现方法如下:
1.在入口文件main.js中引入
import { createApp } from 'vue'
import App from './App.vue'
//引入Modal组件和样式
import { Modal } from 'ant-design-vue';
import 'ant-design-vue/es/modal/style/index'
const app = createApp(App);
//绑定到全局
app.config.globalProperties.$modal = Modal;
app.mount('#app')
2.组件内部使用
<script setup>
import { getCurrentInstance } from "vue"
const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
//在某个方法中使用
const delRecord = ()=>{
global.$modal.confirm({
...
})
}
</script>