Vue 蒙版Demo

<template>
    <transition name="fade" mode="out-in">
        <section class="messageMask" v-show="visible" @click="writeMessageFun($event)">
            <div id="msk" class="messageMaskContent" ref="msk">
                <slot></slot>
            </div>
        </section>
    </transition>
</template>

<script>
export default {
  name: 'index',
  mounted () {
    this.stopPropagation()
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    writeMessageFun (ev) {
      if (!this.$refs.msk.contains(ev.target)) {
        this.visible = false
      }
      this.$emit('cancel', this.show)
    },
    stopPropagation () {
      this.$refs.msk.addEventListener('click', function (e) {
        // Stop bubbling event
        e.stopPropagation()
      }, false)
    }
  },
  watch: {
    show () {
      this.stopPropagation()
      this.visible = this.show
    }
  }
}
</script>

<style scoped>
    .messageMask{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0,0,0,.3);
        z-index: 1000;
        .messageMaskContent{
            position: absolute;
            pointer-events: none;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1001;
            background-color: #fff;
        }
    }
</style>