微信小程序 - dialog

發表時(shí)間：2021-3-31

發布人(rén)：融晨科技

浏覽次數：60

實現了(le／liǎo) 标題,内容和(hé / huò)按鈕設置,可動态設置按鈕,以(yǐ)及按鈕點擊事件的(de)回調

可作爲(wéi / wèi)component 使用

直接上(shàng)代碼

//遮罩的(de)代碼

 <viewclass="uiComponent uiComponent_mask uiComponent_mask_{{uiComponent.mask.show &&'active'}}" style="{{uiComponent.mask.style}}" ></view>
 

//dialog的(de)代碼
<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>

/**顯示或隐藏mask */
UIComponent.mask = function (show=false,style='') {
  var self = this;
  self.setData({
    'uiComponent.mask.show': show,
    'uiComponent.mask.style': style
  });
}



/** dialog
 *  按照界面,這(zhè)裏可排布的(de)大(dà)概也(yě)就(jiù)3個(gè)左右
 * btns:[
 *        {
 *          text: "确定",
 *          style: "",
 *          click: function(e, idx, btn){
 * 
 *        }  
 *    }
 * ]
 * 
 * 
 * 調用例子(zǐ)
  self.dialog({ show: true, title: "111", content: "2222", btns: [
      {
        text: "确定" ,
        click: function (e, idx, btn){
          self.toast(`選中了(le／liǎo)第${idx}個(gè)按鈕`)
        }
      },
      {
        text: "樣式",
        style:"color:white;background-color:green;"
      } ,
      {
        text: "不(bù)能取消",
        click:function(e,idx,btn){

            self.toast("不(bù)滿足條件,不(bù)能取消")
            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
  });
  
}
/**
 * 所有的(de)按鈕touch事件都關注到(dào)這(zhè)裏
 */
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
    });
  }
}

/**截斷爲(wéi / wèi)1行文字,超出(chū)...*/

.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;
}