时间戳

首页 > 解决方案 > 为网格注入浏览器前缀不适用于 Vue

javascript - 为网格注入浏览器前缀不适用于 Vue

问题描述

我已经为此吹了一个下午，我被难住了。我认为 IE11 不支持grid-template并且我需要使用它-ms-grid-columns，-ms-grid-rows但我正在尝试生成一些 CSS 并通过 Vue 方法注入它。这适用于除 IE11 之外的所有浏览器：

gridTemplate: function(){
    var gridTemplate = "display: grid;";
    gridTemplate += "grid-template: repeat(4, 1fr ) / repeat(4, 1fr);";
    gridTemplate += "grid-gap: 3px;";
    return gridTemplate;
}

因此，为了尝试让它在 IE11 中工作，我改为在条件后面使用它来检查它是否是那个浏览器：

gridTemplate: function(){
    var gridTemplate = "display: -ms-grid;";
    gridTemplate += " -ms-grid-columns: " + _.fill(Array(4),"1fr").join(" ") + ";";
    gridTemplate += " -ms-grid-rows: " + _.fill(Array(4),"1fr").join(" ") + ";";
    gridTemplate += "grid-gap: 3px;";
    return gridTemplate;
}

正如您可以毫无疑问地告诉的那样，我正在使用 lodash，当我在返回 CSS 之前控制台记录结果时，我得到了这个：display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr 1fr 1fr;grid-gap: 3px;，但是当我在 IE11 中检查元素时，我得到的只是：<div style="display: -ms-grid;">并且-ms-grid-columnsand-ms-grid-rows被忽略了。我已经_.fill在其他浏览器中尝试并使用了 lodash，它很有效，所以我很确定不是这样。我需要动态的行数和列数，这就是为什么我不只是用自动前缀 SCSS 编写它。

我有点想知道这是否与 Vue 有关，如果是这样，是否有人对如何纠正它有任何想法......嘿，如果这不是 Vue 的事情，有人能指出我正确的方向吗？

标签： javascriptcssvue.jsinternet-explorer-11

解决方案

看起来您实际上不应该包含供应商前缀，而 Vue 会自动添加它们。请参阅文档：自动前缀。

考虑运行以下代码的 IE11 浏览器工具的屏幕截图：

下面代码的IE11开发者工具

const foo = {
  methods: {
    gridTemplate: function() {
      return {
        "display": "-ms-grid",
        "grid-columns": _.fill(Array(4), "1fr").join(" "),
        "grid-rows": _.fill(Array(4), "1fr").join(" "),
        "grid-gap": "3px"
      }
    }
  }
}

const app = new Vue({
  el: "#app",
  components: {
    foo: foo
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>


<div id="app">
  <foo inline-template>
    <div :style="gridTemplate()"></div>
  </foo>
</div>

推荐阅读