Vuetify 是 Vue 的语义化组件框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。
Vuetify 核心是为了提供各种可重复使用的，即插即用并且适合各种项目规格的组件。
- Vue 的语义成分。利用 Vue 的功能组件，所有基于标记的用于援助主部件的类，比如一个 card 题目，可以使用 v-card-title 来处理
- 成型容易。Vuetify 被设想为从底层创建。每一个组件，指令和功能所有的工作都无缝结合，让你能够专注创建你的应用。
- 为移动设备而生。所有的 Vuetify 组件都是专为移动设备设计。应用程序可以轻松在不同的方向和屏幕尺寸间转换，兼容 web、平板电脑、手机。
- 预先制作的 Vue CLI 模板。Vuetify 自带 3 个 Vue 模板，随时可使用。
通过借助 Vue 和 Material Design 的强大功能，以及大量精心制作的组件库和特性，我们可以使用 Vuetify 构建优秀的应用。Vuetify 遵守 Google 的 Material Design 规范，每一个组件都经过精心设计，具有模块化、响应式和优秀的性能，其组件具有易记忆的语义设计，可将记忆复杂的类和标记符号转换为简单且明确的名称。
浏览器支持
| 浏览器名称 | 支持状态 |
| Chromium（Chrome, Edge Insider） | 支持 |
| Edge | 支持 |
| Firefox | 支持 |
| Safari 10+ | 支持 |
| IE11/Safari 9 | 需要poyfill |
| IE9/IE10 | 不支持 |
组件库安装
vue add vuetify
组件库使用
组件库地址：Alert 提示框 — Vuetify 1
组件示例-数据表格
<template> <v-data-table v-model="selected" :headers="headers" :items="desserts" :single-select="singleSelect" item-key="name" loading="true" class="elevation-1" > <template v-slot:top> <v-switch v-model="singleSelect" label="Single select" class="pa-3" ></v-switch> </template> </v-data-table> </template> <script> export default { data() { return { singleSelect: false, selected: [], headers: [ { text: "id", // 列名称 value: "id", // 列绑定的数据名称（接口返回数据字段名称） align: 'center', // 位置，可选'left' | 'center' |'right' sortable: true, // 是否可排序 width: string // 宽度 }, { text: "用例名称", value: "caseName", align: 'center', sortable: false }, { text: "用例数据", value: "caseData", align: 'center', sortable: false } ], desserts: [], } }, created() { this.getList() }, methods: { getList() { let post_data = { pageNum: 1, pageSize: 10 } this.$api.cases.GetList(post_data).then(res => { this.desserts = res.data.data.data }) } } } </script>
属性列表
| 属性名称 | 说明 | 数据类型 | 默认值 |
| :single-select | 将选择模式更改为单选 | boolean | false |
| :items | 要渲染的数据 | array | |
| item-key | 每行数据绑定的唯一属性 | string | ‘id’ |
| :headers | 表头信息 | DataTableHeader | |
| loading | 是否显示加载数据的进度条 | boolean | false |
参考链接
Vue 官网：API — Vue.js
Vuetify：https://vuetifyjs.com/zh-Hans/api/vuetify/
Vuetify 是 Vue 的语义化组件框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。Vuetify框架就先说到这里啦，大家可以多多练习一下哦~
