Question

我有一个非常简单的Vue单文件组件（使用Vue 2.4.2），它包含一个SVG图像，使用一组预定义的SVG符号并且工作正常。

我注意到在应用组件（非作用域）样式之前，图标会简单地显示为无样式。重要的是要注意：

在我们的主.scss文件中包含scss时，问题不会发生
使用v-cloak无效
在最新的Chrome，FF和Safari（MacOS）上发生

问：显然我可以使用将其包含在主scss文件中的解决方法，但我想知道这是否特定于SVG样式，或者使用组件样式时延迟是否正常？

我的组件（省略了额外的scss）：

<template>
  <i class="icon" v-if="symbol" :class="{'icon-spin': spinning}">
    <svg>
      <use v-bind:xlink:href="symbol"></use>
    </svg>
  </i>
</template>
<script>

export default {
  name: 'Icon',
  props: {
    icon: {type: String},
    spinning: {type: Boolean, default: false}
  },
  computed: {
    symbol () {
      return this.icon ? '#' + this.icon : ''
    }
  }
}
</script>
<style lang="scss">

@import '../../style/variables';

.icon {
  display: inline-block;
  width: $icon-size;
  height: $icon-size;
  line-height: 1;

  svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  ...

VueJS单个文件组件简要显示SVG没有样式

0 个答案: