Mask micro-channel function of small programs to achieve

1. Place a blank div, as the outermost layer of the mask
 <view class='mask' v-if="{{flag}}"></view>
2. Write the mask layer style
.mask{
  width:100%;
  height:100%;
  position:absolute;
  background-color:#999;
  z-index:9999;
  top:0;
  left:0;
  opacity:0.5;
}

Wherein the color can optionally, transparency may be optionally.
Compatible process:

-moz-opacity: 0.7;
opacity: 0.70;
filter: alpha(opacity=70);
3. Control show or hide

Or hiddle with v-if true and false to control a display mask or hide, when the flag is set to false, hide; to true, the display

// 遮罩层显示
  show: function () {
    this.setData({ flag: false })
  },
  // 遮罩层隐藏
  conceal: function () {
    this.setData({ flag: true })
  },

Guess you like

Origin www.cnblogs.com/jessie-xian/p/11571642.html