vux中XDialog組件，修改weui-mask(半透明遮罩)

場景：XDialog組件的遮罩的透明度是background: rgba(0, 0, 0, 0.6);而期望是75%的透明度；

項目構成：vue，vux

最終實現效果：

 

 

思路：首先想到了修改組件下weui-mask的樣式，把background: rgba(0, 0, 0, 0.6);改成 background: rgba(0, 0, 0, 0.75),然而，不論是覆蓋，還是將樣式寫在<x-dialog

:dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}"> 這個dialog-style里面，都沒辦法修改內部div遮罩都透明度。於是， 重點來了，我可以在組件內部再加一層遮罩，然后透明度是15%，這樣加上組件中遮罩都60%的透明度，疊加起來，就達到了我們需要都75%都效果。

    <x-button class="buy" @click.native.prevent="share" >分享</x-button>
    <div v-transfer-dom>
      <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}">
        <div class="shade" style="color:#fff;height:100%;width:100%;" @click="showDialogStyle = false">
          <div class="flex flex-r flex-end">
              <p class="arrow-text">點擊這里<br>分享到朋友圈</p>
              <img class="arrows" src="../../assets/img/arrows.png" alt="">
          </div>
        </div>
      </x-dialog>
    </div>

<style lang="less" scoped>
.shade{
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
}
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
.flex-r {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.flex-end{
  -webkit-box-pack: end;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.arrows{
  width:120px;
  height:120px;
  display: inline-block;
  line-height: 0;
}
.arrow-text{
  text-align: left;
  margin-top:100px;
  font-size:16px;
  padding:0 10px;
}
</style>

 

總結:透明度疊加15%+60%=75%。

能改的東西，就用，不能改的，就自己寫。