微信小程序

实现了标题，内容和按钮设置，可动态设置按钮,以及按钮点击事件的回调，可作为component 使用

直接上代码

//遮罩的代码<viewclass="uiComponent uiComponent_mask uiComponent_mask_{{uiComponent.mask.show &&'active'}}" style="{{uiComponent.mask.style}}" ></view>//dialog的代码<view wx:if="{{uiComponent.dialog.show}}" class="uiComponent uiComponent-dialog uiComponent-dialog_{{ uiComponent.dialog.show &&'active' }}" style="{{uiComponent.dialog.style}}"  >  <view class='uiComponent-dialog-title txt-nowrap' wx:if="{{ uiComponent.dialog.title }}">{{ uiComponent.dialog.title }}</view>   <view class='uiComponent-dialog-content' wx:if="{{ uiComponent.dialog.content }}">{{ uiComponent.dialog.content }}</view>   <view class='uiComponent-dialog-btns' wx:if="{{ uiComponent.dialog.btns.length>0 }}">      <view bindtap='uiComponent_dialog_btnclick' class='uiComponent-dialog-btn  txt-nowrap' wx:for="{{uiComponent.dialog.btns}}" wx:key="{{index}}" data-index="{{index}}" style="width:{{1/uiComponent.dialog.btns.length*99.99999}}%;{{item.style}}"><view>{{item.text}}</view></view>   </view> </view> <viewclass="uiComponent uiComponent_mask uiComponent_mask_{{uiComponent.mask.show &&'active'}}" style="{{uiComponent.mask.style}}" ></view>

/**显示或隐藏mask */UIComponent.mask = function (show=false,style='') {  var self = this;  self.setData({    'uiComponent.mask.show': show,    'uiComponent.mask.style': style  });}/** dialog *  按照界面,这里可排布的大概也就3个左右 * btns:[ *        { *          text: "确定", *          style: "", *          click: function(e, idx, btn){ *  *        }   *    } * ] *  *  * 调用例子  self.dialog({ show: true, title: "111", content: "2222", btns: [      {        text: "确定" ,        click: function (e, idx, btn){          self.toast(`选中了第${idx}个按钮`)        }      },      {        text: "样式",        style:"color:white;background-color:green;"      } ,      {        text: "不能取消",        click:function(e,idx,btn){            self.toast("不满足条件,不能取消")            return false;        }      }    ]  }) * self.dialog({show:false}) */UIComponent.dialog = function (opt={}) {  var self = this;  let app = getApp();  opt = app.util.extend({},{    //默认有遮罩    mask:true,    show:false ,    //按钮组     btns:[    ],    title:"",    content:""  },opt);   if (opt.mask){         self.mask(opt.show)   }  if(opt.show){    if (!opt.btns || opt.btns.length==0){      opt.btns=[        {          text:"确定"        }      ];    }  }  self.setData({    'uiComponent.dialog.show': opt.show,    'uiComponent.dialog.style': opt.style,    'uiComponent.dialog.btns': opt.btns,    'uiComponent.dialog.title': opt.title,    'uiComponent.dialog.content': opt.content  });  }/** * 所有的按钮touch事件都关注到这里 */UIComponent.uiComponent_dialog_btnclick=function(e){  var self = this;  var index = e.currentTarget.dataset.index;  var btns = self.data.uiComponent.dialog.btns;  var btn = btns[index];  var func = btn.click;  if (typeof func=="function"){    var ret= func.apply(self, [e, index, btn]);    if(ret!==false){ //click事件可返false禁止关闭dialog       self.dialog({        show: false      });    }  }else{    self.dialog({      show:false    });  }}

/**截断为1行文字,超出...*/.txt-nowrap {  text-overflow: -o-ellipsis-lastline;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;}/* 遮罩层 */.uiComponent_mask{    height:0;width:0;transform:translateZ(0) translateY(-1);    transition: all .1s ;  }.uiComponent_mask_active{    height:100vh;width:100%;display:block;position:fixed;top:0;left:0;z-index:99;    background-color: rgba(0,0,0,.6);transform:translateZ(0) translateY(0); transition: all .01s ;  }/** dialog */.uiComponent-dialog{  display:none;}.uiComponent-dialog_active{  display:block;background-color: white;border-radius:8rpx;  width:70%;position:fixed;top:30%;left:15%;min-height:50px;}.uiComponent-dialog-title{  text-align: center;font-size: 14px;color:#808080;  padding:10px 5rpx 0 5rpx;}.uiComponent-dialog-content{  text-align: center;font-size: 16px;color:#202020;  padding:10px 5rpx;}.uiComponent-dialog-btns{  display:flex;align-items: center;text-align: center;justify-content: space-around;border-top: 1px solid #ccc;}.uiComponent-dialog-btn:first-child{   border-left: 0;}.uiComponent-dialog-btn{   font-size: 14px;padding:10rpx 0; border-left: 1px solid #ccc;}

本文作者：jifsu
原文地址：微信小程序-dialog-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟