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

原创

霍格沃兹-测试开发学社

发布于 2022-04-29 10:20:59

1.6K0

发布于 2022-04-29 10:20:59

文章被收录于专栏：ceshiren0001ceshiren0001

本文节选自霍格沃兹测试学院内部教材

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 规范，每一个组件都经过精心设计，具有模块化、响应式和优秀的性能，其组件具有易记忆的语义设计，可将记忆复杂的类和标记符号转换为简单且明确的名称。

image1080×612 78.1 KB

浏览器支持

浏览器名称	支持状态
Chromium（Chrome, Edge Insider）	支持
Edge	支持
Firefox	支持
Safari 10+	支持
IE11/Safari 9	需要poyfill
IE9/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>

<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