refactor: 架构升级

2026-09-13 00:50:40 +08:00 · 2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
@@ -0,0 +1,70 @@
+# match-media
+
+## Instructions
+
+media query 匹配检测节点。
+
+类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
+
+例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。
+
+### Syntax
+
+- 使用 `<match-media />`（或 `<match-media></match-media>`，当需要包裹子节点时）。
+- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
+
+#### Properties
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| min-width | number |  | 否 | 页面最小宽度（ px 为单位） |
+| max-width | number |  | 否 | 页面最大宽度（ px 为单位） |
+| width | number |  | 否 | 页面宽度（ px 为单位） |
+| min-height | number |  | 否 | 页面最小高度（ px 为单位） |
+| max-height | number |  | 否 | 页面最大高度（ px 为单位） |
+| height | number |  | 否 | 页面高度（ px 为单位） |
+| orientation | string |  | 否 | 屏幕方向（ landscape 或 portrait ） |
+
+#### Events
+
+See official docs for full events list: `https://doc.dcloud.net.cn/uni-app-x/component/match-media.html`
+
+#### Platform Compatibility
+
+See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/match-media.html`
+
+### Examples
+
+### Example (Example 1)
+
+```vue
+<template>
+    <view>
+        <match-media :min-width="375" :max-width="800" >
+            <view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
+        </match-media>
+
+        <match-media :min-height="400" :orientation="landscape">
+            <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
+        </match-media>
+    </view>
+</template>
+```
+
+### Example (Example 2)
+
+```html
+<template>
+    <view>
+        <match-media :min-width="375" :max-width="800" >
+            <view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
+        </match-media>
+
+        <match-media :min-height="400" :orientation="landscape">
+            <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
+        </match-media>
+    </view>
+</template>
+```
+
+Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/match-media.html)