跳到主要内容

Vuetify

基本知识​

引入​

CDN​

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>Hello world</v-container>
      </v-content>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

使用 Vue CLI​

vue create my-app
# 切换到新项目目录
cd my-app

在项目目录中使用

vue add vuetify

或者使用 Vue UI 安装

vue ui

Electron 用法​

要在 Electron 中使用 Vuetify ，需通过 Vue CLI 添加 electron-builder 插件。

# 安装
vue add electron-builder

# 使用
yarn electron:build
yarn electron:serve

布局​

Vuetify 有两个主要布局组件， v-app 和 v-main

<template>
  <v-app>
    <v-main>
      <!-- page content -->
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    //
  }),
};
</script>

v-app​

v-app 组件是应用程序的根节点，直接替换默认的 Vue 入口 <div id="app">

在其中写入的元素，会作为布局的一部分

在组件或其他视图中，不需要引入 v-app

所有应用都需要 v-app 组件。 这是许多 Vuetify 组件和功能的挂载点，而且它必须是所有 Vuetify 组件的祖先节点

v-app 只应该在应用中渲染一次。

v-main​

v-main 组件是替换 main HTML 元素和应用程序的根节点 内容 的语义替代

常常在其中切换路由

它会根据你指定的应用组件的结构而动态调整大小

默认应用标记​

只要设置 app 属性，你可以将布局元素放在任何地方

通用属性​

NameTypeDefaultDescription
colorstringundefined详见 colors page
app相应的组件是应用布局的一部分
densebooleanflase使组件更小
elevationnumber | stringundefined组件的海拔可接受 0 到 24 之间的值
disabledbooleanfalse移除组件的单击或 target 功能

应用组件​

这些组件通常被用作布局元素。它们可以混合和匹配，并且每个特定组件在任何时候都只能存在一个

每一个应用组件都有一个指定的位置和优先级，影响布局系统中的位置

  • v-app-bar：总是放在应用顶部，优先级低于 v-system-bar。
  • v-bottom-navigation：总是放在应用底部，优先级高于 v-footer。
  • v-footer：总是放在应用底部，优先级低于 v-bottom-navigation。
  • v-navigation-drawer：可以放置在应用的左边或右边，并且可以配置在 v-app-bar 的旁边或下面。
  • v-system-bar：总是放在应用顶部，优先级高于 v-app-bar

v-app-bar​

v-app-bar 组件对于任何图形用户界面（GUI）都至关重要，因为它通常是站点导航的主要来源

image-20210406155012015

App-bar 组件与 <a href=“/components/navigation drawers”> v-navigation-drawer 配合使用，可以在应用程序中提供站点导航

v-app-bar 组件用于应用程序范围内的操作和信息

API​

NameTypeDefaultDescription
collapsebooleanfalse将工具栏置于折叠状态，以减小其最大宽度
collapse-on-scrollbooleanfalse滚动时将应用栏置于折叠状态
densebooleanfalse将工具栏内容的高度降低到 48px（使用 prominent 属性时为 96px）。

子组件​

v-app-bar-nav-icon​

专门为与 v-toolbar 和 v-app-bar 一起使用而创建的样式化图标按钮组件

在工具栏的左侧显示为汉堡菜单，它通常用于控制导航抽屉的状态

<v-app-bar-nav-icon></v-app-bar-nav-icon>
v-app-bar-title​

修改过的 v-toolbar-title 组件 ，用于配合 shrink-on-scroll 属性使用

v-bottom-navigation​

v-footer 组件用于显示用户可能想要从网站中的任何页面都能访问到的公共信息

v-navition-drawer​

（导航抽屉）

用于导航应用程序的组件

为了显示的目的，一些示例被包装在 v-card 元素中。

通常会把 v-navigation-drawer 组件作为 v-app 的直接子组件

使用 null 作为其 v-model 的初始值 将会将抽屉初始化为在移动设备上关闭，在桌面环境下打开。

通常使用 nav 属性将抽屉与 v-list 组件配对

API​

NameTypeDefaultDescription
expand-on-hoverbooleanfalse将抽屉折叠成 mini-variant，直到用鼠标悬停
temporarybooleanfalse临时抽屉位于其应用之上，并使用稀松布（叠加）来使背景变暗
permanentbooleanfalse不管屏幕尺寸如何，抽屉都可以看到
srcstring | objectundefined指定 v-img 作为组件背景。

v-system-bar​

多功能组件​

v-cards​

卡中有 4 个基本组件。 v-card-title, v-card-subtitle, v-card-text 和 v-card-actions

API​

NameTypeDefaultDescription
hoverbooleanfalse悬停时将应用 4dp 的海拔（默认值为 2dp）
imgstringundefined指定卡片的背景图。对于更高级的实现，建议您使用 v-img 组件
tostring | objectundefined表示链接的目标路由
densebooleanfalse将工具栏内容的高度降低到 48px
roundedboolean | stringundefined对指定的组件应用 border-radius 样式
outlinedbooleanfalse去除卡片的实心颜色并添加细边框
loadingboolean | stringfalse显示线性进度条。可以是指定将哪种颜色应用于进度条的字符串（任何 material 色彩——主要（primary）, 次要（secondary）, 成功（success）, 信息（info），警告（warning），错误（error）），或者使用组件的布尔值 color（由色彩属性设置——如果它被组件支持的话）还可以是原色

子组件​

v-card-actions​

用于为卡片放置 动作 的容器，如 v-btn 或 v-menu

v-card-text​

主要用于卡片中的 文本内容

v-card-subtitle​

为卡片字幕提供默认的 字体大小 和 填充

v-card-title​

为卡片字幕提供默认的 字体大小 和 填充

v-tool-bar​

v-toolbar 组件对于任何 gui 都是至关重要的，因为它通常是站点导航的主要来源。 工具栏组件与 <a href="/components/navigation drawers">, v-navigation-drawer 和 v-card 配合使用非常有效

<template>
  <div>
    <v-toolbar>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>Vuetify</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-export</v-icon>
      </v-btn>
    </v-toolbar>
  </div>
</template>

API​

NameTypeDefaultDescription
prominentbooleanfalse将工具栏内容的高度增加到 128px
srcstring | objectundefined指定 v-img 作为组件背景
collapsebooleanfalse将工具栏置于折叠状态，以减小其最大宽度
densebooleanfalse将工具栏内容的高度降低到 48px

子组件​

v-toolbar-items​

允许 v-btn 扩展全高度

v-toolbar-title​

用于显示标题

v-list​

v-list 组件用于显示信息。 它可以包含头像、内容、操作、列表组标题等等。 列表以易于在集合中识别特定项目的方式显示内容。 它们为组织一组文本和图像提供了一致的样式

列表有三种基本形式。 单行 (默认), 双行 和 三行. 行声明指定了项目的最小高度，也可以使用相同的属性从 v-list 中进行控制

<template>
  <v-card
    class="mx-auto"
    max-width="300"
    tile
  >
    <v-list dense>
      <v-subheader>REPORTS</v-subheader>
      <v-list-item-group
        v-model="selectedItem"
        color="primary"
      >
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon"></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="item.text"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>
image-20210407125112331

API​

NameTypeDefaultDescription
disabledbooleanfalse禁用所有子级的 v-list-item 组件
flatbooleanfalse删除活动的 v-list-item 上突出显示的背景
densebooleanfalse减小列表块的最大宽度
roundedbooleanfalse圆角 v-list-item 边
three-line / two-linebooleanfalse增加三 \ 两行的列表项高度
navbooleanfalse另一种样式可以减小 v-list-item 的宽度并圆角化。 通常与 v-navigation-drawer 一起使用

子组件​

v-list-item​

装载列表项子组件

NameTypeDefaultDescription
linkbooleanfalse指定组件为链接。当使用 href 或 to属性时，这是自动的设置的。
tostring | objectundefined表示链接的目标路由
hrefstring | objectundefined指定组件为锚点并应用 href 属性。
v-list-item-content​

装载文字组件

v-list-item-icon​

装载图标组件

v-list-item-title​

列表元素标题

v-list-item-subtitle​

列表元素副标题

v-list-item-action​

装载动作组件

v-list-item-avatar​

装载头像类型的图片组件 img

小型组件​

v-btn​

API​

NameTypeDefaultDescription
outlinedbooleanfalse使背景透明并使用薄边框
blockbooleanfalse将按钮扩大到可用空间的 100％。
depressedbooleanfalse移除按钮的阴影效果
disabledbooleanfalse移除组件的单击或 target 功能
elevationnumber | stringundefined组件的海拔可接受 0 到 24 之间的值
exactbooleanfalse完全匹配链接。如果没有这个链接，‘/’ 将匹配每个路由
appendbooleanfalse设置 append 属性总是会附加到当前路径的相对路径上。
fabbooleanfalseDesignates the button as a floating-action-button. Button will become round
hrefstring | objectundefined指定组件为锚点并应用 href 属性
iconbooleanfalseDesignates the button as icon. Button will become round and applies the text prop
linkbooleanfalse指定组件为链接。当使用 href 或 to 属性时，这是自动的设置的
plainbooleanfalse移除悬停在按钮上时应用的默认背景变化
valueanyundefined控制组件可见还是隐藏
textbooleanfalseMakes the background transparent

v-icon​

可以在按钮内部使用

<v-btn
       class="ma-2"
       color="red"
       dark
       >
    Decline
    <v-icon
            dark
            right
            >
        mdi-cancel
    </v-icon>
</v-btn>

API​

NameTypeDefaultDescription
smallbooleanfalse使组件尺寸变的小
largebooleanfalse使组件尺寸变的巨大
x-smallbooleanfalse使组件尺寸变的更小
x-largebooleanfalse使组件尺寸变的无比巨大
rightbooleanfalse当按钮放置在另一个元素或文本的右边时，对按钮内的图标应用适当的间距
leftbooleanfalse当按钮放置在另一个元素或文本的左边时，对按钮内的图标应用适当的间距

v-img​

API​

NameTypeDefaultDescription
altstringundefined屏幕阅读器的备用文本。 留空以装饰图像
aspect-ratiostring | numberundefined计算为width/height，因此对于 1920x1080px 的图片，其值为 1.7778。
containbooleanfalse防止图像不合适时被裁剪
x-largebooleanfalse使组件尺寸变的无比巨大
max-heightnumber | stringundefined设定组件的最大高度
min-widthnumber | stringundefined设定组件的最小宽度
srcstring | objectundefined图像的 URL。这个属性是强制性的

v-pagination​

v-pagination 组件用于分离长数据集，以便用户消化信息。 根据提供的数据量，分页组件将自动缩放

分页默认根据设置的 length 属性显示页数，两边有 prev 和 next 按钮帮助导航

API​

NameTypeDefaultDescription
lengthnumber0分页组件的长度
prev-iconstring'$prev'指定用于上一个图标的图标
next-iconstring'$next'指定用于下一个图标的图标

v-snackbar​

v-snackbar 以最简单的形式向用户显示一个临时且可关闭的通知

API​

NameTypeDefaultDescription
timeoutnumber | string5000等待snackbar 自动隐藏的时间 (毫秒) 。使用 “-1” 保持无限期打开 (版本 < 2 的 0 )。 建议这个数字在 4000 和 10000 之间。此属性的更改将重置超时

大型组件​

v-date-picker​

API​

NameTypeDefaultDescription
maxstringundefined允许的最大 日期/月份（ISO 8601格式）
minstringundefined允许的最小 日期/月份（ISO 8601格式）
multiplebooleanfalse允许选择多个日期
picker-datestringundefined显示 年/月
typestring'date'确定选择器的类型 - 日期选择器的 date ，月选择器的 month
scrollablebooleanfalse允许通过鼠标滚动更改显示的月份

v-time-picker​

API​

NameTypeDefaultDescription
formatstring'ampm'定义在选择器中显示的时间格式。可用的选项是 ampm 和 24hr
scrollablebooleanfalse允许通过鼠标滚动更改 小时/分钟

表单组件​

v-text-field​

使用 v-model 绑定输入值，同时可以设置默认值

API​

NameTypeDefaultDescription
labelstringundefined设置输入标签
filledbooleanfalse应用替代填充输入样式
placeholderstringundefined设置输入的占位符文本
hintstringundefined提示文本
counterboolean | number | stringundefined为输入长度创建一个计数器，如果未指定数字，则默认为25，不会应用任何验证
rulesarray[]接受不同类型的 function, boolean 和 string 。 函数传递输入值作为参数，必须返回 true / false 或包含错误消息的 string 。 如果函数返回 (或数组包含的任何值) false 或 string ，输入字段将输入错误状态
valueanyundefined输入的值
disabledbooleanfalse禁用输入
roundedbooleanfalse向输入添加边框半径
readonlybooleanfalse将输入设置为只读状态
hide-detailsboolean | stringundefined隐藏提示和验证错误。当设置为 auto 时，只有在有信息（提示、错误信息、计数器值等）要显示时，才会显示信息
persistent-hintbooleanfalse强制提示总是可见的
prepend-iconstringundefined在组件前添加一个图标，使用与 v-icon 相同的语法
prepend-inner-iconstringundefined在组件的输入中添加一个图标，使用与 v-icon 相同的语法
prefixstringundefined显示前缀
suffixstringundefined显示后缀
single-linebooleanfalse标签在 focus/dirty 上不移动
typestring'text'设置输入类型

v-radio​

单选按钮。虽然 v-radio 可以单独使用，但它最好与 v-radio-group 一起使用。 在 v-radio-group 上使用 v-model，可以访问组内所选单选按钮的值

image-20210411174334808

API​

NameTypeDefaultDescription
disabledbooleanfalse移除组件的单击或 target 功能
readonlybooleanfalse将输入设置为只读状态
valueanyundefined在组中选择组件时使用的值。如果没有提供，则使用 index
labelstringundefined设置输入标签

v-checbox​

v-checbox 组件为用户提供了在两个不同的值之间选择的能力。 它们与开关(switch) 非常相似，可用于复杂的表格和核对清单

API​

NameTypeDefaultDescription
append-iconstringundefined在组件上附加一个图标，使用与 v-icon 相同的语法
disabledbooleanfalse禁用输入
hintstringundefined提示文本
labelstringundefined设置输入标签
input-valueanyundefinedv-model 的绑定值

v-simple-checbox​

v-select​

下拉框

API​

NameTypeDefaultDescription
itemsarray[]可以是对象数组或字符串数组。当使用对象时，将寻找文本和值字段。 这可以使用 item-text 和 item-value 属性来更改
disabledbooleanfalse禁用输入
hintstringundefined提示文本
labelstringundefined设置输入标签
item-textstring | array | functiontext设置items’属性的文本值
item-valuestring | array | functionvalue设置 items 的值的属性
prepend-iconstringundefined在组件前添加一个图标，使用与 v-icon 相同的语法
multiplebooleanfalse多选，接受数组作为值

v-switch​

API​

NameTypeDefaultDescription
input-valueanyundefinedv-model 的绑定值
flatbooleanfalse显示没有海拔的组件
insetbooleanfalse扩展 v-switch 轨迹以包含缩略图
valueanyundefined输入的值

v-slider​

API​

NameTypeDefaultDescription
maxnumber | string100设置允许的最大值
minnumber | string0设置允许的最小值
prepend-iconstringundefined在组件前添加一个图标，使用与 v-icon 相同的语法
stepnumber | string1如果大于0，则为滑块上的点设置步骤间隔
track-colorstringundefined设置刻度线颜色
thumb-colorstringundefined设置拇指和拇指标签颜色
thumb-labelboolean | stringundefined显示拇指标签
labelstringundefined设置输入标签
valueanyundefined输入的值
thumb-labelboolean | stringundefined显示拇指标签
ticksboolean | stringfalse显示刻度线。如果 true ，使用滑块时将显示刻度线。如果设置为 'always' ，它总是显示刻度线
inverse-labelbooleanfalse使用 rtl 反转标签位置
tick-labelsarray[]与 Array 一起提供时，将尝试按索引顺序将标签映射到每个步骤

v-file-input​

v-file-input组件的核心是一个基于 v-text-field 拓展的基本容器

使用 accpect 属性，v-file-input组件可以选择接收你想要的媒体格式/文件类型，如 accept="image/png, image/jpeg"

当 show-size 属性和 counter 一同启用时，会下输入框下方显示文件总数和大小

API​

NameTypeDefaultDescription
append-iconstringundefined在组件上附加一个图标，使用与 v-icon 相同的语法
clearablebooleantrue添加清除已输入内容功能，默认图标是Material Design Icons mdi-clear
truncate-lengthnumber | string22在用省略号截断之前的文件名的长度
labelstringundefined设置输入标签
loadingboolean | stringfalse显示线性进度条。可以是指定将哪种颜色应用于进度条的字符串（任何 material 色彩——主要（primary）, 次要（secondary）, 成功（success）, 信息（info），警告（warning），错误（error）
multiplebooleanfalse将 multiple 属性添加到输入中，允许选择多个文件
chipsbooleanfalse改变一个已选择项为小纸片（chips）的显示方式
show-sizeboolean | numberfalse设置所选文件的显示大小

v-textarea​

v-textarea 最简单的形式是多行文本字段，对于大量文本非常有用

API​

与 v-text-feild 类似

NameTypeDefaultDescription
no-resizebooleanfalse移除调整大小的句柄
rowsnumber | string5默认行数

v-form​

网格系统​

（Grid System）

7.1 v-container​

v-container 提供了将你的网站内容居中和水平填充的功能。 你还可以使用 fluid 属性将容器在所有视口和设备尺寸上完全扩展。

  • fill-height 将使整个内容 相对于 page 居中

v-row​

v-row 是 v-col 的容器组件。 它使用 flex 属性来控制其内栏的布局和流

NameTypeDefaultDescription
alignstringundefined应用 align-items css 属性。可用的选项是 start, center, end, baseline 和 stretch
justifystringundefined应用 justify-content css 属性。可用选项是 start, center, end, space-between 和 space-around

v-col​

v-col 包裹内容，它必须是 v-row 的直接子代

NameTypeDefaultDescription
densebooleanfalse减少 v-col 之间的距离。
colsboolean | string | numberfalse设置组件扩展的默认列数。可用的选项是 1 -> 12 和 auto 。
mdboolean | string | numberfalse更改中等和更大断点上的列数，其他断点同理

v-spacer​

v-spacer 是一个基本而又通用的间隔组件，用于分配父子组件之间的剩余宽度

组​

样式​

颜色​

每种颜色都会被转换为 background 和 text 变体

<template>
  <div class="purple darken-2 text-center">
    <span class="white--text">Lorem ipsum</span>
  </div>
</template>

改变背景颜色 red

改变文本颜色 text--red

改变背景明暗 lighten-4

改变文本明暗 text--darken-2

文本​

字体强调​

<template>
  <div>
    <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>
  </div>
</template>

image-20210406170957036

字体大小​

格式

  • .text-{value} 用于 xs
  • .text-{breakpoint}-{value} 用于 sm, md, lg 和 xl

value

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • subtitle-1
  • subtitle-2
  • body-1
  • body-2
  • button
  • caption
  • overline

文本对齐​

自动对齐

.text-justify

指定方向对齐

.text-left

.text-right

.text-center

.text-{breakpoint}-{direction}

image-20210406214448457

不透明度​

text--primary 与默认文本具有相同的不透明度。

text--secondary 用于提示和辅助文本。

text--disabled 用于去除强调文本

image-20210406214558337

装饰线​

移除文本装饰线

.text-decoration-none

添加上划线

.text-decoration-overline

添加下划线线

``.text-decoration-underline`

添加删除线

``.text-decoration-line-through`

转换大小写​

.text-lowercase：小写

.text-uppercase：大写

.text-capitalize：单词首字母大写

间距​

格式：{property}{direction}-{size}

image-20210406170240133

property 应用间距类型:

  • m - 应用 margin
  • p - 应用 padding

direction 指定了该属性所应用的侧边:

  • t - 应用 margin-top 和 padding-top 的间距
  • b - 应用 margin-bottom 和 padding-bottom 的间距
  • l - 应用 margin-left 和 padding-left 的间距
  • r - 应用 margin-right 和 padding-right 的间距
  • s - 应用 margin-left/padding-left (LTR 模式) 和 margin-right/padding-right(RTL 模式) 的间距
  • e - 应用 margin-right/padding-right (LTR 模式) 和 margin-left/padding-left(RTL 模式) 的间距
  • x - 应用 *-left 和 *-right 的间距
  • y - 应用 *-top 和 *-bottom 的间距
  • a - 在所有方向应用该间距

size 以 4px 增量控制间距属性:

  • 0 - 通过设置为 0 来消除所有 margin 或 padding.
  • 1 - 设置 margin 或 padding 为 4px
  • 2 - 设置 margin 或 padding 为 8px
  • 3 - 设置 margin 或 padding 为 12px
  • 4 - 设置 margin 或 padding 为 16px
  • 5 - 设置 margin 或 padding 为 20px
  • 6 - 设置 margin 或 padding 为 24px
  • 7 - 设置 margin 或 padding 为 28px
  • 8 - 设置 margin 或 padding 为 32px
  • 9 - 设置 margin 或 padding 为 36px
  • 10 - 设置 margin 或 padding 为 40px
  • 11 - 设置 margin 或 padding 为 44px
  • 12 - 设置 margin 或 padding 为 48px
  • 13 - 设置 margin 或 padding 为 52px
  • 14 - 设置 margin 或 padding 为 56px
  • 15 - 设置 margin 或 padding 为 60px
  • 16 - 设置 margin 或 padding 为 64px
  • n1 - 设置 margin 为 -4px
  • n2 - 设置 margin 为 -8px
  • n3 - 设置 margin 为 -12px
  • n4 - 设置 margin 为 -16px
  • n5 - 设置 margin 为 -20px
  • n6 - 设置 margin 为 -24px
  • n7 - 设置 margin 为 -28px
  • n8 - 设置 margin 为 -32px
  • n9 - 设置 margin 为 -36px
  • n10 - 设置 margin 为 -40px
  • n11 - 设置 margin 为 -44px
  • n12 - 设置 margin 为 -48px
  • n13 - 设置 margin 为 -52px
  • n14 - 设置 margin 为 -56px
  • n15 - 设置 margin 为 -60px
  • n16 - 设置 margin 为 -64px
  • auto - 设置间距为 auto

显示辅助​

设置显示元素​

格式：hidden-{breakpoint}-{condition}

condition：

  • only - 只在某个指定断点隐藏元素
  • and down - 在指定的断点和以下隐藏元素, 从 sm 到 lg 断点
  • and up - 在指定的断点和以上隐藏元素, 从 sm 到 lg 断点

https://vuetifyjs.com/zh-Hans/styles/display/#section-53ef89c16027