Question

我正在尝试按照vuetify docs上的说明来集成真棒字体专业版。

    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>中的图标。那不是应该的工作方式吗？

Answer 1

这可能是因为已经安装了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

在上面的示例中，我在加入Vuetify之前就钩住了Vue.use来解决此问题。是的，这是一个集体漏洞，但是它允许我插入相关的配置对象。

另一种方法是直接修改$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，您会很快看到它的纾困。

Vuetify在现有组件中使用超棒的字体图标

1 个答案: