<!--components/dialog/dialog.wxml-->
<view class=\'wx_dialog_container\' hidden="{{!isShown}}">
    <view class=\'wx-mask\'></view>
    <view class=\'wx-dialog\'>
        <view class=\'wx-dialog-title\'>{{ title }}</view>
        <view class=\'wx-dialog-content\'>{{ content }}</view>
        <view class=\'wx-dialog-footer\'>
            <view class=\'wx-dialog-btn\' catchtap=\'_cancelEvent\'>{{ cancelText }}</view>
            <view class=\'wx-dialog-btn\' catchtap=\'_confirmEvent\'>{{ confirmText }}</view>
        </view>
    </view>
</view>

/* components/dialog/dialog.wxss */

.wx-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.wx-dialog {
    position: fixed;
    z-index: 5000;
    width: 80%;
    max-width: 600rpx;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
}

.wx-dialog-title {
    font-size: 18px;
    padding: 15px 15px 5px;
}

.wx-dialog-content {
    padding: 15px 15px 5px;
    min-height: 40px;
    font-size: 16px;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-all;
    color: #999;
}

.wx-dialog-footer {
    display: flex;
    align-items: center;
    position: relative;
    line-height: 45px;
    font-size: 17px;
}

.wx-dialog-footer::before {
    content: \'\';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d5d5d6;
    color: #d5d5d6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

.wx-dialog-btn {
    display: block;
    -webkit-flex: 1;
    flex: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
}

.wx-dialog-footer .wx-dialog-btn:nth-of-type(1) {
    color: #353535;
}

.wx-dialog-footer .wx-dialog-btn:nth-of-type(2) {
    color: #3cc51f;
}

.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid #d5d5d6;
    color: #d5d5d6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

// components/dialog/dialog.js
Component({

    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },

    /**
     * 组件的属性列表
     */
    properties: {
        // 弹窗标题
        title: {            // 属性名
            type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
            value: \'标题\'     // 属性初始值（可选），如果未指定则会根据类型选择一个
        },
        // 弹窗内容
        content: {
            type: String,
            value: \'弹窗内容\'
        },
        // 弹窗取消按钮文字
        cancelText: {
            type: String,
            value: \'取消\'
        },
        // 弹窗确认按钮文字
        confirmText: {
            type: String,
            value: \'确定\'
        },
        // 是否显示Dialog
        isShown: {
            type: Boolean,
            value: false
        }
    },

    /**
     * 私有数据,组件的初始数据
     * 组件的初始数据
     */
    data: {
        // 弹窗显示控制
        // isShow: false
    },

    /**
     * 组件的方法列表
     * 
     */
    methods: {  
        /*
        * 内部私有方法建议以下划线开头
        * triggerEvent 用于触发事件
        */
        _cancelEvent() {
            //触发取消回调
            this.triggerEvent("cancelEvent")
        },
        _confirmEvent() {
            //触发成功回调
            this.triggerEvent("confirmEvent");   //confirmEvent由调用方声明和定义，在调用方 bind:confirmEvent 来声明，在js中定义函数
        }
    }
})

<dialog id=\'dialog\' 
        title=\'我是标题\' 
        content=\'你好，我是自定义内容！\' 
        cancelText=\'取消\' 
        confirm=\'确定\' 
        isShown="{{isShown}}"
        bind:cancelEvent="_cancelEvent" 
        bind:confirmEvent="_confirmEvent"/>

data: {
        isShown: false
    },

    _cancelEvent(e) {
        console.log(\'你点击了取消\');
        //do something when cancle is clicked
        this.setData({
            isShown: false
        })
    },

    _confirmEvent(e) {
        console.log(\'你点击了确定\');
        ////do something when sure is clicked
        this.setData({
            isShown: false
        })
    }   

<button type="primary" bindtap="showDialog"> ClickMe! </button>

    showDialog() {
        this.setData({
            isShown: true
        })
    }