Vuetify, используя потрясающие шрифты иконки в существующих компонентах - PullRequest
Новая
       31

Vuetify, используя потрясающие шрифты иконки в существующих компонентах

2 голосов
/ 03 июля 2019

Я пытаюсь следовать инструкциям vuetify docs для интеграции font-awesome pro. 

    Vue.use(Vuetify, {
        iconfont: 'fa',
        icons: {
            'dropdown': 'fal fa-arrow-down',
        }
    })

Существующие компоненты не выбирают эти настройки.компонентам v-icon, которые я не создаю сам, все еще присваивается класс material-icons.Например, значок, вложенный в <v-select>, отображается как: 

<i class="v-icon material-icons theme--light">arrow_drop_down</i>

Я ожидал, что передача нового значения в icons.dropdown изменит значок в <v-select>.Разве это не так, как это должно работать?

1 Ответ

0 голосов
/ 05 июля 2019

Это может быть потому, что плагин Vuetify уже установлен.Вызов Vue.use во второй раз ничего не даст.

Если вы звоните дважды, то решение простое.Тем не менее, это может быть не вы, кто называет это в первый раз.В приведенном ниже примере используется сборка Vuetify для CDN, и она автоматически устанавливается без каких-либо параметров конфигурации.

На самом деле я не включил FontAwesome, но я использовал немного CSS, чтобы показать красный квадрат вместо стрелкичтобы показать, что он оказывает влияние. 

new Vue({
  el: '#app',
  data () {
    return {value: 'Red'}
  }
})
.fa-arrow-down {
  background: red;
  height: 8px;
  width: 8px;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/vuetify@1.5.14/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script>
(function() {
  const vueUse = Vue.use
  
  Vue.use = function (vuetify) {
    Vue.use = vueUse
    
    Vue.use(vuetify, {
      iconfont: 'fa',
      icons: {
        'dropdown': 'fal fa-arrow-down',
      }
    })
  }
})()
</script>
<script src="https://unpkg.com/vuetify@1.5.14/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-select v-model="value" :items="['Red', 'Green', 'Blue']"></v-select>
  </v-app>
</div>

Вы можете увидеть автоматическую установку в строках 19-21 источника:

https://github.com/vuetifyjs/vuetify/blob/v1.5.14/packages/vuetify/src/index.ts

В примере выше я обошел проблему, подключившись к Vue.use непосредственно перед тем, как включить Vuetify.Да, это коллосальный хак, но он позволил мне вставить соответствующий объект конфигурации.

В качестве альтернативы можно было бы тыкать в значки по отдельности, изменяя $vuetify напрямую. 

Vue.prototype.$vuetify.icons.dropdown = 'fal fa-arrow-down'

Вы должны будете сделать это для каждой отдельной иконки, хотя я не думаю, что есть эквивалент передачи iconfont, чтобы установить их все. 

Vue.prototype.$vuetify.icons.dropdown = 'fal fa-arrow-down'

new Vue({
  el: '#app',
  data () {
    return {value: 'Red'}
  }
})
.fa-arrow-down {
  background: red;
  height: 8px;
  width: 8px;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/vuetify@1.5.14/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@1.5.14/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-select v-model="value" :items="['Red', 'Green', 'Blue']"></v-select>
  </v-app>
</div>

Если вы не уверены, что Vuetify уже установлен, существуют различные способы выяснить это.Вероятно, самое простое - проверить, существует ли Vue.prototype.$vuetify.В качестве альтернативы вы можете вставить оператор debugger непосредственно перед вызовом Vue.use и войти в код, чтобы увидеть, что происходит.Если Vuetify уже установлен, вы увидите, что он довольно быстро выручил.

...