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

小程序中常用的模态框组件包括原生的<modal>和现成的第三方插件，但是这些组件不够灵活且有些过于复杂。下面是一些关于模态框组件封装的完整攻略：

1. 创建弹窗组件

1.1 创建模态框文件夹及文件

在小程序开发工具中，我们可以通过右键菜单创建文件夹和文件。首先，我们需要在项目中新建一个文件夹components，然后在components文件夹中新建一个文件夹modal，并在modal文件夹中新建两个文件modal.wxml和modal.wxss。

1.2 模态框组件代码

在modal.wxml中编写以下代码：

<view class="modal-mask" catchtap="hideModal"></view>
<view class="modal">
  <view class="modal-header">{{title}}</view>
  <view class="modal-body">{{content}}</view>
  <view class="modal-footer">
    <button class="modal-close" catchtap="hideModal">取消</button>
    <button class="modal-confirm" catchtap="confirm">确定</button>
  </view>
</view>

上面代码定义了一个模态框组件，包括遮罩层和弹窗部分。弹窗部分包含标题、内容以及底部按钮组。其中，title和content是组件的属性，通过外部传入，并在组件内部绑定显示的文本。底部按钮组包括取消和确认两个按钮，通过绑定catchtap事件触发外部的事件方法。

在modal.wxss中编写以下代码：

.modal-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 480rpx;
  border-radius: 6rpx;
  background-color: #fff;
  z-index: 100;
  overflow: hidden;
}

.modal-header {
  padding: 16rpx;
  font-size: 28rpx;
  font-weight: bold;
  text-align: center;
  color: #666;
}

.modal-body {
  padding: 24rpx;
  font-size: 32rpx;
  line-height: 1.6;
  color: #666;
}

.modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16rpx;
}

.modal-close,
.modal-confirm {
  width: 48%;
  height: 88rpx;
  border: none;
  border-radius: 6rpx;
  font-size: 28rpx;
  color: #fff;
}

.modal-close {
  background-color: #999;
  opacity: 0.8;
}

.modal-confirm {
  background-color: #00a5e9;
  opacity: 0.8;
}

上面代码设置了模态框组件的样式，包括遮罩层、弹窗和底部按钮的样式。

1.3 模态框组件js代码

在modal.js中编写以下代码：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: '提示'
    },
    content: {
      type: String,
      value: ''
    },
    show: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    hideModal: function() {
      this.setData({
        show: false
      })
    },

    confirm: function() {
      this.triggerEvent('confirm')
      this.hideModal()
    }
  }
})

上面代码定义了模态框组件的属性和方法，包括设置标题、内容和显示状态的属性以及隐藏组件和确认按钮的事件方法。其中，triggerEvent用于触发自定义事件，可以在外部使用bind:confirm绑定事件。

2. 使用弹窗组件

2.1 在页面中使用组件

在需要使用弹窗组件的页面中，需要先引入组件：

<import src="../../components/modal/modal.wxml" />
<template is="modal" data="{{...modal}}" />

上面代码引入了modal组件的wxml文件，并使用template标签来调用组件并传入相应的属性。

2.2 引入组件js代码

在需要使用弹窗组件的页面的js文件中，需要先引入组件：

import modal from '../../components/modal/modal'

然后在data中定义modal属性，并在需要显示弹窗的方法中设置modal属性的值：

data: {
  modal: {}
},

showModal: function() {
  this.setData({
    'modal.show': true,
    'modal.content': '确定要删除数据？'
  })
},

confirm: function() {
  console.log('确认删除')
}

上面代码使用了setData方法设置modal属性的值，包括设置显示弹窗和传入内容。在确认按钮的事件方法中，可以触发confirm事件。

示例1：

<import src="../../components/modal/modal.wxml" />
<template is="modal" data="{{...modal}}" />

<view class="page">
  <button class="btn" bindtap="showModal">显示弹窗</button>
</view>

import modal from '../../components/modal/modal'

Page({
  data: {
    modal: {}
  },

  onLoad: function() {
    this.setData({
      'modal.title': '提示',
      'modal.confirmText': '确认删除'
    })
  },

  showModal: function() {
    this.setData({
      'modal.show': true,
      'modal.content': '确定要删除数据？'
    })
  },

  confirm: function() {
    console.log('确认删除')
  }
})

示例2：

<import src="../../components/modal/modal.wxml" />
<template is="modal" data="{{...modal}}" />

<view class="page">
  <button class="btn" bindtap="showModal">显示弹窗</button>
</view>

import modal from '../../components/modal/modal'

Page({
  data: {
    modal: {}
  },

  onLoad: function() {
    this.setData({
      'modal.title': '提示',
      'modal.confirmText': '确认'
    })
  },

  showModal: function() {
    this.setData({
      'modal.show': true,
      'modal.content': '确定要提交数据？'
    })
  },

  confirm: function() {
    console.log('确认提交')
  }
})

上面代码中的示例1和示例2都是在页面中引入了modal组件，并在方法中设置了modal属性的值，可以根据实际需求来设置弹窗的标题和内容。