From 76d7230acb6ac939b113cf715e18b4b34b659f23 Mon Sep 17 00:00:00 2001
From: tianjiaxing <tianjiaxing2016@163.com>
Date: Tue, 25 Aug 2020 14:38:05 +0800
Subject: [PATCH] add: match-media component

---
 packages/uni-cli-shared/lib/tags.js           |   3 +-
 .../transform/traverse.js                     |   3 +-
 packages/uni-template-compiler/lib/mp.js      |   5 +-
 .../packages/postcss/index.js                 |   3 +-
 src/core/helpers/tags.js                      |  17 +--
 .../view/components/match-media/index.vue     | 113 ++++++++++++++++++
 6 files changed, 131 insertions(+), 13 deletions(-)
 create mode 100644 src/core/view/components/match-media/index.vue

diff --git a/packages/uni-cli-shared/lib/tags.js b/packages/uni-cli-shared/lib/tags.js
index 26dafc56d..bfcbfd7ec 100644
--- a/packages/uni-cli-shared/lib/tags.js
+++ b/packages/uni-cli-shared/lib/tags.js
@@ -40,5 +40,6 @@ module.exports = {
   textarea: ['app-plus', 'mp-weixin', 'h5'],
   video: ['app-plus', 'mp-weixin', 'h5'],
   view: ['app-plus', 'mp-weixin', 'h5'],
-  'web-view': ['app-plus', 'mp-weixin']
+  'web-view': ['app-plus', 'mp-weixin'],
+  'match-media':['app-plus', 'mp-weixin', 'h5']
 }
diff --git a/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js b/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
index cd89c4f04..90e1f5313 100644
--- a/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
+++ b/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
@@ -44,7 +44,8 @@ const TAGS = [
   'textarea',
   'video',
   'view',
-  'web-view'
+  'web-view',
+  'match-media'
 ]
 
 const EVENTS = {
diff --git a/packages/uni-template-compiler/lib/mp.js b/packages/uni-template-compiler/lib/mp.js
index f63c81527..da2a6d3fc 100644
--- a/packages/uni-template-compiler/lib/mp.js
+++ b/packages/uni-template-compiler/lib/mp.js
@@ -47,7 +47,8 @@ const tags = [
   'video',
   'view',
   'web-view',
-  'editor'
+  'editor',
+  'match-media'
 ]
 
 const baseCompiler = {
@@ -127,4 +128,4 @@ module.exports = function getCompilerOptions (platform) {
   baseCompiler,
   require(id + '/lib/uni.compiler.js')
   )
-}
+}
diff --git a/packages/vue-cli-plugin-uni/packages/postcss/index.js b/packages/vue-cli-plugin-uni/packages/postcss/index.js
index 783e9c2c0..7f2d7ec49 100644
--- a/packages/vue-cli-plugin-uni/packages/postcss/index.js
+++ b/packages/vue-cli-plugin-uni/packages/postcss/index.js
@@ -136,7 +136,8 @@ if (process.env.UNI_USING_V3) {
     'textarea',
     'video',
     'view',
-    'web-view'
+    'web-view',
+    'match-media'
   ]
 
   const BG_PROPS = [
diff --git a/src/core/helpers/tags.js b/src/core/helpers/tags.js
index a485d8a4e..cd61792ce 100644
--- a/src/core/helpers/tags.js
+++ b/src/core/helpers/tags.js
@@ -1,10 +1,10 @@
 module.exports = [
-  'uni-app',
-  'uni-layout',
-  'uni-content',
-  'uni-main',
-  'uni-left-window',
-  'uni-right-window',
+  'uni-app',
+  'uni-layout',
+  'uni-content',
+  'uni-main',
+  'uni-left-window',
+  'uni-right-window',
   'uni-tabbar',
   'uni-page',
   'uni-page-head',
@@ -14,7 +14,7 @@ module.exports = [
   'uni-actionsheet',
   'uni-modal',
   'uni-toast',
-  'uni-resize-sensor',
+  'uni-resize-sensor',
   'uni-shadow-root',
 
   'uni-ad',
@@ -57,5 +57,6 @@ module.exports = [
   'uni-textarea',
   'uni-video',
   'uni-view',
-  'uni-web-view'
+  'uni-web-view',
+  'uni-match-media'
 ]
diff --git a/src/core/view/components/match-media/index.vue b/src/core/view/components/match-media/index.vue
new file mode 100644
index 000000000..32ddcb142
--- /dev/null
+++ b/src/core/view/components/match-media/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <uni-match-media
+    v-show="MediaQueryListRes"
+    v-on="$listeners"
+  >
+    <slot />
+  </uni-match-media>
+</template>
+
+<script>
+export default {
+  name: 'MatchMedia',
+  props: {
+    width: {
+      type: Number,
+      default: 0
+    },
+    minWidth: {
+      type: Number,
+      default: 0
+    },
+    maxWidth: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      default: 0,
+      type: Number
+    },
+    minHeight: {
+      type: Number,
+      default: 0
+    },
+    maxHeight: {
+      type: Number,
+      default: 0
+    },
+    orientation: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      MediaQueryListRes: true,
+      mql: null
+    }
+  },
+
+  computed: {
+    handleMediaQueryStr () {
+      let mediaQueryStr = []
+      const { $props } = this
+      for (const item in $props) {
+        if (item !== ('orientation' || 'animations') && $props[item] > 0) {
+          mediaQueryStr.push(`(${this.humpToLine(item)}: ${this[item]}px)`)
+        }
+        if (item === 'orientation' && $props[item]) {
+          mediaQueryStr.push(`(${this.humpToLine(item)}: ${this[item]})`)
+        }
+      }
+      mediaQueryStr = mediaQueryStr.join(' and ')
+      return mediaQueryStr
+    }
+  },
+
+  watch: {
+    handleMediaQueryStr: 'replaceListener'
+  },
+
+  mounted () {
+    this.mql = window.matchMedia(this.handleMediaQueryStr)
+    this.handleMediaQuery(this.mql)
+    this.mql.addListener(this.handleMediaQuery)
+  },
+
+  beforeDestroy () {
+    this.mql.removeListener(this.handleMediaQuery)
+  },
+
+  methods: {
+    handleMediaQuery (e) {
+      if (e.matches) {
+        this.MediaQueryListRes = true
+      } else {
+        this.MediaQueryListRes = false
+      }
+    },
+
+    humpToLine (name) {
+      return name.replace(/([A-Z])/g, '-$1').toLowerCase()
+    },
+
+    replaceListener () {
+      this.mql.removeListener(this.handleMediaQuery)
+      this.mql = window.matchMedia(this.handleMediaQueryStr)
+      this.handleMediaQuery(this.mql)
+      this.mql.addListener(this.handleMediaQuery)
+    }
+  }
+}
+</script>
+
+<style>
+  uni-match-media {
+    display: block;
+  }
+
+  uni-match-media[hidden] {
+  display: none;
+}
+</style>
-- 
GitLab