技术分享 | 学做测试平台开发 -Vuetify 框架

2022 年 8 月 29 日
北京
本文字数：1464 字
阅读完需：约 5 分钟

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 需要 poyfillIE9/IE10 不支持组件库安装 vue add vuetify 组件库使用组件库地址：Alert 提示框 — Vuetify 1

API 地址：https://vuetifyjs.com/zh-Hans/api/vuetify/

组件示例-数据表格<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>

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 框架就先说到这里啦，大家可以多多练习一下哦~