vue 点击空白区域盒子隐藏

最新推荐文章于 2023-06-14 09:50:47 发布

天河-

最新推荐文章于 2023-06-14 09:50:47 发布

阅读量2.1k

点赞数 1

分类专栏：互联网 web前端文章标签： vue web前端

本文链接：https://blog.csdn.net/qq_44333271/article/details/89393784

版权

web前端同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

互联网

49 篇文章 0 订阅

订阅专栏

方法一：指令实现

<template>
    <div>
        <div class="show" v-show="show" v-clickoutside="handleClose">我是要消失的Div</div>
    </div>
</template>

<script>
const clickoutside = {   // 初始化指令
    bind(el, binding, vnode) {
        function documentHandler(e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
            if (el.contains(e.target)) {
                return false;
            }
            // 判断指令中是否绑定了函数
            if (binding.expression) {
                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                binding.value(e);
            }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    update() {},
    unbind(el, binding) { // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    },
};
export default {
    name: 'HelloWorld',
    data() {
        return {
            show: true,
        };
    },
    directives: {clickoutside},
    methods: {
        handleClose(e) {
            this.show = false;
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.show {
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>

方法二：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
  </head>
  <style media="screen">
  .box-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .box{
    width: 200px;
    height: 200px;
    background-color: #999;
  }
  </style>
  <body>
    <div id="app">

      <div class="box-container" @click.self="toggleBox"> <!-- self的作用是阻止冒泡，点击box区域时，box不会消失 -->
        <div class="box" v-show="showBox">
          {{message}}
        </div>
      </div>
      
    </div>
  </body>

  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '这是一个盒子',
      showBox: true
    },
    methods: {
      toggleBox: function() {
        this.showBox = false;  //通过控制showBox来控制box的显示与隐藏
      }
    }
    })
  </script>
</html>