自定义modal模态框

在uni-app中,通过自定义组件和组件扩展来实现自定义的模态框Modal组件。

  1. 创建自定义组件:

在uni-app项目中,创建一个自定义的模态框组件。在components文件夹下创建一个名为CustomModal的文件夹,并在其中创建CustomModal.vue文件。在该文件中定义模态框的布局和样式,例如:

<template>  
    <view class="custom-modal" v-if="visible">  
       <!-- 模态框的内容 -->  
       <view class="content">  
         <slot></slot>  
       </view>  
     </view>  
 </template>  
     
 <script>  
   export default {  
     props: {  
       visible: {  
         type: Boolean,  
         default: false  
       }  
     }  
   };  
  </script>  
 
  <style scoped>  
   .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;  
   }  
  </style>  

模态框组件默认是隐藏的(visible属性默认为false),当visible属性为true时,模态框显示。可以在content元素中放置模态框的内容,通过插槽(slot)的方式实现。

  1. 在需要使用模态框的页面中引入和使用自定义组件:

在需要显示模态框的页面中,引入和使用刚才创建的自定义模态框组件。例如,在pages文件夹下的home页面中,可以添加以下代码:

 <template>  
     <view>  
       <!-- 页面内容... -->  
       <button @click="openModal">打开模态框</button>  
       <!-- 引入自定义模态框 -->  
       <custom-modal :visible="modalVisible">  
         <!-- 模态框的内容 -->  
         <view>  
           <text>这是一个自定义模态框</text>  
           <button @click="closeModal">关闭</button>  
         </view>  
       </custom-modal>  
     </view>  
   </template>  
     
   <script>  
   import CustomModal from "@/components/CustomModal";  
     
   export default {  
     components: {  
       CustomModal  
     },  
     data() {  
       return {  
         modalVisible: false  
       };  
     },  
     methods: {  
       openModal() {  
         // 打开模态框  
         this.modalVisible = true;  
       },  
       closeModal() {  
         // 关闭模态框  
         this.modalVisible = false;  
       }  
     }  
   };  
   </script>  

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

相关推荐
Fetters0429 分钟前
一篇快速上手 Axios,一个基于 Promise 的网络请求库(涉及原理实现)
前端·ajax·axios·promise
蒟蒻的贤32 分钟前
vue11.22
开发语言·前端·javascript
爱上语文34 分钟前
Axios案例练习
前端·javascript·css·html
河畔一角35 分钟前
升级react@18.3.1后,把我坑惨了
前端·react.js·低代码
天天进步201536 分钟前
Vue 3 + Vite:构建闪电般快速的开发环境
前端·javascript·vue.js
Dragon Wu1 小时前
前端框架 Redux tool RTK 总结
前端·javascript·前端框架
yqcoder1 小时前
reactflow 中 useStoreApi 模块作用
前端·javascript
williamdsy1 小时前
【vue】关于异步函数使用不当导致的template内容完全无法渲染的问题
前端·javascript·vue.js
2402_839708051 小时前
第十章:作业
开发语言·前端·javascript
诗水人间1 小时前
前后端分离,解决vue+axios跨域和proxyTable不生效等问题
前端·javascript·vue.js·springboot·springsecurity·跨域·cros