feat(components): 增加对MatchMedia组件的支持，#7381

NervJS · Sep 3, 2020 · 20a8b08 · 20a8b08
1 parent 16e33d1
commit 20a8b08
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 0 deletions.
diff --git a/packages/shared/src/components.ts b/packages/shared/src/components.ts
@@ -321,6 +321,16 @@ const CoverView = {
   ...touchEvents
 }
 
+const MatchMedia = {
+  'min-width': '',
+  'max-width': '',
+  width: '',
+  'min-height': '',
+  'max-height': '',
+  height: '',
+  orientation: ''
+}
+
 const MovableArea = {
   'scale-area': 'false'
 }
@@ -692,6 +702,7 @@ export const internalComponents = {
   CoverImage,
   Textarea,
   CoverView,
+  MatchMedia,
   MovableArea,
   MovableView,
   ScrollView,

diff --git a/packages/taro-components/mini/index.js b/packages/taro-components/mini/index.js
@@ -20,6 +20,7 @@ export const Switch = 'switch'
 export const CoverImage = 'cover-image'
 export const Textarea = 'textarea'
 export const CoverView = 'cover-view'
+export const MatchMedia = 'match-media'
 export const MoveableArea = 'moveable-area'
 export const MoveableView = 'moveable-view'
 export const ScrollView = 'scroll-view'

diff --git a/packages/taro-components/types/MatchMedia.d.ts b/packages/taro-components/types/MatchMedia.d.ts
@@ -0,0 +1,60 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+
+interface MatchMediaProps extends StandardProps {
+  /** 页面最小宽度（ px 为单位）
+   * @supported weapp
+   */
+  minWidth?:	number
+
+  /** 页面最大宽度（ px 为单位）
+   * @supported weapp
+   */
+  maxWidth?: number
+
+  /** 页面宽度（ px 为单位）
+   * @supported weapp
+   */
+  width?: number
+
+  /** 页面最小高度（ px 为单位）
+   * @supported weapp
+   */
+  minHeight?: number
+
+  /** 页面最大高度（ px 为单位）
+   * @supported weapp
+   */
+  maxHeight?: number
+
+  /** 页面高度（ px 为单位）
+   * @supported weapp
+   */
+  height?: number
+
+  /** 屏幕方向（ landscape 或 portrait ）
+   * @supported weapp
+   */
+  orientation?: string
+}
+
+/** media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。
+ * 通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。
+ * 基础库 2.11.1 开始支持。
+ * @supported weapp
+ * @example
+ * ```tsx
+ * class App extends Components {
+ *   render () {
+ *     return (
+ *        <MatchMedia minWidth='400'>
+            <View>title</View>
+          </MatchMedia>
+ *     )
+ *   }
+ * }
+ * ```
+ */
+declare const MatchMedia: ComponentType<MatchMediaProps>
+
+export { MatchMedia, MatchMediaProps }
diff --git a/packages/taro-components/types/index.d.ts b/packages/taro-components/types/index.d.ts
@@ -3,6 +3,7 @@ export { View } from './View'
 export { Block } from './Block'
 export { Swiper } from './Swiper'
 export { SwiperItem } from './SwiperItem'
+export { MatchMedia } from './MatchMedia'
 export { MovableView } from './MovableView'
 export { MovableArea } from './MovableArea'
 export { CoverView } from './CoverView'