vue的关闭遮罩层

   <transition name="fade">
      <div class="mask" v-show="shareContShow" @click="hidePanel($event)">
        <!-- @mouseenter="downloadShareOpen = true"
        @mouseleave="downloadShareOpen = false"-->
        <div class="shareContent">
          <div class="downloadShare" v-if="downloadShareOpen">
            <a id="downLink" @click="downloadShareFun()" download="downImg">
              <!-- download="downImg"-->
              <i class="iconfont icon-xiazai"></i>
            </a>
          </div>
          <div class="cover">
            <img :src="api + main.zhanshi_pic " alt />
          </div>
          <div class="shareBottom">
            <div class="left">
              <div class="title">代价</div>
              <div class="desc">
                <p>作者</p>
                <p>|</p>
                <p>7.9BPM</p>
              </div>
              <div class="logo">
                <img src="/static/image/logo.png" alt />
              </div>
            </div>
            <div class="right">
              <div class="qr" id="qrcode"></div>
              <div class="scanText">扫一扫查看详情</div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    // 关闭遮罩层的函数
    hidePanel(event) {
     
      let dom = document.querySelector('.shareContent')
      if (dom) {
     
        // console.log(dom.contains(event.target))
        if (!dom.contains(event.target)) {
     
          this.shareContShow = false
        }
      }
    },

你可能感兴趣的:(vue学习)