Vue.js无法切换字体真棒图标

时间:2018-03-18 00:45:06

标签: javascript vue.js font-awesome

我正在尝试根据布尔值切换字体真棒图标,但看起来字体真棒图标在绘制后仍保留在屏幕上:

https://jsfiddle.net/50wL7mdz/200312/

HTML:

<script src="https://unpkg.com/vue"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>



<div id="app">
  <input v-model="marked" type="checkbox"/>
  <i v-if="marked" class="far fa-check-square"></i>
</div>

JS:

new Vue({
  el: '#app',
  data: {
    marked: false
  }
})

我做错了什么或者在font-awesome或vue.js中有错误吗?

6 个答案:

答案 0 :(得分:5)

“i”在火灾转向svg之后标记注释,使用一些包裹<span v-if="marked"><i class="far fa-check-square"></i></span>

答案 1 :(得分:1)

此答案适用于将Font Awesome与SVG一起使用。

由于某些原因,您需要将i标签包装两次。例如,代替此:

<div v-if="condition">
  <i class="fal fa-caret-left"></i>
</div>
<div v-else>
  <i class="fas fa-caret-left"></i>
</div>

执行此操作:

<template v-if="condition">
  <div>
    <i class="fal fa-caret-left"></i>
  </div>
</template>
<template v-else>
  <div>
    <i class="fas fa-caret-left"></i>
  </div>
</template>

不能完全确定为什么需要将其包装两次,因为我认为您可以通过包装一次i标签来使其解耦,但这对我有用,因此显然还有其他事情发生。

此外,请记住,出于明显的原因(无法呈现模板标记),内部div不能替换为template

答案 2 :(得分:0)

最近在将Vue.js 2.5.x与FontAwesome 5.5.x一起使用时遇到了这个问题-图标类未按预期更新。

从FontAwesome Web字体+ CSS实现切换到SVG + JS 后,以下代码不再起作用:

<i :class="[sortByFirstNameAsc ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>

将发生以下情况:FontAwesome JavaScript将触发并包装<i>标签,并用SVG元素替换它,如下面的简化示例所示:

<span data-v-2614dbd6="">
  <svg data-v-2614dbd6="" class="svg-inline--fa fa-caret-up" ...">
    ...
  </svg>

  <!-- <i data-v-2614dbd6="" class="fa fa-caret-up"></i> -->
</span>

不幸的是,活动类是在内部隐藏的<i>标签上而不是在外部可见的SVG元素上切换的。

还原dynamic active class toggling的解决方法是将FontAwesome图标包装在一个跨距中并使用v-show directive,如以下代码片段所示:

<span v-show="sortByFirstNameAsc"><i class="fa fa-caret-up"></i></span>
<span v-show="sortByFirstNameDesc"><i class="fa fa-caret-down"></i></span>

FontAwesome文档now recommends使用其Vue组件来避免DOM中的冲突:

  

兼容性不断提高!   如果您使用的是Vue,则需要vue-fontawesome软件包或带有CSS的Web字体。

在以下情况下,建议使用SVG核心软件包:

  • 将大量图标仅细分为您正在使用的图标
  • 作为与React,Angular,Vue或Ember等工具进行更大集成的基础库(实际上,我们自己的组件使用这些包)
  • 作为CommonJS / ES6模块捆绑工具,例如Webpack,汇总或包裹
  • 像RequireJS这样的UMD样式加载器库
  • 直接在具有CommonJS的服务器上(请参阅我们的服务器端渲染文档

答案 3 :(得分:0)

我通过为每个图标创建一个模板来解决此问题,然后根据布尔值有条件地加载这两个模板。

这是我的主要模板:

@font-face

然后仅创建图标,如下所示:

 <div v-if="minimised">

                        <maximise-icon>
                            
                        </maximise-icon>

                    </div>

                    <div v-if="!minimised">

                        <minimise-icon>
                        
                        </minimise-icon>
                     </div>

如果有一种更优雅的方式,我全都可以听到!

答案 4 :(得分:0)

您使用的Font Awesome库不了解Vue。它使用您编写的<i>并将其转换为<svg>,此时,它已从Vue中盗用。 Vue不再控制它。 answer that Dialog gave很不错:用<span>包装。但是,然后您指出了另一种不适的情况。

要解决您仍然无法使用<span>进行换行的情况,请使用key="fa-sort-up"。这将迫使Vue重新渲染包装器,此时Font Awesome将更新图标。这是您的示例的updated jsFiddle

<span key="fa-sort-up" v-if="sort && descending"><i class="fas fa-sort-up"></i></span>
<span key="fa-sort-down" v-else-if="sort"><i class="fas fa-sort-down"></i></span>
<span key="fa-sort" v-else><i class="fas fa-sort"></i></span>

只要密钥唯一,您就可以使用任何想要的密钥。

答案 5 :(得分:0)

使用FontAwesome在vue中切换复选框

<style>
  .fa-check-square::before {
    color: green; 
  }
</style>

<script>
  Vue.component('some',
    {
      data: 
        function() {
          return{
            isclick: false
          }
        },
      methods: {
        isClicked: function() {
          this.isclick = !this.isclick;
        }
      },
      template: '<div id="test" v-on:click="isClicked">' +
        '<i v-if="isclick" class="fa fa-check-square" style="font-size: 40px;"></i>' +
        '<i v-if="!isclick" class="far fa-square" style="font-size: 40px;"></i>' +
        '</div>'
    });

</script>

<div id="componentsDemo">
  <some></some>
  <some></some>
  <some></some>
  <some></some>
</div>

<script>
  new Vue({ el: '#componentsDemo' });
</script>