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-columns和-ms-grid-rows被忽略.我已经尝试过在其他浏览器中使用lodash _.fill,并且可以正常工作,所以我敢肯定不是这样.我需要使行和列的数量保持动态,这就是为什么我不只是在自动前缀SCSS中编写它的原因.

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

解决方法:

看来您实际上不应包含供应商前缀,并且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>

标签：vue-js,internet-explorer-11,css,javascript
来源： https://codeday.me/bug/20191108/2010005.html