Question

我使用vue.js应用通过地图或输入字段选择位置。但是我只想为搜索引擎提供服务，而不为移动用户提供地图。

问题：它在移动设备上不是很有用，因为尽管我无法通过媒体查询来显示地图，但我无法找到一种方法来避免下载相当大的geojson和大量相关数据文件。

导入过程如下：

import Data.List

main = putStrLn $ show $ myOp 2 [1, 2, 3]

myOp :: Int -> [a] -> [[a]]
myOp 0 _ = []
myOp 1 l = map (:[]) l
myOp c l = concat $ map f $ tails l
    where
        f :: [a] -> [[a]]
        f []     = []
        f (x:xs) = map (x:) $ myOp (c - 1) xs

和样式：

//modules for leaflet
import Vue2Leaflet from '../../node_modules/vue2-leaflet/dist/vue2-leaflet.js'; 
import { InfoControl, ReferenceChart, ChoroplethLayer } from 'vue-choropleth'
//geojson and data files
import { geojsonA } from '../../data/mygeojson.min.geojson' 
import { specificData } from '../../data/mydata.js'

有没有一种方法可以选择性地阻止通过媒体查询或其他任何方式导入特定的显示器？

Answer 1

这里的问题是，您还需要在JavaScript中定义媒体查询，以根据例如窗口的宽度。由于这些值不是反应性的，因此不易被Vue监视，因此您需要定义自己的监视程序。

这里是一个例子。如果屏幕足够宽，则仅添加<test/>元素。如果屏幕不够宽，则不会加载屏幕（v-if会完全将其删除）。在mounted上，有一个事件监听器添加到窗口的resize事件中。因此，每次调整窗口大小时，该值都会更新。然后可以在计算的属性largeScreen中使用此值。如果屏幕很大，则返回一个布尔值。然后在模板中使用此布尔值。然后<test/>组件将导入您的脚本。

请确保清理自定义事件侦听器beforeDestroy，否则可能会多次定义它们。

Vue.component('test', {
  template: '<div>Large screen; <code>test</code> is loaded.</div>'
});

new Vue({
  el: '#app',
  data: function() {
    return {
      windowWidth: 0
    };
  },
  mounted() {
    this.setWindowWidth();
    window.addEventListener('resize', this.setWindowWidth);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setWindowWidth);
  },
  computed: {
    largeScreen: function() {
      return this.windowWidth > 640;
    }
  },
  methods: {
    setWindowWidth: function() {
      this.windowWidth = window.innerWidth;
    }
  }
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
  Screen width is: <code>{{ windowWidth }}px</code>

  <test v-if="largeScreen" />
</div>

Answer 2

您可以使用matchMedia在JavaScript中创建媒体查询断点：

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

它确实具有很好的支持，并且比使用调整大小的侦听器更容易设置，并且占用的资源更少。

阻止使用特定媒体查询下载geojson文件

2 个答案: