让蒙层可以穿透点击

你说得对，我之前的示例没有正确实现点击穿透效果。让我们调整代码以确保正确实现点击穿透效果。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Click Through Modal</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .modal {
            display: block;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
            pointer-events: none;
        }

        .modal-content {
            position: relative;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            background-color: #fff;
            pointer-events: auto;
        }

        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close-button:hover,
        .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-if="showModal" class="modal">
            <div class="modal-content">
                <span class="close-button" @click="closeModal">×</span>
                <p>Modal Content Here</p>
            </div>
        </div>

        <div id="below-modal-element">
            <button @click="handleButtonClick">Click Me</button>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    showModal: true
                };
            },
            methods: {
                closeModal() {
                    this.showModal = false;
                },
                handleButtonClick() {
                    alert('Button clicked!');
                }
            }
        });

        app.mount('#app');
    </script>
</body>
</html>

在这个示例中：

  1. modal 的 CSS pointer-events: none 确保模态框本身不会阻止点击事件的传递。
  2. modal-content 的 CSS pointer-events: auto 确保模态框内容区域可以接收点击事件。
  3. 在 Vue 实例中，data 定义了 showModal 变量来控制模态框的显示。
  4. methods 定义了 closeModal 和 handleButtonClick 方法，用于关闭模态框和处理按钮点击事件。

这样可以确保当模态框显示时，仍然可以点击模态框下方的按钮。

解释

  1. 模态框的背景区域使用 pointer-events: none，这允许点击事件传递到其下方的元素。
  2. 模态框的内容区域使用 pointer-events: auto，这样点击事件可以在模态框的内容区域被捕获。
  3. 当点击模态框背景区域时，事件会被传递到下面的元素，从而实现点击穿透效果。
posted @ 2024-06-17 14:39  茫茫人间刺骨凉  阅读(37)  评论(0)    收藏  举报