为网格注入浏览器前缀不能与Vue一起使用

Question

我已经为此花了一个下午，但我很沮丧。我认为IE11不支持"0 0 0 0"，而我需要使用grid-template和-ms-grid-columns，但是我试图生成一些CSS并通过Vue方法注入它。这适用于除IE11之外的所有浏览器：

-ms-grid-rows

因此，要尝试使其在IE11中正常工作，我在条件后面使用它来检查是否为该浏览器：

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

您可以肯定地说，我正在使用lodash，当我在返回CSS之前控制台记录结果时，我得到了：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; } ，但是当我检查IE11中的元素时，我得到的只是：display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr 1fr 1fr;grid-gap: 3px;和<div style="display: -ms-grid;">和-ms-grid-columns被忽略。我已经尝试并在其他浏览器中使用了破折号-ms-grid-rows，并且可以正常工作，因此，我敢肯定不是这样。您需要让行和列的数量保持动态，这就是为什么我不只是在自动前缀SCSS中编写它的原因。

我有点想知道这是否与Vue有关，是否有人对如何更正它有任何想法...嘿，如果不是Vue，有人可以指出我正确的观点吗？方向？

Answer 1

看起来您实际上不应包括供应商前缀，并且Vue会自动添加它们。请参阅文档：Auto-prefixing。

考虑以下运行以下代码的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>