add: match-media component

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']
 }

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 = {

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')
   )
-}
+}

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 = [

src/core/helpers/tags.js

 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'
 ]

src/core/view/components/match-media/index.vue

+<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>