//遮罩的代码

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

/**显示或隐藏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:;

  -webkit-box-orient: vertical;

}

/* 遮罩层 */

.uiComponent_mask{

    height:;width:;transform:translateZ(0) translateY(-1);

    transition: all .1s ;

}

.uiComponent_mask_active{

    height:100vh;width:100%;display:block;position:fixed;top:;left:;z-index:;

    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:;

}

.uiComponent-dialog-btn{

   font-size: 14px;padding:10rpx 0; border-left: 1px solid #ccc;

}