vue3中的弹框，点击外部区域隐藏

• 效果图（点击右侧的按钮，展示弹框，点击外部区域，当前的弹框进行隐藏）

  
  image.png

• 首先要将按钮和弹框写在一个组件中，用一个标签将两个进行包裹，否则后面点击的话，会有问题

• 话不多说，直接上代码

<div class="dialog-po" ref="dialog">
        <img src="../assets/image/icon.png" alt="" class="icon" @click="() => (show = !show)" />
        <div class="dialog" v-if="show">
            <ul>
                <li v-for="(item, index) in actions" :key="index" class="flexr flexcc po-li" @click="onSelect(index)" ref="dialogChild">
                    <img src="../assets/image/ac.png" alt="" class="ac" v-show="item.check" />
                    <p :class="item.check ? 'ac-li' : ''">{{ item.text }}</p>
                </li>
            </ul>
        </div>
    </div>

• 上述代码中，第一张图片是菜单，图片中的右上角的小按钮，主要是ref在当前页面的根标签上

<script>
import { watch } from 'vue';
export default {
    name: 'DialogPage',
    components: {},
    props: {},
    emits: ['dialogTitlte'],
    setup(props, { emit }) {
        const data = reactive({
            show: false,
            actions: [
                { text: '首页', check: true, path: '/' },
                { text: '我们的产品', check: false, path: '/product' },
                { text: '订制化解决方案', check: false, path: '/option' },
                { text: '果儿商城', check: false, path: '/shop' },
                { text: '新闻资讯', check: false, path: '/message' },
                { text: '关于我们', check: false, path: '/about' },
            ],
        });
        const route = useRoute();
        const router = useRouter();
        // 不是点击弹框中的事件，直接跳转展示的问题进行优化
        watch(
            () => route.path,
            (newVal) => {
                data.actions.forEach((item) => {
                    if (item.path === newVal) {
                        item.check = true;
                    } else {
                        item.check = false;
                    }
                });
            }
        );
        // 弹框中的点击事件，进行回调父组件通知更新
        const onSelect = (k) => {
            data.actions.forEach((item) => (item.check = false));
            data.actions[k].check = true;
            emit('dialogTitlte', data.actions[k].text);
            data.show = false;
            if (k == 3) {
                window.open('https://miniapp.coretecnology.com/h5/guoer/index.html#/', '_blank');
            } else {
                router.push(data.actions[k].path);
            }
        };

        const dialog = ref(null);
        onMounted(() => {
            document.addEventListener('click', (e) => hideDialog(e));
        });
        // 监听弹框标签外的点击事件，弹框外的点击事件可隐藏当前的弹框
        const hideDialog = (e) => {
            console.log('e', e, dialog.value?.contains(e.target), data.show);
            if (data.show && !dialog.value?.contains(e.target)) {
                data.show = false;
            }
        };
        onUnmounted(() => {
            document.removeEventListener('click', (e) => hideDialog(e));
        });
        return {
            ...toRefs(data),
            dialog,
            onSelect,
        };
    },
};
</script>

• vue 的api是用的插件自动引入可查看我的另一篇文章，代码的逻辑主要在最下面，onMounted这里，判断当前点击的元素在不在，不在就进行隐藏
• 有不懂的小伙伴可以私信我，希望可以帮助到你！