Vue3 antd project actual combat - Modal pop-up custom mask (use maskStyle attribute to customize the mask style)

XSL_HR 2023-01-25 19:58:33 阅读数:140


knowledge callback

vue3 antd ts实战——ant-design-vue组件库引入

本文沿用ant design vue组件库,The above article can get you started quickly


In the project development of the background management system,Pop-up window components are used in many places.Because the default style that comes with it does not meet the visual requirements,因此需要利用maskStyle属性来自定义modalThe mask style of the popup.

具体需求: Modify the default mask style to be more visual
解决方法:Use the component library that comes with itapi属性——maskStyle

实现效果:(The background of the popup has a customizable mask)


Click Send toant designvueOfficial document pop-up window component

在API部分,The following three items are aboutmaskProperties of the mask


  • mask属性——对应值ture或false,Controls whether there is a mask,trueFor masked,false则为关闭.默认打开.
  • maskClosable属性——对应值true或false,Controls whether the mask can be turned off,truecan be closed,falseis not closed.
  • maskStyle属性——对应值object类型.绑定style样式.

利用maskStyleAttribute custom mask style

1、The basic part of the pop-up window(Be sure to register before using the component)

<a-button style="margin-top:5px" size="small" @click="showModal()" >预览
<a-modal v-model:visible="visible" title="Basic popup" :footer="null" >
<!-- The content of the popup window-->
const visible = ref<boolean>(false); // The default popup is closed
const showModal = () => {

visible.value = true // Click the button to open the popup
  • :footer=“null”Clear the default bottom button
    由于ant design vueThe pop-up windows in the component library are called dialogs,So by default with confirm and cancel buttons at the bottom.
  • v-model:visible=“visible”Bind the display state of the popup window

2、Pop-up window custom style
在a-modalWrite the following code in the tag:


  • opacity 透明度(The general transparency is 0.1~0.2)
  • background 背景色(Generally use light colors)
  • animation 动画(Generally not suitable for animation,影响视觉)

Let's take a look at the implementation effect:

Structure from the inside out:

  • The orange box is the main part of the pop-up window,Used to store the content of the popup window.
  • Between the red box and the orange box is a built-in style on the edge of the popup window.
  • Between the blue box and the red box is the mask of the pop-up window.

下期文章将介绍select多选框的使用、How to limit the number of selections in a multi-select box~