前排提示:这个是1.0版本时候写的博客,现在出了2.0,官方的文档也完善了很多,填了我这篇文章里提到的很多坑,但是这篇博客依旧会不断(随缘)更新。
使用vuetify2.0的正确姿势
说在前面的话(一定要看)
我从来不屑于讲解乱七八糟的组件用法,文档上能找到的为什么要拿出来再找一遍?我总结的都是一些容易出坑、文档上没有提到过、难以理解的部分、或是常用语法的总结这样可以提高使用效率。
因为1.0的时候文档很不完善,用起来有很多坑,只能不断看国外大佬或者官方的项目来总结。这个是根据我看的一些国外大佬的视频、文档,以及自己在平时中使用心得总结的用法。不一定是对的,只能说对我来说用的比较顺手,如有不足或建议,请提出指正。
文章目录
1. 全局结构的组织
关于全局结构,一般如下所示:
<v-app>
<headbar />
<v-content id="main-content">
<v-container fill-height>
<intro />
</v-container>
</v-content>
<footer />
</v-app>
即先用v-app包裹起来,之前我一直不知道这个v-content怎么用。将header和footer排除在外,对具体内容用content包裹。
2.0之后,header除了可以用appbar组件外,还提供了appbar,其实没有什么区别,注意看文档就好了。
2. 关于可控制关闭的侧边栏(drawer)
这里先给出一个常见的header:
<v-toolbar flat dark app>
<v-btn icon @click="drawer = !drawer">
<img src="../public/icon/menu.svg" alt="=" class="sidebar-btn">
</v-btn>
<v-toolbar-title>
title
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-xs-only white--text">
<v-btn flat to="/">
Home
</v-btn>
</v-toolbar-items>
</v-toolbar>
常见的逻辑是,当处于小屏幕时,v-toolbar-items应该被隐藏,因此,给它一个hidden-xs-only类。给title旁边的btutton一个逻辑,当点击时,切换drawer的值。
这里要注意的是,drawer的初值为null和false是有区别的,如果drawer的初值是null,那么当处于大页面时,drawer是默认显示的,请类比youtube的首页(如下图)。
如果你想使用纯粹的手动切换,请将drawer的初值设为false。
3. v-layout的用法(已废弃,改为v-row,v-col,但具体用法没变)
在把vuetify当工具用之前,请先尝试用v-layout、v-flex实现文档中较为复杂的布局。
这样在你使用的时候,会更加快速、得心应手。
- 注意layout的wrap属性,和各种居中
- 注意flex的shrink和grow属性,一个是尽量缩小自己,一个是尽量扩展自己。
- 有的时候d-flex是要自己添加的。
- 和常用的断点xs、sm、md
4. 常用的类名
1 背景颜色
class=“red\white\black#xxx\rgba()”
2 字体颜色
class=“white–text”
class=“black–text”
3 内外边距
pt pb pl pr px py pa-{0-12}
4 display显示
hidden-xs-only
hidden-sm-and-up
5 文字
5.1 粗细
<p class="font-weight-black">Black text.</p>
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-medium">Medium weight text.</p>
<p class="font-weight-regular">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-thin">Thin weight text.</p>
<p class="font-italic">Italic text.</p>
5.2 大小
.display-4 Light 96sp
.display-3 Light 60sp
.display-2 Regular 48sp
.display-1 Regular 34sp
.headline Regular 24sp
.title Medium 20sp
.subtitle-1 Regular 16sp
.subtitle-2 Medium 14sp
.body-1 Regular 16sp
.body-2 Regular 14sp
.caption Regular 12sp
.overline Regular 10sp
5.3 大小写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>