前端代码示例及记录

背景图片自适应大小

background-image: url("../../static/permission/login-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
width: 100vw;

点击非目标元素使目标消失

<img src="../../static/equip/tip.png" class='has-tooltip' @click="clickImg" @click.stop="tooltipShow = true"/>
<div class="tooltip-div" v-bind:class="tooltipShow ? 'o-1' : 'o-0'" ref="showTooltip">
	<span class='tooltip'>图片能明确本治理设施风量，活性炭设计使用量以及活性炭更换周期的相关支撑文件（工程设计文本，环评报告等）</span>
</div>

.o-0 {
  opacity: 0;
}
.o-1 {
  opacity: 1;
}

data() {
    return {
    	tooltipShow: false,
   }
}
methods: {
	clickImg(){
      this.tooltipShow = true;
    }
},
created() {
  document.addEventListener('click', (e) => {
    if (this.$refs.showTooltip) {
      let isSelf = this.$refs.showTooltip.contains(e.target)
      if (!isSelf) {
        this.tooltipShow = false
      }
    }
  })
}