From 8fb7a81b41dabd8828e05c4f99c0ab563a7f79a8 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Thu, 19 Dec 2024 11:41:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20jsx=E7=94=A8=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/jsx/css-module.md   | 55 ++++++++++++++++++++++
 src/views/demo/jsx/index.vue       | 74 ++++++++++++++++++++++++++++--
 src/views/demo/jsx/jsx.module.scss |  7 +++
 3 files changed, 131 insertions(+), 5 deletions(-)
 create mode 100644 src/views/demo/jsx/css-module.md
 create mode 100644 src/views/demo/jsx/jsx.module.scss

diff --git a/src/views/demo/jsx/css-module.md b/src/views/demo/jsx/css-module.md
new file mode 100644
index 0000000..aac5e5f
--- /dev/null
+++ b/src/views/demo/jsx/css-module.md
@@ -0,0 +1,55 @@
+CSS Modules 是一种局部样式的解决方案，确保样式只作用于特定组件，而不会影响全局。这是通过以下机制和原理来实现的：
+
+### 1. 局部样式的概念
+
+CSS Modules 的设计目的是将 CSS 类名局部化，从而避免样式冲突。在使用 CSS Modules 时，类名会被自动生成唯一的标识符，以确保它们只在定义它们的组件中有效。
+
+### 2. 如何实现局部样式
+
+#### 生成唯一类名
+
+当您使用 CSS Modules 时，每个类名都会被编译成一个唯一的名称。例如，如果您在 `styles.module.css` 中定义了一个类 `.item`，在编译后，它可能会被转换为类似 `styles_item__1A2B3` 的名称。这样，其他组件中相同的类名不会产生冲突。
+
+#### 使用方式
+
+在 Vue 3 中使用 CSS Modules 时，您需要通过 `import` 语句导入 CSS Module 文件，并通过导入的对象引用样式。这确保了样式只与特定组件关联。
+
+```javascript
+import styles from './styles.module.css'; // 导入 CSS Module
+
+<div class={styles.item}>内容</div>  // 使用局部样式
+```
+
+### 3. 原理
+
+- **编译阶段**：在构建过程中，构建工具（如 Vite 或 Webpack）会处理 CSS Modules，将类名转换为唯一的标识符。这意味着即使在多个组件中使用相同的类名，最终生成的类名也会不同。
+- **作用域限制**：由于生成的类名是唯一的，因此它们只在相应的组件范围内有效，从而避免了全局样式的污染。
+
+### 4. 使用示例
+
+假设我们有一个样式文件 `styles.module.css`：
+
+```css
+/* styles.module.css */
+.item {
+  color: blue;
+}
+```
+
+在组件中使用：
+
+```javascript
+<template>
+  <div class={styles.item}>Hello, World!</div>
+</template>
+
+<script setup>
+import styles from './styles.module.css';
+</script>
+```
+
+在构建后，`.item` 类可能会被转换为 `.styles_item__3A1B2`，并且只在该组件中有效。
+
+### 总结
+
+CSS Modules 是局部样式的解决方案，通过生成唯一的类名来确保样式只在定义它们的组件中生效。这样可以避免全局样式冲突，保持样式的模块化和可维护性。
\ No newline at end of file
diff --git a/src/views/demo/jsx/index.vue b/src/views/demo/jsx/index.vue
index 33bf318..3de0239 100644
--- a/src/views/demo/jsx/index.vue
+++ b/src/views/demo/jsx/index.vue
@@ -13,15 +13,24 @@
         </ul>
 
         <h3>vue jsx写法DOM一</h3>
-        <!-- <renderJsx /> -->
-
+        <renderJsx
+            refName="JsxUlRef1"
+            label="1"
+            :list="list"
+        />
         <h3>vue jsx写法DOM二</h3>
-        <!-- <renderJsx /> -->
+        <renderJsx
+            refName="JsxUlRef2"
+            label="2"
+        />
     </el-card>
 </template>
 
 <script setup lang="jsx">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import { message } from '@/utils/message';
+import styles from './jsx.module.scss';
+
 /**
  * 1. jsx中怎么使用element组件
  * 2. jsx语法中样式问题（全局，css modules）
@@ -32,6 +41,7 @@ defineOptions({
     name: 'Jsx',
 });
 
+const refs = ref({});
 const list = ref([
     {
         name: 'John',
@@ -49,10 +59,64 @@ const list = ref([
         address: 'Paris',
     },
 ]);
+
+const renderJsx = (props) => {
+    console.log(props);
+    return (
+        <ul class="demo-jsx-ul">
+            {list.value.map((item, index) => (
+                <li key={index}>
+                    <div>姓名: {item.name}</div>
+                    <div>年龄: {item.age}</div>
+                    <div>地址: {item.address}</div>
+                </li>
+            ))}
+            <el-button
+                type="primary"
+                class="mb-10"
+                onClick={elementBtnClick}
+            >
+                测试添加element组件
+            </el-button>
+            <div class={styles.btn}>css modules样式测试</div>
+            <el-button
+                ref={(el) => (refs.value[props.refName] = el)}
+                type="primary"
+                onClick={() => changeRefText(props.refName, props.label)}
+            >
+                测试ref{props.label}
+            </el-button>
+        </ul>
+    );
+};
+
+const elementBtnClick = () => {
+    message('elementBtnClick', { type: 'info' });
+};
+
+const changeRefText = (refName, label) => {
+    refs.value[refName].ref.innerText = `测试ref${label}改名字了`;
+};
+
+onMounted(() => {
+    console.log(refs);
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+/** 这里局部样式对jsx组件不会生效 */
+// .demo-jsx-ul {
+//     margin: 0 auto;
+
+//     li {
+//         border: 1px solid #ccc;
+//         padding-left: 20px;
+//         margin: 20px 0;
+//     }
+// }
+</style>
 <style lang="scss">
+/** 这里的样式相当于是全局样式，对jsx组件会生效，但是也会影响其他所有样式，另外一种解决方案是css module, 参考上面例子 */
 .demo-jsx-ul {
     margin: 0 auto;
 
diff --git a/src/views/demo/jsx/jsx.module.scss b/src/views/demo/jsx/jsx.module.scss
new file mode 100644
index 0000000..95b3533
--- /dev/null
+++ b/src/views/demo/jsx/jsx.module.scss
@@ -0,0 +1,7 @@
+.btn {
+    background-color: #4caf50;
+    width: 100px;
+    height: 50px;
+    border-radius: 5px;
+    color: #fff;
+}