小程序：点击外部关闭弹窗

演示

思路

其实利用了冒泡的原理，通过阻止冒泡，来使点击内部的时候，不触发外部的时间（阻止冒泡，可以用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>