0
点赞
收藏
分享

微信扫一扫

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

技术分享 | 学做测试平台开发-Vuetify 框架_应用程序

浏览器支持

浏览器名称

支持状态

Chromium(Chrome, Edge Insider)

支持

Edge

支持

Firefox

支持

Safari 10+

支持

IE11/Safari 9

需要poyfill

IE9/IE10

不支持

组件库安装

vue add

组件库使用

组件库地址:​​vuetifyjs.com/zh-Hans/com…​​

API 地址:​​vuetifyjs.com/zh-Hans/api…​​

组件示例-数据表格

<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 官网:​​cn.vuejs.org/v2/api/​​

Vuetify:​​vuetifyjs.com/zh-Hans/api…​​

Vuetify 是 Vue 的语义化组件框架,旨在提供整洁、语义化和可重用的组件,使得构建应用程序更方便。Vuetify框架就先说到这里啦,大家可以多多练习一下哦~


举报

相关推荐

0 条评论