vuetify.js - 如何在独立/CDN 模式下更改 Vuetify 中的主题颜色?
问题描述
我正在尝试更改 Vuetify 中的命名颜色,以便围绕应用程序使用的视觉控件集中继承主题,并且不需要为每个组件单独定义颜色。
Vuetify主题文档这样说关于更改主题颜色:
这很容易改变。只需将主题属性传递给 Vue.use 函数。您可以选择修改全部或仅部分主题属性,其余的继承自默认值。
但是,我没有在 v1.3.12 版本的独立/CDN 模式下看到这项工作。
请注意,当您从 CDN 加载 Vue.js 时,不会使用 vue-cli,我们很高兴以这种方式工作,因为我们现在的重点是快速微前端开发。
此代码笔显示 Vuetify 文档示例中的代码,但按钮的颜色不会改变,它们仍然是默认颜色。我什至将错误颜色更改为洋红色 ( #ff00ff
) 以使其在工作时非常明显:
JavaScript:
Vue.use(Vuetify, {
theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#ff00ff'
}
});
new Vue({
el: '#app',
data: () => ({
//
})
});
HTML:
<div id="app">
<v-app>
<v-content>
<v-container grid-list-xl>
<v-btn>Default</v-btn>
<v-btn color='primary'>Primary</v-btn>
<v-btn color='secondary'>Secondary</v-btn>
<v-btn color='accent'>Accent</v-btn>
<v-btn color='error'>Error</v-btn>
</v-container>
</v-content>
</v-app>
</div>
为了表明这个问题不仅限于 CodePen,这里是我的本地项目,它有一个带有错误类的 v-navigation-drawer,并且自定义主题颜色设置为洋红色:
v-navigation-drawer.error(app fixed mini-variant='true')
我知道之前已经提出过这类问题,但是这个问题是使用 vue-cli 和 nuxt(即不是独立的),这个问题是 Vuetify 1.0 之前的版本。使这个问题与众不同的是独立/CDN 方面。
解决方案
显然出版商已经打电话Vue.use(Vuetify)
了。所以需要在初始化Vue之前覆盖变量:
Vue.prototype.$vuetify.theme = {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#ff00ff'
};
new Vue({ ...
或者在创建的钩子中覆盖它们:
new Vue({
el: '#app',
data: () => ({
//
}),
created() {
this.$vuetify.theme.primary = '#3f51b5',
}
});
推荐阅读
- mvvm - SwiftUI - @Binding 到访问 ObservableObject 属性内的值的计算属性会复制变量吗?
- python - 如何在 Python 中删除与对象具有相同属性的对象?
- sql-server - JPA/Wildfly/MsSql:GenericJDBCException:无法获取 JDBC 连接
- python - 根据 NetworkX 中的权重改变边缘的厚度
- azure-machine-learning-service - 从 Azure ML 连接到现有的 Azure 容器实例 ACI
- c++ - 这是我的 .h 文件。我更改了 .h 文件名,但仍然产生相同的错误。“时间类”中的“时间显示”
- python - Plotly Dash 应用程序在动态生成组件时似乎没有更新 app.layout 属性
- javascript - TypeError:无法定义属性“当前”:对象不可扩展
- ios - systemLayoutSizeFitting 没有返回正确的视图大小
- reactjs - React js和apexcharts Unhandled Rejection TypeError无法读取未定义的属性“长度”