演示

在这里插入图片描述

思路

其实利用了冒泡的原理,通过阻止冒泡,来使点击内部的时候,不触发外部的时间(阻止冒泡,可以用e.stopPropagation()),点击外部的时候,触发事件。

代码

这里我使用的是 mpvue,理解思路才比较重要

<template>
	<div v-if="showFloat" @click="controlShowFloat('notShow')">
	    <div @click.stop="controlShowFloat('show')">
	        <div>会议内容</div>
	    </div>
	</div>
<template>
<script>
export default {
    data() {
        return {
            showFloat: false
        };
    },
    methods: {
        // 点击外部,让弹框消失
        controlShowFloat(str){
            controlShowFloat(str){
            // 通俗易懂版
            // console.log(str);
            // if(str == 'notShow'){
            //     this.showFloat = false;
            // }else {
            //     this.showFloat = true;
            // }
            
            // 简洁版
            if(str != 'notShow') return ;
            this.showFloat = false;
        },
        }
    }
};
</script>
Logo

前往低代码交流专区

更多推荐