我有一个像这样的小 Vue 应用程序:
<div id="app">
<div class="row">
<div>
<statistic
class-name="stat-1"
:amount="amount"
:postfix="postfix"
:prefix="prefix"
:scale="scale"
:accuracy="accuracy"></statistic>
</div>
<div><!-- controls --></div>
</div>
</div>
JS:
Vue.component('statistic', {
props: ['amount', 'postfix','scale', 'className', 'accuracy', 'prefix','fill'],
/* config here */
template:`<div class="animated-statistic" :class="className">
<svg class="animated-statistic--graphic" width="200" height="200" viewBox="0 0 200 200">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(249,232,154);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(229,107,233);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="100" cy="100" :r="radius" fill="url(#grad1)"></circle>
</svg>
<div class="animated-statistic--text" v-text="value"></div>
</div>`
});
这很好用 – link to working Codepen
但是,如果您在 IE11 中点击相同的链接,则该组件所在的位置会出现一个空白区域。除非我没有正确使用 IE,否则我在控制台中看不到任何错误。
最初我认为可能是 IE 中的 SVG 有问题,但我做了 another copy of the pen使用静态 SVG 并且它正在渲染。
如果您在 IE11 中检查元素,您只会看到 <statistic></statistic>
标记 - 它们不会被渲染。
我使用的是 IE 不支持的东西吗?
最佳答案
我在此处的 Vue 对象中看到错误:
Vue.component('statistic-animation', {
props: ['amount', 'postfix','scale', 'className', 'accuracy', 'prefix','fill'],
data(){ // ERROR!
return {
current : this.amount,
}
},
....
IE 11 不支持对象中的短方法定义语法 - source
关于internet-explorer - VueJS 组件无法在 IE11 中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50682725/