为网格注入浏览器前缀不能与Vue一起使用 [英] Injecting browser prefixes for grid not working with Vue

问题描述

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

I've blown an afternoon on this already and I'm stumped. I clock that IE11 doesn't support grid-template and that I need to use -ms-grid-columns and -ms-grid-rows instead but I'm trying to generate some CSS and inject it via a Vue method. This works in every browser except IE11:

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

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

So, to try and get it working in IE11 I instead use this behind a conditional to check if it is that browser:

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中编写它的原因.

As you can tell no doubt tell, I'm using lodash and when I console log the result before returning the CSS I get this: display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr 1fr 1fr;grid-gap: 3px;, but when I inspect the element in IE11 all I get through is: <div style="display: -ms-grid;"> and the -ms-grid-columns and -ms-grid-rows are ignored. I've tried and used the lodash _.fill in other browsers and it works a treat, so I'm pretty sure it's not that. I need the number of rows and columns to be dynamic you see, which is why I'm not just writing it in auto-prefixed SCSS.

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

I'm sort of wondering if this is down to something with Vue and if so does anyone have any ideas about how to rectify it... hey, if it isn't a Vue thing can someone point me in the right direction?

推荐答案

似乎您实际上不应包括供应商前缀，Vue会自动添加它们.请参阅文档:自动前缀.

It looks like you shouldn't actually include the vendor prefixes and that Vue will add them automatically. See documentation: Auto-prefixing.

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

Consider this screen shot of the IE11 browser tools running the code below:

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一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！