Question

我已经搜索了所有先前的问题，并且使用新版本的Vuetify，自定义主题和图标对我不起作用。

"vuetify": "^2.1.11",

vuetify.js文件：

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';
import '@fortawesome/fontawesome-free/css/all.css'

import SmithIcon from '../icons/SmithIcon.vue'

Vue.use(Vuetify);

const opts = {
    iconfont: 'fa',
    theme: {
        primary: '#000000',
        secondary: '#FFD65E',
        accent: '#EDAFB8',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107'
    },
    icons: {
        smith: {
            component: SmithIcon
        }
    }
}

export default new Vuetify(opts);

main.js文件：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';

// services
import router from './router'
import vuetify from './plugins/vuetify';

import store from './store/index';

Vue.config.productionTip = false

Vue.use(VueRouter);


new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app');

Navbar.vue文件：（使用）

<v-app-bar
                app
                clipped-right
                color="primary"
                dark
        >
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
            <v-toolbar-title>
                <v-row>
                    <v-col>
                        <v-img src="../../assets/arc-logo.svg" max-width="150"/>
                    </v-col>
                </v-row>
            </v-toolbar-title>
            <v-spacer/>
                <div class="mr-5">
                    <v-img src="../../assets/help.svg" max-width="35"/>
                </div>
        </v-app-bar>

由于我的自定义主题，导航栏的颜色应为黑色，但仍然是默认的蓝色。请告知。

Answer 1

2.x中的默认主题是'light'，因此您需要在其中设置颜色...

theme: {
    themes: {
        light: {
            primary: '#000',
            secondary: '#FFD65E',
            accent: '#EDAFB8',
            error: '#FF5252',
            info: '#2196F3',
            success: '#4CAF50',
            warning: '#FFC107'
        }
    }
}

自定义图标设置为...

   icons: {
        iconfont: 'fa',
        values: {
            clear: 'fas fa-trash',
            menu: 'fa fa-bars'
        }
   }

Demo

Vuejs + Vuetify自定义主题和图标不起作用

1 个答案: