vue中点击div之外区域实现div的隐藏

2024年1月31日 143次阅读 来源: develop_

html部分:

<template>
    <div class="box" @click="showSetting">
        <div class="settingCon" @click="settingEvent($event)">
            <span @click="clickSetting">点击设置</span>
            <div v-show="showSettingCon">显示设置内容</div>
        </div>
    </div>
</template>

逻辑部分：

<script>
   export default {
       data(){
           return{
               showSettingCon:false, 
           } 
       },
       methods:{
           showSetting(){
               this.$set(this, 'showSettingCon', false);
               //全局区域内点击时showSettingCon均为false
           },
           settingEvent(event){
               event.stopPropagation(); //此区域不受上面方法的影响
           },
           clickSetting(){
               this.$set(this, 'showSettingCon', !this.showSettingCon)
               //事件触发时showSettingCon显示隐藏状态互换
           }
       }
   }
</script>

css部分：

<style scoped lang="scss">
  .box{
    width: 100%;
    height: 100%;
  }
  .settingCon{
    position: relative;
    b{
      width: 300px;
      height: 50px;
    }
    div{
      width: 500px;
      height: 300px;
      background: lightpink;
      position: absolute;
      top: 50px;
    }
  }
</style>
    原文作者：develop_
    原文地址: https://segmentfault.com/a/1190000018908026
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞