大家可能疑惑了，微信小程序有自己的showMode，而且API十分的完善，为啥还要自己封装呢？难道自带的有bug？小编会告诉你No。因为微信小程序自带的showModel是固定的，只能用显示文字，如果你想显示表单，并且用户可以输入，那么微信小程序自带的就不能使用了吧，一般就是再写个输入界面，那多麻烦啊，还不如自己封装一个showMode的组件呢。下面小编给大家看下小编怎么做的。仅供参考哈。
首先是wxml：

<view class='mask' wx:if='{{show}}'>
    <view class='modal-content'>
        <view class="title">{{title}}</view>
        <slot></slot>
        <view class='modal-btn-wrapper'>
            <view class='cancel-btn' bindtap='cancel' wx:if="{{showCancel}}" style="color:{{cancelColor}}">{{cancelText}}</view>
            <view class='confirm-btn' bindtap='confirm' style="color:{{confirmColor}}">{{confirmText}}</view>
        </view>
    </view>
</view>

样式wxss：

.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9999;
}

.modal-content {
    display: flex;
    flex-direction: column;
    width: 85%;
    padding: 10rpx;
    background-color: #fff;
    border-radius: 15rpx;
}

.title {
    font-size: 40rpx;
    text-align: center;
    padding: 15rpx;
}

.modal-btn-wrapper {
    display: flex;
    flex-direction: row;
    height: 100rpx;
    line-height: 100rpx;
    border-top: 2rpx solid rgba(7, 17, 27, 0.1);
}

.cancel-btn, .confirm-btn {
    flex: 1;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
}

.cancel-btn {
    border-right: 2rpx solid rgba(7, 17, 27, 0.1);
}

.main-content {
    flex: 1;
    height: 100%;
    overflow-y: hidden;
}

然后是js

Component({

    /**
     * 组件的属性列表
     */
    properties: {
        title: {
            type: String,
            value: '提示'
        },

        //是否显示取消按钮
        showCancel: {
            type: Boolean,
            value: true
        },
        //取消按钮文字
        cancelText: {
            type: String,
            value: '取消'
        },
        //取消按钮颜色
        cancelColor: {
            type: String,
            value: '#000000'
        },
        //确定按钮的文字
        confirmText: {
            type: String,
            value: '确定'
        },
        //确定按钮的颜色
        confirmColor: {
            type: String,
            value: '#576B95'
        },
        //是否显示modal
        show: {
            type: Boolean,
            value: false
        },
    },

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

    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 取消函数
        cancel() {
            this.setData({
                show: false
            })
            this.triggerEvent('cancel')
        },
        // 确认函数
        confirm() {
            this.setData({
                show: false
            })
            this.triggerEvent('confirm')
        }
    }
})

最后搞定：