Как добавить разные шрифты в Vue.js - PullRequest
Новая
       37

Как добавить разные шрифты в Vue.js

0 голосов
/ 29 января 2019

Я моделирую раздел приложения для отображения трех разных вкладок с тремя разными значками Font Awesome.Пока что вкладки настроены следующим образом, и приложение показывает только один значок на вкладке: 

   <div class="tab">

    <ul class="nav nav-tabs" role="tablist">
           <li v-for="(tab,index) in tabs" :class="{active : curentTab===index}" 
            @click="curentTab=index">
         <a href="#">
       <i class="fa fa-bullhorn" style="width:auto" aria-hidden="true"></i> {{tab}}
         </a></li>
      </ul>

 </div>

Ниже приведен фрагмент приложения Vue для моделирования вкладок. 

   <script>
   data() {
    return {
      curentTab:0,
      tabs:['Tab1','Tab2 ','Tab3']
    }
  }
  </script>

Как показать разные значки для разных вкладок?

Заранее спасибо!

1 Ответ

0 голосов
/ 29 января 2019

Чтобы отобразить каждую вкладку с определенным значком, вы можете изменить модель данных, введя разные значки для каждой вкладки.Например, например: 

tabs:[
  {label: 'Tab1', icon:'smile'},
  {label: 'Tab2', icon:'bullhorn'},
  {label: 'Tab3', icon:'heart'}
]

Кроме того, вы должны изменить свой template, связав CSS-класс i соответственно.Для этого вы можете:

  1. ввести метод Vue, возвращающий правильный класс CSS, соответствующий классу FontAwesome, например: 
    methods: {
         faClass(icon) {
            return `fa fa-${icon}`;
          }
        }
вызовите этот новый метод в вашем template, например: 
<i :class="[faClass(tab.icon)]" style="width:auto" aria-hidden="true">

Здесь вы можете увидеть, как class теперь связан через само Vue.

Итак, возвращаясь к вашему примеру, вы получите:

HTML-шаблон 

<div id='app'>
  <ul class="nav nav-tabs" role="tablist">
           <li v-for="(tab,index) in tabs" :class="{active : curentTab===index}" 
            @click="curentTab=index">
         <a href="#">
       <i :class="[faClass(tab.icon)]" 
           style="width:auto" 
           aria-hidden="true"></i> {{tab.label}}
         </a></li>
      </ul>
</div>

Vue instance 

    ...
    data: function() {
       return {
        curentTab:0,
        tabs:[
         {label: 'Tab1', icon:'smile'},
         {label: 'Tab2', icon:'bullhorn'},
         {label: 'Tab3', icon:'heart'}
       ]
      }
     },
      methods: {
        faClass(icon) {
          return 'fa fa-'+icon;
        }
      }
    ...

Отметьте CodePen , чтобы увидеть его в действии.

...