记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;
}

推荐阅读：

在Webstorm中使用Autoprefixer实现CSS自动补全

Z-Blog后台无法安装、更新应用的解决方法

判断网页是通过PC端还是移动终端打开的

JetbrainsCrack-2.7激活补丁更新 亲测激活PhpStorm2018

JetBrains IDE Support 浏览器自动刷新插件（不定时更新）