From 233b813ff33c01de6b830058d6dbfd7ff334bdd0 Mon Sep 17 00:00:00 2001
From: XHY <xionghuayu@dcloud.io>
Date: Mon, 15 Apr 2024 20:51:53 +0800
Subject: [PATCH] =?UTF-8?q?box-shadow=20=E6=B7=BB=E5=8A=A0=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E8=AE=BE=E7=BD=AE=20none=20=E5=8F=8A=20=E9=9D=9E?=
 =?UTF-8?q?=E6=B3=95=E5=80=BC=E6=B5=8B=E8=AF=95=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/CSS/box-shadow/box-shadow.uvue | 367 ++++++++++++++-------------
 1 file changed, 188 insertions(+), 179 deletions(-)

diff --git a/pages/CSS/box-shadow/box-shadow.uvue b/pages/CSS/box-shadow/box-shadow.uvue
index 6e0789ac..6f6651a7 100644
--- a/pages/CSS/box-shadow/box-shadow.uvue
+++ b/pages/CSS/box-shadow/box-shadow.uvue
@@ -1,180 +1,189 @@
-<template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex: 1">
-    <!-- #endif -->
-    <view style="flex-grow: 1">
-      <view>
-        <text>box-shadow: 5px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: 5px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: 5px 5px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: 5px 10px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: 5px 10px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: 5px 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: 5px 5px 5px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: -5px -5px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: -5px -5px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: inset 5px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: inset 5px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: inset 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="box-shadow: inset 5px 5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: inset 5px 10px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="box-shadow: inset 5px 10px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: inset 5px 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="box-shadow: inset 5px 5px 5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: inset -5px -5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="box-shadow: inset -5px -5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: 5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="border-radius: 62px; box-shadow: 5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="border-radius: 62px; box-shadow: 5px 5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: 5px 10px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="border-radius: 62px; box-shadow: 5px 10px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: 5px 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: -5px -5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="border-radius: 62px; box-shadow: -5px -5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="
-              border-radius: 62px;
-              box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-            "
-          ></view>
-        </view>
-      </view>
-    </view>
-    <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
-</template>
-
-<style>
-.common {
-  width: 125px;
-  height: 125px;
-  background-color: brown;
-}
-
-.backgroundview {
-  width: 250px;
-  height: 250px;
-  background-color: white;
-  justify-content: center;
-  align-items: center;
-}
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>box-shadow: 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 5px 10px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 10px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 5px 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: -5px -5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: -5px -5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 10px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset 5px 10px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset 5px 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset -5px -5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset -5px -5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="border-radius: 62px; box-shadow: 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="border-radius: 62px; box-shadow: 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 10px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="border-radius: 62px; box-shadow: 5px 10px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: -5px -5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="border-radius: 62px; box-shadow: -5px -5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
+        <view class="backgroundview">
+          <view class="common" style="
+              border-radius: 62px;
+              box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+            "></view>
+        </view>
+      </view>
+
+      <view>
+        <text>点击动态切换 box-shadow: none</text>
+        <view class="backgroundview" @click="changed">
+          <view :class="['common', disabled ? 'disabledShadow' : 'shadow']"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>点击动态切换 box-shadow: 非法值</text>
+        <view class="backgroundview" @click="changed">
+          <view :class="['common', disabled ? 'invalidShadow' : 'shadow']"></view>
+        </view>
+      </view>
+
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        disabled: false
+      }
+    },
+    methods: {
+      changed() {
+        this.disabled = !this.disabled
+      }
+    },
+  }
+</script>
+
+<style>
+  .common {
+    width: 125px;
+    height: 125px;
+    background-color: brown;
+  }
+
+  .backgroundview {
+    width: 250px;
+    height: 250px;
+    background-color: white;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .shadow {
+    box-shadow: 5px 5px black;
+  }
+
+  .disabledShadow {
+    box-shadow: none;
+  }
+
+  .invalidShadow {
+    box-shadow: abcd;
+  }
 </style>
-- 
GitLab