为不使用 Vue 的网格注入浏览器前缀

Question

我已经在这个问题上浪费了一个下午，但我很困惑。我发现 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 的问题，有人可以指点我吗方向对吗？

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>

为不使用 Vue 的网格注入浏览器前缀

Injecting browser prefixes for grid not working with Vue

javascript

css

internet-explorer-11

vue.js