小程序开发之模态框组件封装

模态框组件

一、前言

对于模态框肯定大家都知道，诸如：Bootstartp、element-ui、layui等等都有自己的弹出层，并可以之定义内容，但是小程序的弹出层原生的太简单，那么我们如果自定义呢？

其实很简单，就是一个遮罩、一个view内容区就搞定了！接下来看一下我自己封装后的模态框效果：

感觉还可以哈！

二、模态框组件的使用

1. 先在使用页面的json注册该组件

   {
     "navigationBarTitleText": "XXXX",
     "usingComponents": {
       "print-popups": "/components/popups/popups"
     }
   }
   

2. 使用组件

   <view>
       <print-popups ifOpen='{{modelStatus}}' bind:ifClose='closeModel'>
           <view slot='popups_main' class='popups_main'>
               <view class='popups_item'>添加新设备</view>
   			<view class='popups_item print_name'>
       			<input class='print_input' value='设备1' auto-focus />
           		<view class='print_tip'>（点击设备可编辑）</view>
   			</view>
   			<view class='popups_item print_id'>
       			<input placeholder="请输入新添设备ID" />
           		<view class='print_id_check'>可用</view>
   			</view>
   			<button class='popups_item print_btn' type='primary' size='mini'>添加</button>
   		</view>
   	</print-popups>    
   </view>
   

3. 添加隐藏/显示方法

   Page({
     /**
      * 页面的初始数据
      */
     data: {
       modelStatus: false
     },
     /**
      * 点击按钮打开模态框
      */
     openModel () {
       const modelStatus = !this.modelStatus
       this.setData({ modelStatus})
     },
     /**
      * 子组件触发的事件
      */  
     closeModel (event) {
       console.log(event.detail.value)
       this.setData({
         modelStatus: event.detail.value
       })
     }
   })
   

三、模态框组件源码

1. Json文件

   {
     "component": true,
     "usingComponents": {}
   }
   

2. wxml文件

   需要在阿里图标库找一张close.png的图片。

   <!--components/popups/popups.wxml-->
   <view wx:if="{{ifOpen}}">
     <view class='popups_shade' bindtap='popupsClose'></view>
     <view class='popups_content'>
       <image src='./images/close.png' class='popups_close' bindtap='popupsClose'></image>
       <slot name='popups_main'/>
     </view>
   </view>
   

3. wxss文件

   /* components/popups/popups.wxss */
   /* 遮罩 */
   .popups_shade {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;
     background: #000;
     opacity: 0.7;
     overflow: hidden;
   }
   /* 弹出层内容 */
   .popups_content {
     width: 500rpx;
     height: 350rpx;
     overflow: hidden;
     position: fixed;
     top: 0px;
     left: 0px;
     bottom: 0px;
     right: 0px;
     margin: auto;
     z-index: 1001;
     background: #FAFAFA;
     border-radius: 5px;
   }
   .popups_close {
     width: 30rpx;
     height: 30rpx;
     position: absolute;
     right: 3px;
     top: 3px;
   }
   

4. js文件

   // components/popups/popups.js
   Component({
     options: {
       multipleSlots: true
     },
     /**
      * 组件的属性列表
      */
     properties: {
       ifOpen: Boolean
     },
   
     /**
      * 组件的初始数据
      */
     data: {
       
     },
   
     /**
      * 父子组件通信
      * 组件的方法列表
      */
     methods: {
       popupsClose () {
         console.log('关闭弹出层' + this.properties.ifOpen)
         this.triggerEvent('ifClose', { value: !this.properties.ifOpen})
       }
     }
   })
   

四、思路

主要是使用slot插槽可以不需要定义内容，可以在使用组件的页面自定义，这样就可以很好提高扩展性！