微信小程序自定义Dialog

自定义组件，因为小程序是 MVVM 是数据驱动，所以，把所有的控制流程、动态流程的数据（即自变量）都交给组件的调用方，随着调用方 setData 使元数据改变来驱动控制流程、动态流程（因变量）的变化，如 Dialog的显示和隐藏是因变量，而控制 Dialog 的显示状态的量则是因变量。

类似于页面，一个自定义组件由json wxml wxss js 4个文件组成。

自定义组件

1、 json 文件配置

要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明：

{
  "component": true,
  "usingComponents": {}
}

2、wxml 模板

还要在 wxml 文件中编写组件模版：

<!--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>

3、wxss 样式

在 wxss 文件中加入组件样式：

/* 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);
}

4、js 控制

在自定义组件的js文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

// 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中定义函数
        }
    }
})

调用

1、json文件配置

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

    "usingComponents": {
        "dialog": "../../../components/dialog/dialog"  //标签名 ： 组件路径
    }

2、wxml 中引用

在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

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

3 、js控制

js 文件中需要声明Data，以及触发的函数。

    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
        })
    }

效果