软件测试 | Vuetify 框架

作者：测吧(北京)科技有限公司

2023-03-03
北京
本文字数：1046 字
阅读完需：约 3 分钟

Vuetify 简介

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 规范，每一个组件都经过精心设计，

具有模块化、响应式和优秀的性能，其组件具有易记忆的语义设计，可将记忆复杂的类和标记符号转换

为简单且明确的名称。

浏览器支持

组件库安装

vue add vuetify

复制代码

组件库使用

组件库地址： https://vuetifyjs.com/zh-Hans/components/alerts/ API 地址：https://vuetify.com/zh-Hans/api/vuetify/

组件示例-数据表格

<template><v-data-tablev-model="selected":headers="headers":items="desserts":single-select="singleSelect"item-key="name"loading="true"class="elevation-1"><template v-slot:top><v-switchv-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>