自定义modal模态框

在uni-app中，通过自定义组件和组件扩展来实现自定义的模态框Modal组件。
1. 创建自定义组件：
   在uni-app项目中，创建一个自定义的模态框组件。在components文件夹下创建一个名为CustomModal的文件夹，并在其中创建CustomModal.vue文件。在该文件中定义模态框的布局和样式，例如：

  
     
   
 
    
   .custom-modal {  
     position: fixed;  
     top: 0;  
     left: 0;  
     width: 100%;  
     height: 100%;  
     background-color: rgba(0, 0, 0, 0.5);  
     display: flex;  
     justify-content: center;  
     align-items: center;  
   }  
     
   .custom-modal .content {  
     width: 80%;  
     background-color: #fff;  
     padding: 20px;  
     border-radius: 10px;  
   }  
    

模态框组件默认是隐藏的（visible属性默认为false），当visible属性为true时，模态框显示。可以在content元素中放置模态框的内容，通过插槽（slot）的方式实现。
2. 在需要使用模态框的页面中引入和使用自定义组件：
   在需要显示模态框的页面中，引入和使用刚才创建的自定义模态框组件。例如，在pages文件夹下的home页面中，可以添加以下代码：

在页面中引入了创建的自定义组件CustomModal，并通过modalVisible属性控制模态框的显示和隐藏。点击“打开模态框”按钮时，调用openModal方法打开模态框，点击模态框内的“关闭”按钮时，调用closeModal方法关闭模态框。