技术分享 | 学做测试平台开发-Vuetify 框架
【摘要】 本文节选自霍格沃兹测试学院内部教材Vuetify 是 Vue 的语义化组件框架,旨在提供整洁、语义化和可重用的组件,使得构建应用程序更方便。Vuetify 核心是为了提供各种可重复使用的,即插即用并且适合各种项目规格的组件。Vue 的语义成分。利用 Vue 的功能组件,所有基于标记的用于援助主部件的类,比如一个 card 题目,可以使用 v-card-title 来处理成型容易。Vuetif...
本文节选自霍格沃兹测试学院内部教材
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框架就先说到这里啦,大家可以多多练习一下哦~
获取更多相关资料:请添加vx,ceshiren001
https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=hwyun×tamp=1651023852
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)