微信小程序自定义封装组件-showModal

封装一个组件

这里由于最近使用微信小程序居多，所以着重写的是小程序的，但是万变不离其宗，组件实现思路其实都差不多的

微信小程序开发中官方自带的wx.showModal，这个弹窗
API有时候并不能满足我们的弹窗效果，所以往往需要自定义modal组件。下面我们进行一个自定义modal弹窗组件的开发，并进行组件的引用。

 wx.showModal({
    cancelColor: 'cancelColor',
    title: '提示',
    content: '这是一个模态弹窗',
})

效果如下：

使用微信自定义modal，功能单一，样式也不能满足ui需求，这里自定义一个modal

我们新建在components里新建一个modal文件来封装我们自己的自定义弹框：

index.wxml页面

<view wx:if="{{_show}}" class='popV' catchtouchmove="move">
    <view class='popV-mask' bindtap="selectMask" animation='{{maskAnimate}}'></view>
    <!-- 动态修改top -->
    <view class='popV-content' animation='{{frameAnimate}}'>
        <view class="tap_title" wx:if="{{tabTitleShow}}">{{tapTitle}}</view>
        <view class="popV-title" wx:if="{{title}}">{{title}}</view>
        <slot wx:if="{{custom}}"></slot>
        <view class='popV-content-btm'>
            <button wx:for="{{btns}}" wx:key="index" data-index="{{index}}" class='popV-item' style="color:{{btnTextColor[index]?btnTextColor[index]:''}};" hover-class='popV-hover' bindtap='selectBtn'>
                {{item}}
            </button>
        </view>
    </view>
</view>

这里由于动效展示，使用了animation动画，大家也可以用这个api来实现想要的效果，如果想要更好的效果其实也可以通过设置参数来实现更好的弹框效果展示，这里不做更多的展示，喜欢的可以自己优化

组件相关参数

参数名	含义
_show	弹框是否展示（Boolean类型）
tapTitle	顶部提示标题（string）
tabTitleShow	顶部提示标题 是否展示（Boolean类型）
title	提示文字（string）
btns	底部按钮（array）
btnTextColor	底部文字颜色（array）
custom	是否自定义插糟（Boolean类型）

然后，我们在需要的地方，index.json中引入组件

 "usingComponents": {
    "modal":"./common/index"
  }

1.简单封装组件

在自己要使用的组件使用：

<modal show="true" title="这是一个弹框" btns="{{['取消','确定']}}" binddidClickBtn="onClickModalBtn"></modal>

如下图就实现了弹框展示效果：

这里我们直接把组件的props show写死了，所以直接展示，我们可以通过动态数组来实现展示隐藏，

我们看看效果：

这里可以看到大部分效果已经实现，这里我们对最外层的view做了一个catchtouchmove方法，用来组织冒泡

接下来就是对底部按钮的处理：

 // 选中底部的按钮
selectBtn: function (e) {
    let index = e.currentTarget.dataset.index;
    this.triggerEvent('didClickBtn', index); // 外面通过e.detail获取index的值
},

我们让组件设置一个triggerEvent事件，让父组件接受这个事件，使得调用该组件的组件能够处理底部按钮点击对应的事件

// wxml
<modal show="{{modalShow}}" title="这是一个弹框" btns="{{['取消','确定']}}" binddidClickBtn="onClickModalBtn"></modal>
// js
  //底部按钮点击
onClickModalBtn(e){
    console.log(e);
    if(e.detail == 0){
        console.log('关闭事件');
    }else{
        console.log('确定事件');
    }
}

这里我们只对两个按钮的做处理，如果对应的多个组件可以自定义封装，由于没有做到多个按钮的需求，底部按钮只做两个：

我们看看效果:

这样我们就实现了对Modal的简单封装，你想要在那个文件使用，在json引入就可以。

2.优化封装

但是有一个问题就是，每次想要弹窗都需要创建一个modal，然后在里面写入相关的参数，也是有点小麻烦的。

我们可以把参数抽出来，写在函数里面，实现像微信小程序一样的写法，具体可以 参考 wx.showModal(Object object)

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

这样子写起来着实方便，快捷，易懂，我们对现有代码进行封装，把相关参数抽离到一个函数中：

 showModal: function (params) {
    let {cuccess,error} = this
    this.setData({
    show: !this.data.show,
    title: params.title,
    tabTitleShow:params.tabTitleShow,
    success: params.success || function () { },
    error: params.error || function () { },
    })
},
// 选中底部的按钮
selectBtn: function (e) {
    let index = e.currentTarget.dataset.index;
    this.triggerEvent('didClickBtn', index); // 外面通过e.detail获取index的值
    if (index == 0) {
    this.setData({
        show: false
    }, () => {
        this.data.error()
    })
    } else {
    this.setData({
        show: false
    }, () => {
        this.data.success()
    })
    }
},

这里把所有参数放到了showModal方法里，然后点击取消确定时关闭弹框并且触发成功失败方法，在调用组件时可以在success、error回调中做相应的方法

我们在调用组件的位置调用showModal:
由于是获取组件里的方法，所以我们需要先获取组件

// show  调用
this.modal = this.selectComponent("#modal")
onClick4() {
    this.modal.showModal({
      show: true,
      title: '函数调用',
      tabTitleShow: false,
      success :(res) => {
        wx.showToast({
          icon:"success",
          title: '确定按钮点击',
        })
      },
      error: () => {
        wx.showToast({
          icon:'error',
          title: '取消按钮点击',
        })
      },
    }) 
  },

我们看看效果：

这里已经实现了函数调用组件

3.将组件全局化

但是每个组件都得重新获取组件，然后才能调用方法，这个也很麻烦，我们可以全局实例化这个方法，在app.js把这个方法挂载：

//app.js

showModal(that,options){
    that.selectComponent('#modal').showModal(options);
  }
// 组件调用
const app = getApp()
app.showModal(this,{
    show: true,
    title: '函数调用',
    tabTitleShow: false,
    success :(res) => {
    wx.showToast({
        icon:"success",
        title: '确定按钮点击',
    })
    },
    error: () => {
    wx.showToast({
        icon:'error',
        title: '取消按钮点击',
    })
  },
}) 

这样子，全局组件就封装好了，调用效果和上面函数调用效果一样，这里我只把我常用的参数和方法进行了封装，大家也可以根据自己产品对封装组件进行很多函数。参数的封装。

微信小程序的弹框已经大概实现，其实vue、react也大致相同。可以参考封装一个，这里不做解释.

这里附上相关代码，希望能帮助大家：

微信小程序自定义modal 代码 》》》 自定义modal

其他作品也希望大佬多多指点

码字不易，希望大佬多多指点！