仿IOS模态弹窗组件【恋人小清单开发总结】

因为默认的弹窗很丑。所以决定自己写一个仿IOS的模态弹窗组件

先看下效果图：

可以扫码体验

目前只是简单实现了一些功能：可以控制确定和取消按钮的文字、颜色、显示顺序。

使用方法：

1、在页面的json配置文件里面添加组件

{
  "usingComponents": {
    "dialog": "/components/dialog/dialog"
  }
}

2、页面的wxml里面引入弹窗组件

3、在页面的js里面初始化组件
/**

• 生命周期函数--监听页面加载

*/

onLoad: function (options) {
  this.dialog = this.selectComponent('#dialog');
}

4、接下来就可以使用了。调用示例

this.dialog.showDialog({
    title: "确定要删除当前清单吗",
    content: "删除后，清单就找不回来了哦",
    cancelText: "我点错了",
    confirmText: "我要删除",
    confirmColor: "#f96e49",
    cancelColor: "#3790EE",
    showCancel: true,
    confirmPosition: "left",
    cancelHandler: function () {
        console.log("点击了取消按钮");        
    },
    confirmHandler: function () {
        console.log("点击了确定按钮OUTER");
    }
});

几年前写的代码，直接拿来用。相对来说比较简单。没有花里胡哨的（有点low我知道。。）

整个组件的原代码如下：

1、dialog.wxml

    
    
        
            {{title}}
        
        
            {{content}}
        
        
            {{cancelText}}
            {{confirmText}}
            {{confirmText}}
        
        
            {{confirmText}}
            {{confirmText}}
            {{cancelText}}
        
    

2、dialog.wxss

.flex_center {
    display: flex;
    align-items: center;
}

.flex_end {
    display: flex;
    align-items: flex-end;
}

.flex_baseline {
    display: flex;
    align-items: baseline;
}

.flex_full {
    flex: 1;
}
.reset-btn:after {
    border: none;
}

.reset-btn {
    background-color: #FAFAFA;
    margin: 0;
    padding: 0;
    font-size: 32rpx;
    border-radius: 24rpx;
}
.custom_dialog{

}
.custom_dialog .cover{
    background-color: #111;
    opacity: 0.6;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;
}
.custom_dialog .dialog{
    width: 560rpx;
    border-radius: 24rpx;
    background-color: #FAFAFA;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 6000;
    margin: -140rpx 0 0 -280rpx;
    padding-top: 10rpx;
    text-align: center;
}
.custom_dialog .dialog .tip, .custom_dialog .dialog .single_tip{
    font-size: 32rpx;
    color: #242424;
}
.custom_dialog .dialog .tip{
    padding: 32rpx 32rpx 30rpx;
    /*height: 100rpx;*/
    text-align: center;
    box-sizing: border-box;
    font-weight: bold;
}
.custom_dialog .dialog .single_tip{
    height: 160rpx;
    line-height: 1.6;
}
.custom_dialog .dialog .content, .custom_dialog .dialog .single_content{
    font-size: 29rpx;
    line-height: 1;
    color: #161616;
    padding: 0 20rpx 40rpx;
}
.custom_dialog .dialog .content{
    margin-top: -10rpx;
    /*height: 70rpx;*/
}

.custom_dialog .dialog .single_content{
    height: 160rpx;
    line-height: 160rpx;
}

.custom_dialog .dialog .no_content{
    padding-bottom: 20rpx !important;
}

.custom_dialog .dialog .no_tip{
    padding-bottom: 10rpx !important;
}



.custom_dialog .dialog .op_btn{
    border-top: 1rpx solid #ccc;
    height: 96rpx;
    line-height: 96rpx;
    font-size: 32rpx;
}
.custom_dialog .dialog .op_btn .confirm{
    color: #3790EE;
}
.custom_dialog .dialog .op_btn .cancel{
    color: #FF644E;
}
.custom_dialog .dialog .op_btn view{
    border-right: 1rpx solid #ccc;
}
.custom_dialog .dialog .op_btn view:last-child{
    border: none;
}

3、dialog.js

const tabbar = require('../../utils/tabbar.js');
Component({
    /**
     * 组件的属性列表
     */
    properties: {},

    /**
     * 组件的初始数据
     */
    data: {
        show: false,
        title: "",//标题
        content: "",//内容
        noTitle: false,//是否显示标题
        noContent: false,//是否显示内容
        showCancel: true,//是否显示取消按钮
        cancelText: "取消",//取消按钮文字
        cancelColor: "#FF644E",//取消按钮颜色
        confirmText: "确定",//确定按钮文字
        confirmColor: "#3790EE",//确定按钮颜色
        confirmPosition: "right",//确定按钮位置：left/right
        cancelHandler: null,//点击取消按钮回调事件
        confirmHandler: null//点击确定按钮回调事件
    },

    /**
     * 组件的方法列表
     */
    methods: {
        showDialog: function (content) {
            var that = this;
            that.setData({
                show: true,
                title: content.title ? content.title : "",
                content: content.content ? content.content : "",
                noTitle: !content.title ? true : false,
                noContent: !content.content ? true : false,
                cancelText: content.cancelText ? content.cancelText : that.data.cancelText,
                cancelColor: content.cancelColor ? content.cancelColor : that.data.cancelColor,
                confirmText: content.confirmText ? content.confirmText : that.data.confirmText,
                confirmColor: content.confirmColor ? content.confirmColor : that.data.confirmColor,
                showCancel: content.showCancel != null ? content.showCancel : that.data.showCancel,
                confirmPosition: content.confirmPosition ? content.confirmPosition : that.data.confirmPosition,
                confirmNeedAuth: content.confirmNeedAuth ? content.confirmNeedAuth : that.data.confirmNeedAuth,
                cancelHandler: content.cancelHandler,
                confirmHandler: content.confirmHandler
            });
            tabbar.hideTab(this);
        },
        _cancelHandler: function () {
            console.log("点击了取消按钮INNER");
            this.setData({
                show: false
            });
            tabbar.showTab(this);
            typeof this.data.cancelHandler == 'function' && this.data.cancelHandler();
        },
        _confirmHandler: function (e) {
            console.log("点击了确定按钮INNER");
            this.setData({
                show: false
            });
            tabbar.showTab(this);
            typeof this.data.confirmHandler == 'function' && this.data.confirmHandler(e);
        }
    }
});