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%。

能改的东西，就用，不能改的，就自己写。