feat: 阻止页面所有操作

src/router/modules/demo.ts

@@ -110,6 +110,10 @@ const titleArr = [
         key: 'thirdCompWrap',
         title: '第三方组件二次封装slot传递',
     },
+    {
+        key: 'blockAllAction',
+        title: '阻止页面所有操作',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/blockAllAction/index.vue

@@ -0,0 +1,238 @@
+<template>
+    <div class="p-8 max-w-4xl mx-auto">
+        <h1 class="text-xl font-bold mb-6">
+            有的时候，我们想要在不同的环境对页面的交互事件做不同的处理，举例，在普通情况下的页面，我们允许页面所有元素正常点击，聚焦，触摸等所有事件，但是在一些特殊的场景下，我们希望禁止页面所有元素的点击，下面我们实现这个功能
+        </h1>
+
+        <!-- 场景切换区域 -->
+        <div class="mb-8 p-6 bg-gray-50 rounded-lg shadow">
+            <div class="flex items-center justify-between">
+                <h2 class="text-xl font-semibold">场景切换</h2>
+                <el-switch
+                    v-model="isSpecialScene"
+                    active-text="特殊场景"
+                    inactive-text="普通场景"
+                    active-color="#ff4949"
+                    style="--el-switch-on-color: #ff4949"
+                />
+            </div>
+            <p class="mt-2 text-gray-600">
+                当前处于
+                <span
+                    class="font-medium"
+                    :class="isSpecialScene ? 'text-red-500' : 'text-green-500'"
+                >
+                    {{ isSpecialScene ? '特殊场景' : '普通场景' }} </span
+                >，表单交互 {{ isSpecialScene ? '已禁用' : '已启用' }}
+            </p>
+        </div>
+
+        <!-- 表单区域 -->
+        <div
+            class="p-6 bg-white rounded-lg shadow"
+            :class="{ 'pointer-events-none opacity-75': isSpecialScene }"
+        >
+            <h2 class="text-xl font-semibold mb-4">用户信息表单</h2>
+
+            <el-form
+                :model="form"
+                label-width="120px"
+                :disabled="isSpecialScene"
+                class="demo-form"
+            >
+                <el-form-item
+                    label="用户名"
+                    prop="username"
+                >
+                    <el-input
+                        v-model="form.username"
+                        placeholder="请输入用户名"
+                    />
+                </el-form-item>
+
+                <el-form-item
+                    label="密码"
+                    prop="password"
+                >
+                    <el-input
+                        v-model="form.password"
+                        type="password"
+                        placeholder="请输入密码"
+                        show-password
+                    />
+                </el-form-item>
+
+                <el-form-item
+                    label="性别"
+                    prop="gender"
+                >
+                    <el-radio-group v-model="form.gender">
+                        <el-radio label="male">男</el-radio>
+                        <el-radio label="female">女</el-radio>
+                        <el-radio label="other">其他</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item
+                    label="兴趣爱好"
+                    prop="hobbies"
+                >
+                    <el-checkbox-group v-model="form.hobbies">
+                        <el-checkbox
+                            label="sports"
+                            name="hobbies"
+                            >运动</el-checkbox
+                        >
+                        <el-checkbox
+                            label="music"
+                            name="hobbies"
+                            >音乐</el-checkbox
+                        >
+                        <el-checkbox
+                            label="reading"
+                            name="hobbies"
+                            >阅读</el-checkbox
+                        >
+                        <el-checkbox
+                            label="travel"
+                            name="hobbies"
+                            >旅行</el-checkbox
+                        >
+                    </el-checkbox-group>
+                </el-form-item>
+
+                <el-form-item
+                    label="城市"
+                    prop="city"
+                >
+                    <el-select
+                        v-model="form.city"
+                        placeholder="请选择城市"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            label="北京"
+                            value="beijing"
+                        />
+                        <el-option
+                            label="上海"
+                            value="shanghai"
+                        />
+                        <el-option
+                            label="广州"
+                            value="guangzhou"
+                        />
+                        <el-option
+                            label="深圳"
+                            value="shenzhen"
+                        />
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item
+                    label="出生日期"
+                    prop="birthday"
+                >
+                    <el-date-picker
+                        v-model="form.birthday"
+                        type="date"
+                        placeholder="选择日期"
+                        style="width: 100%"
+                    />
+                </el-form-item>
+
+                <el-form-item
+                    label="个人简介"
+                    prop="desc"
+                >
+                    <el-input
+                        v-model="form.desc"
+                        type="textarea"
+                        :rows="3"
+                        placeholder="请输入个人简介"
+                    />
+                </el-form-item>
+
+                <el-form-item>
+                    <el-button
+                        type="primary"
+                        @click="submitForm"
+                        >提交</el-button
+                    >
+                    <el-button @click="resetForm">重置</el-button>
+                    <el-form>
+                        <el-button
+                            :disabled="false"
+                            type="primary"
+                            style="pointer-events: auto !important; opacity: 1 !important; cursor: pointer !important"
+                            @click="allowClick"
+                            >特殊按钮，允许冲破限制</el-button
+                        >
+                    </el-form>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+const isSpecialScene = ref(false);
+
+const form = ref({
+    username: '',
+    password: '',
+    gender: '',
+    hobbies: [],
+    city: '',
+    birthday: '',
+    desc: '',
+});
+
+const submitForm = () => {
+    ElMessage.success('表单提交成功！');
+    console.log('表单数据:', form.value);
+};
+
+const resetForm = () => {
+    form.value = {
+        username: '',
+        password: '',
+        gender: '',
+        hobbies: [],
+        city: '',
+        birthday: '',
+        desc: '',
+    };
+    ElMessage.info('表单已重置');
+};
+const allowClick = () => {
+    console.log('特殊场景下，也需要允许点击');
+};
+</script>
+
+<style lang="scss" scoped>
+.demo-form {
+    .el-form-item {
+        margin-bottom: 22px;
+    }
+
+    .el-input,
+    .el-select,
+    .el-textarea {
+        max-width: 500px;
+    }
+}
+
+.pointer-events-none {
+    * {
+        cursor: not-allowed !important;
+    }
+
+    .el-form-item__label {
+        color: #999 !important;
+    }
+}
+</style>