自定义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方法关闭模态框。

相关推荐
周亚鑫10 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二19 分钟前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y52364820 分钟前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
Justinc.26 分钟前
CSS3新增边框属性(五)
前端·css·css3
fruge34 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia43 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫43 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民1 小时前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习