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>
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>
以上是关于ant design vue modal组件关闭图标会出现黑边框的主要内容,如果未能解决你的问题,请参考以下文章
ant design组件Modal对话框的Confirm怎么使用的,怎么调用请求,我这代码不行啊