Vuetify – Grid系统(下)

作者 柚爸

Vuetify除了像很多UI框架提供了根据断点设置栅格大小的功能,还提供了JS代码级别的断点对象,用于动态的设置断点,和根据断点变化做操作,这一点是纯CSS框架不编写额外CSS代码很难实现的。

  1. 1 断点类型
  2. 2 断点对象
  3. 2.1 监听断点变化
  4. 2.2 breakpoint对象的属性
  5. 2.3 自定义断点
  6. 3 其他一些布局知识
  7. 3.1 v-container的grid-list-{xs through xl}属性
  8. 3.2 默认的页面组织结构
  9. 3.3 v-responsive指定长宽比 Aspect Ratio
  10. 3.4 预制模板

1 断点类型

v-flex最关键的API之一就是断点。

这些断点类似于其他UI框架,占的大小也是从小覆盖到大,比如设置xs1 md2,则在xs-sm这个范围内,宽度都是1。

Vuetify中一共有5个断点,断点名称和对应关系如下:

代码 对应设备 宽度范围
xs 手机屏幕 小于600px
sm 平板设备 600px-959px
md 大型平板到笔记本电脑 960px-1263px
lg 普通桌面显示器 1264px-1903px
xl 4K和超宽显示器 大于1903px

以断点代码加上1-12的方式直接设置在v-flex元素上,使其可以根据屏幕宽度改变自身的宽度,从而达到排版的效果。

2 断点对象

有了FLEX之后,在不同的宽度之下,除了改变v-flex元素的宽度之外,很可能还需要更改FLEX容器的属性。还有可能同一个页面的不同组件,可能需要不同的断点来展示。

Vuetify提供了断点对象$vuetify.breakpoint,通过该对象,就可以方便的监听断点变化。

2.1 监听断点变化

先看来自官方文档然后修改了一下的案例,以后的代码中都假设已经导入了Vuevuetify以及在#app元素上挂载了Vue

<div id="app">
    <v-app>
        <v-container>
            <v-layout row wrap justify-center tag="p">
                <v-flex xs3>
                    {{imageHeight}}
                </v-flex>
            </v-layout>
        </v-container>
    </v-app>
</div>
<script>
    new Vue({
        el: '#app',
        mounted(){
            console.log(this.$vuetify.breakpoint)
            console.log(this.$vuetify.breakpoint.name)
        },
        computed:{
            imageHeight(){
                switch (this.$vuetify.breakpoint.name) {
                    case 'xs': return '220px'
                    case 'sm': return '400px'
                    case 'md': return '500px'
                    case 'lg': return '600px'
                    case 'xl': return '800px'
                }
            }
        }
    })
</script>

在程序启动的时候,会根据当前的窗口大小打印出breakpoint对象和其name属性,前者的内容一会再看,后者就是当前屏幕的代码。

然后改变屏幕的宽度,会发现显示的像素大小会变动,这说明两点:

  1. breakpoint是当前实例的响应式数据对象(否则计算属性不会自动更新)
  2. 在每次断点改变的时候,breakpoint对象会发生改变。

2.2 breakpoint对象的属性

官方文档里列出了断点对象的属性,主要是判断当前所属的屏幕宽度范围的一些布尔值:

{
  xs: boolean
  xsOnly: boolean
  sm: boolean
  smOnly: boolean
  smAndDown: boolean
  smAndUp: boolean
  md: boolean
  mdOnly: boolean
  mdAndDown: boolean
  mdAndUp: boolean
  lg: boolean
  lgOnly: boolean
  lgAndDown: boolean
  lgAndUp: boolean
  xl: boolean
  xlOnly: boolean
  name: ('xs' | 'sm' | 'md' | 'lg' | 'xl')
  width: number
  height: number
  thresholds: { xs: number, sm: number, md: number, lg: number }
  scrollbarWidth: number
}

在改变了窗口宽度之后,如果跨越了断点,则断点对象上的所有相关的布尔值都会重新计算,也可以获取名称,以及当前的宽度和高度。很多属性看名称就可以用了。

有了监听断点的能力和了解了断点对象的属性,我们就可以来尝试完成这篇文章里的导航栏例子:这个导航栏有四个按钮在xs屏幕上会上下堆叠,在sm屏幕上会等分成四个导航按钮,在更大的屏幕上则集中在左侧:

<div id="app">
    <v-app>
        <v-container>
            <v-layout wrap :class="classObject">
                <v-flex xs1>
                    <div style="text-align: center;"><a href="#">Home</a></div>
                </v-flex>
                <v-flex xs1>
                    <div style="text-align: center;"><a href="#">Products</a></div>
                </v-flex>
                <v-flex xs1>
                    <div style="text-align: center;"><a href="#">Contact</a></div>
                </v-flex>
                <v-flex xs1>
                    <div style="text-align: center;"><a href="#">About</a></div>
                </v-flex>
            </v-layout>
        </v-container>
    </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script>
    new Vue({
        el: '#app',
        computed:{
            classObject:function () {
                return {
                    "justify-end": this.$vuetify.breakpoint.lgAndUp,
                    "column": this.$vuetify.breakpoint.xsOnly,
                    "justify-space-around":this.$vuetify.breakpoint.smAndUp && this.$vuetify.breakpoint.mdAndDown
                }
            }
        }
    })
</script>

这段代码通过不同的断点,动态设置v-layout元素的样式类,xs屏幕就修改为竖直排列,smmd屏幕为四个分散对齐,lg以上的屏幕,这四个链接会排列到屏幕右侧。

2.2 自定义断点

自定义断点需要两个步骤:

  1. 需要覆盖$grid-breakpointsCSS属性
  2. 在导入Vuetify插件的时候,明确的给breakpoint对象指定thresholds对应的属性和滚动条的大小,例如:
    Vue.use(Vuetify, {
      breakpoint: {
        thresholds: {
          xs: 360
        },
        scrollbarWidth: 10
      }
    })
    

这个暂时先了解一下即可。Vuetify提供了很多主题和CSS的变量可以覆盖,毕竟现在还没有到定制Vuetify的阶段。

3 其他布局知识

3.1 v-container的grid-list-{xs through xl}属性

这个grid-list-{xs through xl}主要是用来调整gutters,也就是栅格系统里每个格子的间距空间。

例子可以看官网这个例子,用来分割瀑布流图片是不错的效果。

3.2 默认的页面组织结构

在前边分析结构的时候已经分析过了,v-app标签对于所有的应用都是必须的,要将自己的应用写在这个标签内部,因为这个标签是Vuetify很多组件和功能的挂载点。

除此之外,还有一个v-content标签,用来配合v-app包裹对象,v-content标签一定要是v-app的直接子元素。

官网文档推荐了默认的项目结构如下:

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

3.3 v-responsive指定长宽比 Aspect Ratio

有时候对于一些block元素,想保持其一定的比例,看上去比较美观,这个时候可以使用v-responsive组件来指定具体的比例和大小。

这个元素会被渲染成一个DIV元素,在里边的内容不超出的情况下,会保持指定的长宽比例。

简单看一下API:

  1. aspect-ratio,属性的值用宽/高来表示,比如aspect-ratio="16/9"就表示
  2. height,指定高度
  3. max-height,最大高度
  4. min-height,最小高度
  5. width,指定宽度
  6. max-width,最大宽度
  7. min-width,最小宽度

在特定范围内排版,还算比较好看,尤其是在父元素的宽度已经确定的情况下。

3.4 预制模板

官网还提供了一些预先做好的简单模板,用于快速制作页面。其中有内容居中的页面,很方便做登录等界面。

Grid栅格排版布局的内容就是这些了。Vuetify框架本身还有可以指定导入部分组件,图标和国际化的内容。导入部分组件和国际化的部分暂时不看,图标的部分到之后的使用图标组件的部分再来学习。之后需要学习基础的样式和主题。