From b72209a46035ac5624f54f4fa14da28f2db0a415 Mon Sep 17 00:00:00 2001
From: XHY <xionghuayu@dcloud.io>
Date: Mon, 22 Apr 2024 18:24:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20pointer-events=20=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                   |   6 +
 pages/CSS/pointer-events/pointer-events.uvue | 110 +++++++++++++++++++
 pages/tabBar/CSS.uvue                        |  10 ++
 3 files changed, 126 insertions(+)
 create mode 100644 pages/CSS/pointer-events/pointer-events.uvue

diff --git a/pages.json b/pages.json
index cf18de43..51987dff 100644
--- a/pages.json
+++ b/pages.json
@@ -1014,6 +1014,12 @@
         "navigationBarTitleText": "Transition"
       }
     },
+    {
+      "path": "pages/CSS/pointer-events/pointer-events",
+      "style": {
+        "navigationBarTitleText": "pointer-events"
+      }
+    },
     {
       "path": "pages/CSS/transform/translate",
       "style": {
diff --git a/pages/CSS/pointer-events/pointer-events.uvue b/pages/CSS/pointer-events/pointer-events.uvue
new file mode 100644
index 00000000..b599dc69
--- /dev/null
+++ b/pages/CSS/pointer-events/pointer-events.uvue
@@ -0,0 +1,110 @@
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
+    <view>
+      <view class="container1">
+        <text>控制父视图pointer-events打开时可以点击</text>
+        <switch checked="true" @change="onChange1" />
+      </view>
+      <view class="container" :style="{ 'pointer-events': pointerEvents1 }">
+        <text class="text">点击修改宽度</text>
+        <view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
+      </view>
+      <view class="container1">
+        <text>控制遮罩层pointer-events关闭时可以点击</text>
+        <switch checked="true" @change="onChange2" />
+      </view>
+      <view class="container">
+        <text class="text">点击修改宽度(递增)</text>
+        <view class="width-progress transition-width" id="widthProgress" @click="changeWidthProgress"></view>
+        <view class="mask" :style="{ 'pointer-events': pointerEvents2 }"></view>
+      </view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        isTranstionWidthOrHeight: false,
+        widthOrHeight: null as UniElement | null,
+        widthProgress: null as UniElement | null,
+        progressWidth: 200,
+        pointerEvents1: 'auto',
+        pointerEvents2: 'auto',
+      }
+    },
+    onReady() {
+      this.widthOrHeight = uni.getElementById("widthOrHeight")
+      this.widthProgress = uni.getElementById("widthProgress")
+    },
+    methods: {
+      changeWidthOrHeight() {
+        this.widthOrHeight?.style?.setProperty("width", this.isTranstionWidthOrHeight
+          ? '200px'
+          : '300px')
+        this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
+      },
+      changeWidthProgress() {
+        this.progressWidth += 20
+        this.widthProgress?.style?.setProperty("width", this.progressWidth + 'px')
+      },
+      onChange1(e:UniSwitchChangeEvent) {
+        this.pointerEvents1 = e.detail.value ? 'auto' : 'none'
+      },
+      onChange2(e:UniSwitchChangeEvent) {
+        this.pointerEvents2 = e.detail.value ? 'auto' : 'none'
+      }
+    }
+  }
+</script>
+
+<style>
+  .container1 {
+    margin: 7px 0px 7px 7px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .container {
+    margin: 7px;
+    background-color: white;
+  }
+
+  .text {
+    margin-top: 10px;
+    margin-bottom: 16px;
+  }
+
+  .base-style {
+    width: 200px;
+    height: 200px;
+    background-color: brown;
+  }
+
+  .width-progress {
+    width: 200px;
+    height: 200px;
+    background-color: brown;
+  }
+
+  .transition-width {
+    transition-property: width;
+    transition-duration: 1s;
+  }
+
+  .mask {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 200px;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+</style>
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index cd7f13c0..9ffd3874 100644
--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
@@ -353,6 +353,16 @@
                 url: '/pages/CSS/transition/transition',
               },
             ] as Page[],
+          },
+          {
+            id: 'pointer-events',
+            name: 'pointer-events',
+            pages: [
+              {
+                name: 'pointer-events',
+                url: '/pages/CSS/pointer-events/pointer-events',
+              },
+            ] as Page[],
           },
           {
             id: 'variable',
-- 
GitLab