记Ant Design Vue Modal组件的使用及踩的坑

最近在使用 Vue 开发一个项目，前端框架用的 Ant Design ，Ant Design for React 已经比较成熟，兼容性和灵活性也比较高。但是 Ant Design for Vue 貌似还有点不那么完善。

今天先整理一下 Modal 组件的使用及我开发过程中注意到的一些点。至于 Antd for Vue 存在的 Bug，后期整理到的时候在说吧。

Antd for Vue Modal 组件的使用：

引入及注册：

首先要引入 Vue ，然后是 Ant Design Modal 组件：

import Vue from 'vue'
import { Modal } from 'ant-design-vue';

Antd 的安装和配置我就不赘述了，详情见官方API：在 vue-cli 3 中使用

在使用之前，必须要先注册组件：

Vue.component(Modal.name, Modal);

常用参数/属性：

隐藏右上角 × 号： :closable="false"

居中显示： centered

确定事件： @ok="handleOk"

自定义宽度： width="80%"

确定按钮文字： okText="确认"

取消按钮文字： cancelText="取消"

禁止点击蒙层（遮罩）关闭： :maskClosable="false"

确认按钮样式： okType="link"

确认按钮同 Button ，有 primary dashed danger link 四种样式

嗯，Antd 只有确认按钮的自定义样式，取消按钮没有，那么就会出现下面这样的情况：

不过，可以使用 :cancelButtonProps 来设置取消按钮的 type 属性： :cancelButtonProps="{ props: {type: 'link'} }"

隐藏 footer ： :footer="null"

有时需要自定义按钮，不使用 Antd 自带的按钮样式，可以把 Footer 部分隐藏。然后给按钮绑定“确定”和“取消”事件。

确定：@click="handleOk"

取消：@click="handleCancle"

自定义页脚：在 <a-modal>...</a-modal> 内添加如下代码：

<template slot="footer">
  <a-button key="back" @click="handleCancel">Return</a-button>
  <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
    Submit
  </a-button>
</template>

以我上图的样式为例：

.Vue 代码：

<template>
    <a-modal :closable="false"
             centered
             v-model="confirmShow"
             @ok="handleOk"
             class="captcha-modal"
             width="80%"
             cancelText="取消"
             okText="确认"
             :cancelButtonProps="{ props: {type: 'link'} }"
             okType="link">
      <h4 class="fz-18 text-c">请输入图片验证码</h4>
      <a-form-item class="form-item mb-0">
        <a-input autosize="true" size="large" v-decorator="['captcha']" placeholder="请输入图片验证码">
        </a-input>
        <img class="captcha-img" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4181169730,4061301865&fm=26&gp=0.jpg" alt="">
      </a-form-item>
    </a-modal>
</template>

JS部分：

<script>
  export default {
    data() {
      return {
        confirmShow: false,
      }
    },
    methods: {
      handleOk(e) {
        console.log(e);
        this.confirmShow = false;
        this.getCaptcha()
      },
    },
  }
</script>

CSS 代码：将原始样式覆盖掉

/*验证码弹窗Modal*/
.captcha-modal .form-item{
  background: #F3F6FB;
}
.captcha-modal .form-item input{
  border: none;
  box-shadow: none;
}
.captcha-modal .captcha-img{
  height: 100%;
  width: auto;
  position: absolute;
  right: 10px;
  top: 0;
}
.captcha-modal .ant-modal-footer{
  padding: 0;
}
.captcha-modal .ant-modal-footer>div{
  display: flex;
  justify-content: space-between;
}
.captcha-modal .ant-btn{
  width: 50%;
  height: auto;
  font-size: 16px;
  border-radius: 0;
  padding: 10px 0;
}
.captcha-modal .ant-btn:first-child{
  color: #494d58;
  border-right: 1px solid #e8e8e8;
}

推荐阅读：

DouPHP去除Powered by DouPHP版权的方法

设置SSL后如何实现https自动跳转

Vue.js学习笔记——事件监听

HTML页面 用CSS实现禁止选中、复制和右键

CSS中的background属性与margin和padding内外边距的关系总结