ant design vue modal组件关闭图标会出现黑边框

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ant design vue modal组件关闭图标会出现黑边框相关的知识,希望对你有一定的参考价值。

参考技术A 将model提到外面。因为antdesignvuemodel有多个form表单,把它作为单独的组件提到外面就好了。

Ant Design Vue 中 modal 利用 $refs 简单使用

Ant Design Vue 中 modal 利用 $refs  简单使用

主要使用到   this.$refs.closeBtnModal.initShow(); 避免了父组件传值,再使用this.$emit() 的繁琐步骤,

这样可以在子组件中控制modal打开和关闭,不需要在父组件中写代码处理

 

01) 父组件

技术图片
<template>
    <div>
        <a-button @click="showModal">show modal</a-button>
        <login-close-btn  ref="closeBtnModal" style="margin-left: 10px;">我是组件</login-close-btn>
    </div>
</template>
<script>

    /* 这是ant-design-vue */
    import Vue from vue
    import Antd, { message,Select } from ant-design-vue  //这是ant-design-vue
    import ant-design-vue/dist/antd.css
    Vue.use(Antd);
    /* 这是ant-design-vue */

    import loginCloseBtn from ../../components/close-btn.vue
    
    export default {
        components:{loginCloseBtn},
        data() {
            return {}
        },
        methods: {
            showModal() {
                this.$nextTick(()=>{
                    this.$refs.closeBtnModal.initShow();  // 这种方式,直接去子组件中控制modal打开和关闭
                })
            }
        },
    };
</script>

<style scoped>

</style>
View Code

02) 子组件

技术图片
<template>
    <div>
        <a-modal title="我是title" :visible=sureVisible  @ok="handleOk" @cancel="handleCancel">
            我是组件modal
        </a-modal>
    </div>
</template>

<script>
    export default {
        name: "close-btn",
        data(){
            return{
                sureVisible:false
            }
        },
        methods:{
            initShow(){
                this.sureVisible=true
            },
            handleCancel(){
                this.sureVisible=false
            },
            handleOk(e) {
                this.sureVisible = false;
            },
        }
    }
</script>

<style scoped>

</style>
View Code

 

技术图片

 

以上是关于ant design vue modal组件关闭图标会出现黑边框的主要内容,如果未能解决你的问题,请参考以下文章

ant design Modal关闭时清除数据的解决方案

Ant-Design-组件-——-Modal

ant-design-vue弹窗可拖动

ant design组件Modal对话框的Confirm怎么使用的,怎么调用请求,我这代码不行啊

ant-design-vue中实现modal模态框的复用(添加,编辑展示同一个模态框)

将 Ant Design Form 与 Modal 集成