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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-注入网格的浏览器前缀不能与Vue一起使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1931字，纯文字阅读大概需要3分钟。

内容图文

我已经为此吹了一个下午,我很困惑.我指出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>

内容总结

以上是互联网集市为您收集整理的javascript-注入网格的浏览器前缀不能与Vue一起使用全部内容，希望文章能够帮你解决javascript-注入网格的浏览器前缀不能与Vue一起使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---