怎么改变Quasar组件里面的css样式?

html-css05

怎么改变Quasar组件里面的css样式?,第1张

Quasar(发音为/kweɪ.zɑɹ/)是MIT许可的开源框架(基于Vue),可帮助Web开发人员创建:响应式网站PWA(Progressive Web App)通过Apache Cordova构建移动APP(Android,iOS,…)多平台桌面应用程序(使用Electron)Quasar允许开发人员编写一次代码,然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序,并提供精心编写,速度非常快的Quasar Web组件。当使用Quasar时,你不需要像Hammerjs,Momentjs或Bootstrap这样的额外重型库。它拥有这些功能,而且体积很小!

我们经常用vux的组件快速开发移动端的项目,比如常用的datetime组件,会遇到这样的问题。

而我们的需求要求value值靠左而非靠右,但datetime没有提供移动value值位置的属性,那怎么办呢?

首先需要找到经过vue处理后的值,

一种方法我们可以在全局上修改,简单粗暴。

vue也给我们提供了局部修改的方法:

这最终会被vue编译成:

可以看到字体变成向左靠齐,当然,可以用这种方法,修改任一内置组件,其他ui框架的修改方法也类似。

vue项目中经常会用到element ui,有时候需要修改默认的样式,比如表格,导航栏等,输入框等等。

可以用以下两种方式修改:

1.给组件加上id或者class,然后添加一个style,不要加scoped(vue可以有多个style),在组件里直接修改

2.外部引入css文件,默认样式会被覆盖

3.利用深度::v-deep深度修改组建的样式,可以直接写在到scoped作用域的style里面。(推荐)

也可以在外层加一个div,然后赋值一个class或者id,在scss中用这种语法修改对应的组件上的class名字即可