小程序组件学习-完整的对话框

dialog.wxml

dialog.js

Component({
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    properties: {
        // 弹窗标题
        title: {            
            type: String,     
            value: '标题'     
        },
        // 弹窗内容
        content: {
            type: String,
            value: '弹窗内容'
        },
        // 弹窗取消按钮文字
        cancelText: {
            type: String,
            value: '取消'
        },
        // 弹窗确认按钮文字
        confirmText: {
            type: String,
            value: '确定'
        }
    },

    data: {
        // 弹窗显示控制
        isShow: false
    },
    methods: {
       
        //隐藏弹框
        hideDialog() {
            this.setData({
                isShow: !this.data.isShow
            })
        },
        //展示弹框
        showDialog() {
            this.setData({
                isShow: !this.data.isShow
            })
        },
        _cancelEvent() {
            
            this.triggerEvent("cancelEvent")
        },
        _confirmEvent() {
           
            this.triggerEvent("confirmEvent");
            // 自定义的组件出发的事件用的是triggleEvent。触发的事件是confirmEvent
        }
    }
})

//   对于组件接受的参数必须要指明type的类型，properties指明  triggleEvent表示触发的事件，需要与引用这个组件中用bind进行绑定，触发这个事件

dialog.json  （申明此文件是自定义组件）

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

dialog.wxss

/* pages/component/component1/component1.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: #FFFFFF;
    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: #999999;
}
.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);
}

index.json(引用模板)

{
    "usingComponents":{
        "dialog":"../component/dialogs/dialog"
    }
}

index.wxml （在index中触发组件中的事件，需要绑定组建中需要触发的事件，然后触发事件的函数）

  
  
    

     ClickMe! 

index.js(需要初始化的时候获得模板，对于模板里面的方法进行操作)

onReady: function () {
        //获得dialog组件
        this.dialog = this.selectComponent("#dialog");
        console.log(this.dialog)
    },

    showDialog(e) {
        this.dialog.showDialog();
    },
    cancelEvent(){
        this.dialog.hideDialog()
    },
    confirmEvent() {
        console.log("ss")
        this.dialog.showDialog()
    }

对于组件的步骤总结：

1.书写组件模板，然后再js申明组件中接收的数据，对于事件需要使用triggleEvent触发相应的事件，函数在index中写

2.。json申明自定义组件

3,index.json引入该组件，页面中的需要绑定组件中触发的事件，调用函数

4，index.js对触发的函数进行处理