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

vue3vueantdprojectactual

knowledge callback

文章内容文章链接
vue3 antd ts实战——ant-design-vue组件库引入https://blog.csdn.net/XSL_HR/article/details/127396384?spm=1001.2014.3001.5501

本文沿用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)
在这里插入图片描述

关于mask遮罩的API属性

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-button>
<a-modal v-model:visible="visible" title="Basic popup" :footer="null" >
<!-- The content of the popup window-->
</a-modal>
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:

 :maskStyle="{

'opacity':'0.15',
'background':'#FFFFF',
'animation':'none'
}"
  • 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~
感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞收藏关注哦~
版权声明:本文为[XSL_HR]所创,转载请带上原文链接,感谢。 https://qdmana.com/2023/025/202301251935560794.html