vue.js - Vuetify 在现有组件中使用 Font Awesome 图标

Question

我正在尝试按照 vuetify docs 上的说明进行操作用于集成 font-awesome pro。

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

现有组件不会选择这些设置。我自己不创建的 v-icon 组件仍在分配 material-icons类(class)。例如嵌套在<v-select>中的图标显示为:

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

我希望在 icons.dropdown 下传递一个新值会更改 <v-select> 中的图标.这不是它应该的工作方式吗？

Answer 1

这可能是因为已经安装了 Vuetify 插件。第二次调用 Vue.use 不会执行任何操作。

如果您自己调用它两次，那么解决方案很简单。但是，可能不是您第一次调用它。下面的示例使用 Vuetify 的 CDN 构建，它会自动安装，无需任何配置选项。

我实际上并没有包含 FontAwesome，但我使用了一些 CSS 来显示一个红色方 block 来代替箭头，以表明它正在产生效果。

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

在上面的示例中，我通过在包含 Vuetify 之前连接到 Vue.use 来解决这个问题。是的，这是一个 collosal hack，但它允许我插入相关的配置对象。

另一种方法是通过直接修改 $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 是否已经存在。或者，您可以在调用 Vue.use 之前放入一个 debugger 语句，然后进入代码以查看发生了什么。如果已经安装了 Vuetify，您会发现它很快就会退出。