新增 pointer-events 测试例

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": {

pages/CSS/pointer-events/pointer-events.uvue

+<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>

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',