Vuetify, используя значки с потрясающими шрифтами в существующих компонентах
Я пытаюсь следовать инструкциям на проверить документы для интеграции 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>. Разве это не так должно работать?
если вы используете бета-версию vuetify 2.0, то это: values: {...} вместо icons
Я использую версию 1.5.14
Ответы 1
Это может быть связано с тем, что плагин Vuetify уже установлен. Звонок Vue.use во второй раз ничего не даст.
Если вы сами вызываете его дважды, то решение простое. Однако, возможно, это не вы звоните в первый раз. В приведенном ниже примере используется сборка CDN Vuetify, и она автоматически устанавливается без каких-либо параметров конфигурации.
На самом деле я не включал 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/[email protected]/dist/vuetify.css" rel = "stylesheet">
<script src = "https://unpkg.com/[email protected]/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/[email protected]/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/[email protected]/dist/vuetify.css" rel = "stylesheet">
<script src = "https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src = "https://unpkg.com/[email protected]/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 уже установлен, вы увидите, что он довольно быстро выйдет из строя.
Выстрел в голову! По какой-то причине у меня было 2 файла, вызывающих Vue.use(Vuetify ). Спасибо!
Какая у вас
vuetifyверсия?