Vuetify UI组件笔记
v-btn按钮和v-text-field文本
·
1. v-btn浮动按钮
v-btn浮动按钮
v-btn按钮和v-text-field文本
flat：移除按钮的背景色，布尔值类型，默认为false；
icon：将按钮指定为图标——原型和平面，布尔值类型，默认为false；
disabled: 移除组件的单击或 target(触发事件)功能；
depressed：移除按钮的阴影效果
2. v-text-field文本框
v-text-field官网
v-btn按钮和v-text-field文本
（1）append-icon：在文本框后面追加一个图标，默认为String类型；
（2）counter：为输入长度创建一个计数器，如果未指定数字，则默认为25，不会应用任何验证；类型为boolean|number|string；
（3）disabled：布尔类型boolean不可见；
（4）multi-line：是否转为文本域，默认是false。文本框和文本域可以自由切换；
（5）name：字段名，表单中会用到；
（6）label：提示文字，输入框的标签；
（7）value：值。可以用v-model代替，实现双向绑定。
（8）hide-details：表示隐藏文本框底部错误信息。
（9）required：是否为必填项，如果是，会在label后加*，不具备校验功能。默认是false；
（10）rows：文本域的行数，multi-line为true时才有效；
（11）single-line：是否单行文本显示，默认是false；
（12）hint：提示文本；
（13）persistent-hint：强制提示总是可见的
3. v-textarea多行文本框 v-textarea
（1）auto-grow：根据文本数量自动增长文本；
（2）rows：默认行数；
（3）hint：提示文本；
（4）persistent-hint：强制提示总是可见的；
（5）disabled：禁用输入；
（6）id：设置组件上的 DOM id；
（7）hide-details：表示隐藏文本框底部提示和验证错误信息；
（8）flat：当使用solo或者solo-inverted属性时，移除添加到元素的标高（阴影）
项目实例：
<v-col cols="12">
<vee
:rules="{required:true, max: 128}"
v-slot="{ errors }"
>
<v-textarea
:error-messages="errors"
:label="$t('schema.license.customerUuid')"
:rows="1"
auto-grow
v-model="currentModel.customerUuid"
></v-textarea>
</vee>
</v-col>
4. v-toolbar工具栏组件
Vuetify官网链接：v-toolbar工具栏
v-toolbar 组件对于任何 gui 都是至关重要的，因为它通常是站点导航的主要来源。工具栏组件与 v-navigation-drawer 和 v-card 配合使用效果非常好。
dense: 将工具栏内容的高度降低到 48px（使用 prominent 属性时为 96px）。 --(type: boolean)
flat: 删除工具栏的框阴影。–(type: boolean)
5. v-dialog对话框
Vuetify官网链接：v-dialog对话框
v-dialog 组件常用属性：
（1）max-width：限制宽度；
（2）v-model：value值双向绑定到show变量，用来控制窗口显示；
（3）persistent: 在元素外部单击不会将其停用。----(type: boolean)-(delault: false)；
（4）scrollable：当包含card, card-title, card-text 以及 card-actions这几个的对话框可滚动设为 true 的时候；card-text 应该指定高度并且设置 overflow-y；布尔类型，默认值为false.
6. v-card卡片
Vuetify官网链接：v-card卡片
v-card组件是一个多功能组件，可用于从面板到静态图像的任何事物。card组件有许多班助组件，使标记尽可能简单。没有列出选项的组件使用Vue的功能组件选项来加快渲染速度，并作为标记糖来使构建更容易。
（1）v-card-media：一般放图片或视频；
（2）v-card-title：卡片的标题，一般位于卡片顶部；
（3）v-card-text：卡片的文本（主体内容），一般位于卡片正中；
（4）v-card-action：卡片的按钮，一般位于卡片底部.
7.v-form表单
v-form的常用属性：
（1）lazy-validation：如果启用，value将永远是 true ，除非有可见的验证错误。您仍然可以调用validate()来手动触发验证；布尔类型，默认值为false。
（2）value：true，代表表单验证通过；false，代表表单验证失败；布尔类型，默认值为false。
v-form的常用方法：
（1）validate：校验整个表单数据，前提是你写好了校验规则。返回Boolean表示校验成功或失败。
（2）reset：重置表单数据。
8.v-menu下拉菜单
v-menu的常用属性：
（1）left：将组件向左边对齐
（2）right：将组件向右边对齐
（3）bottom：将组件向底部对齐
（4）offset-x(y)：在y轴上偏移菜单，与左/右(上/下)方向一起工作
（6）transition：设置组件转换方式
9.v-overlay遮罩层 v-overlay
v-overlay的常用属性：
（1）absolute：给组件应用 position: absolute，绝对定位，并且包含在其父元素内
（2）color：将指定的颜色应用于控件；
（3）value：控制组件可见还是隐藏；
（4）opacity：设置遮罩层的透明度；
（6）z-index：用于组件的 z-index
项目实例：
<template>
<div class="fill-height">
<v-overlay
:absolute="absolute"
:opacity="opacity"
:value="showing"
>
<v-progress-circular
indeterminate
size="64"
></v-progress-circular>
</v-overlay>
<inner-frame
:src="baseUrl+'#/strategy/dpi?assetIp='+ip+'&'+param+'&token='+token"
id="sasManageIframe"
name="sasFrame"
ref="frame"
style="border: none;"
></inner-frame>
</div>
</template>
<script>
import innerFrame from '@c/inner-frame.vue'
// import { services } from '@/settings'
import userMixins from '@/mixins/store/user'
export default {
mixins: [userMixins],
props: {
show: {
type: Boolean,
default: false
}
},
components: { innerFrame },
data() {
return {
baseUrl: '',
ip: '',
param:
'header=false&footer=false&toolbar=false&license=false&permanent=true&id=strategy&value=0',
token: '',
showing: false,
absolute: true,
opacity: 0.1
}
},
watch: {
show: {
handler(val) {
this.showing = val
},
immediate: true
}
},
mounted() {
//添加审计加载loading
const iframe = document.querySelector('#sasManageIframe')
if (iframe) {
const ithis = this // 将this赋给一个变量，在function(){}中使用
iframe.addEventListener(
'load',
function () {
ithis.showing = false
},
false
)
}
},
created() {
this.ip = this.$attrs.ip
// this.baseUrl = services.sas
this.baseUrl = `https://${this.ip}/`
this.token = this.$token
}
}
</script>
<style>
</style>
10. v-file-input文件上传 v-file-input
v-file-input属性：
（1）truncate-length：在用省略号截断之前的文件名的长度
（2）prepend-icon：在组件前添加一个图标，使用与 v-icon 相同的语法
（3）show-size：设置所选文件的显示大小。当使用 true 默认值为 1000 显示（kB，MB，GB） 时，1024 将显示（KiB，MiB，GiB）。
（4）accept：接收格式（accept=".doc,.docx,.png,.txt"）
11. v-navigation-drawer v-navigation-drawer
v-navigation-drawer的常用属性：
（1）permanent：不管屏幕尺寸如何，抽屉都可以看到
（2）value：控制组件可见还是隐藏
（3）fixed：给组件应用 position: fixed
12.v-data-table_表格组件 vuetify—v-data-table
v-data-table 用于显示表格数据，功能包括排序、搜索、分页、行内编辑、头部提示以及行选择。而我们在实际应用中使用最多的就是服务端分页和排序，如果你从后台加载数据，并希望显示结果之前进行分页和排序，你可以使用 total-items 属性。定义这个属性将会禁用内置的分页和排序，并且你需要使用 pagination 属性来监听变化。使用 loading 属性来显示获取数据时的进度条。
相关资料：
（1）data-tables组件
（2）v-data-table_表格组件
（3）data-table每页数目下拉框设置
项目实例：
(1) 安管(smp)操作日志&事件记录页面
<!--
FilePath: \src\views\reports\analysis\analysis1.vue
Project: xxx
CreatedAt: 2020-10-28 10:02:47
CreatedBy:666
Copyright: (c) 2020
Task: #1
操作日志页面
-->
<template>
<div class="d-flex flex-column fill-height">
<v-toolbar
class="mb-1"
slot="header"
>
<v-toolbar-items class="d-flex align-center">
<span class="pr-4">{{$t('schema.logs.time')}}</span>
<v-select
:items="items"
class="pr-5 mt-6"
dense
solo
style="flex: 1; width: 200px"
v-model="time"
></v-select>
<date-time-picker
:enablings="enabling"
v-model="date"
></date-time-picker>
<div class="my-2 ml-5">
<v-btn
@click="search"
color="primary"
>{{$t('common.actions.searchBtn')}}</v-btn>
</div>
</v-toolbar-items>
</v-toolbar>
<div
class="fill-height my-1 white"
style="overflow: auto;"
>
<data-table
:headers="headers"
:list="list"
:total="totalItems"
@pagi="pagi"
></data-table>
</div>
</div>
</template>
<script>
// import dateTimePicker from '@c/data-time-picker'
import dataTable from './data-table'
import dateTimePicker from './date-time-picker'
import { format, subMinutes, subHours, subDays } from 'date-fns'
export default {
components: {
dateTimePicker,
dataTable
},
// filters: {
// time(value) {
// return format(Date.parse(value), 'yyyy-MM-dd HH:mm:ss')
// }
// },
data() {
return {
date: {
from: format(subMinutes(new Date(), 10), 'yyyy-MM-dd HH:mm'),
to: format(new Date(), 'yyyy-MM-dd HH:mm')
},
items: [
{ text: this.$t('schema.dates.5-minutes'), value: 1 },
{ text: this.$t('schema.dates.1-hour'), value: 2 },
{ text: this.$t('schema.dates.1-day'), value: 3 },
{ text: this.$t('schema.dates.selfDefine'), value: 4 }
],
enabling: true,
time: '',
totalItems: 0,
model: {
timerange: {
type: 'absolute'
},
per_page: 15,
page: 1, // 当前页
// itemsPerPage: 10,
filter: { alerts: 'exclude' }
},
headers: [
// {
// type: 'index'
// },
// {
// text: '',
// value: 'data-table-expand',
// width: 20,
// align: 'right',
// sortable: false
// },
{
text: this.$t('schema.logs.operator'),
value: 'event.message',
align: 'left',
sortable: true
},
{
text: this.$t('schema.logs.time'),
value: 'event.priority',
align: 'left',
sortable: true
},
{
text: this.$t('schema.logs.content'),
value: 'event.description',
align: 'left',
sortable: true
}
],
list: []
}
},
watch: {
'model.page'() {
this.getRecords()
},
time: {
handler(val) {
if (val === 1 || val === 2 || val === 3) {
this.enabling = true
this.date.from =
val === 1
? format(subMinutes(new Date(), 5), 'yyyy-MM-dd HH:mm')
: val === 2
? format(subHours(new Date(), 1), 'yyyy-MM-dd HH:mm')
: format(subDays(new Date(), 1), 'yyyy-MM-dd HH:mm')
this.date.to = format(new Date(), 'yyyy-MM-dd HH:mm')
} else if (val === 4) {
this.enabling = false
}
}
}
},
methods: {
search() {
if (this.model.page === 1) {
this.getRecords()
} else {
this.model.page = 1
}
},
pagi(val) {
this.model.per_page = val.itemsPerPage
this.model.page = val.page
this.getRecords()
},
async getRecords() {
const date = JSON.parse(JSON.stringify(this.date))
const { from, to } = date
const data = JSON.parse(JSON.stringify(this.model))
Object.assign(data.timerange, {
from: new Date(from).toISOString(),
to: new Date(to).toISOString()
})
// const res = await search(data)
// if (res.status === 200) {
// this.list = res.data.events
// this.totalItems = res.data.total_events
// }
}
},
created() {
this.time = this.items[0].value
},
async mounted() {
this.getRecords()
}
}
</script>
<style lang="scss" scoped>
</style>
<!--
FilePath: \src\views\happening\record\data-table.vue
Project: xxx
CreatedAt: 2020-10-28 10:23:19
CreatedBy: 666
Copyright: (c) 2020
Task: #1
事件记录页面-data-table
-->
<template>
<v-data-table
:footer-props="perPageOptions"
:headers="headers"
:hide-default-footer="false"
:items="list"
:options.sync="options"
:server-items-length="total"
:single-expand="true"
@update:options="optionsChanged"
class="elevation-1 flex-table"
item-key="event.id"
>
<template
v-slot:item.event.timestamp="{ item }"
>{{format(Date.parse(item.event.timestamp), 'yyyy-MM-dd HH:mm:ss.SSS')}}</template>
</v-data-table>
</template>
<script>
import { format } from 'date-fns'
// import i18n from '@/i18n'
export default {
props: {
headers: {
type: Array,
default: () => {
return []
}
},
list: {
type: Array,
default: () => {
return []
}
},
total: {
type: Number,
default: 0
}
},
data() {
return {
format,
options: {
page: 1,
itemsPerPage: 15,
pageStart: 1,
pageStop: 1,
sortDesc: [false, false]
},
perPageOptions: {
'items-per-page-options': [5, 10, 15, 20, -1]
}
}
},
filters: {},
methods: {
optionsChanged() {
this.$emit('pagi', this.options)
}
}
}
</script>
(2) 安全审计(sas)数据外发页面
<!--
FilePath: \src\views\devices\outdata\outdata.vue
Project: xxx
CreatedAt: 2021-05-07 09:56:46
CreatedBy: 666
Copyright: (c) 2021
Task: #1
数据外发页面
-->
<template>
<one-table>
<div class="flex-grow-1">
<v-row class="mt-n4 mb-n4">
<v-col cols="6">
<syslog-server></syslog-server>
</v-col>
</v-row>
<v-row class="mt-n2">
<v-col cols="6">
<safe-platform></safe-platform>
</v-col>
</v-row>
</div>
</one-table>
</template>
<script>
import oneTable from '@c/layout/one-table'
import syslogServer from './syslog-server'
import safePlatform from './safe-platform'
export default {
components: { oneTable, syslogServer, safePlatform },
data() {
return {}
}
}
</script>
<style>
</style>
-------------------------------------------------------------------------------------
<!--
FilePath: \src\views\devices\outdata\syslog-server.vue
Project: xxx
CreatedAt: 2021-05-07 11:16:51
CreatedBy: 666
Copyright: (c) 2021
Task: #1
数据外发--syslog服务器模块
-->
<template>
<div class="d-flex flex-column white">
<v-toolbar
color="#e6f0fb"
dense
flat
>
<v-toolbar-title
class="primary--text"
>{{$t('schema.system.syslogServer')}}</v-toolbar-title>
</v-toolbar>
<div
class="d-flex flex-column"
style="height: 221px"
>
<div class="text-left pt-3 pl-3 mb-2">
<v-btn
:disabled="syslogServers.length >=2 ? true : false"
@click="addSyslogServer"
class="primary"
>{{$t('schema.system.addSyslogServer')}}</v-btn>
</div>
<div
class="mx-3"
style="border:1px solid #e0e0e0"
>
<v-data-table
:headers="headers"
:items="syslogServers"
:items-per-page="per_page"
class="fill-height overflow-y-auto"
hide-default-footer
>
<template v-slot:top>
<syslogServer-dialog
:icon="icon"
:model="model"
:title="title"
:uploadDatas="uploadDatas"
@changed="refresh"
v-if="serverDialog"
v-model="serverDialog"
></syslogServer-dialog>
</template>
<template v-slot:item.option="{ item }">
<v-icon
@click="editServer(item)"
class="mr-2"
color="primary"
dense
>edit</v-icon>
<v-icon
@click="deleteServer(item)"
color="primary"
dense
>remove_circle</v-icon>
</template>
</v-data-table>
</div>
</div>
</div>
</template>
<script>
import { enums } from '@utils'
import syslogServerDialog from './syslogServer-dialog'
import { findSyslogServer, remove } from '@api/system/outData'
import { success, error, confirm } from '@utils/message'
export default {
components: { syslogServerDialog },
data() {
return {
icon: '',
uploadDatas: [],
title: '',
serverDialog: false,
syslogServers: [],
per_page: 10000,
model: this.getDef(),
headers: [
{
text: this.$t('schema.system.ip'),
value: 'ip',
sortable: false
},
{
text: this.$t('schema.system.port'),
value: 'port',
sortable: false,
width: 60
},
{
text: this.$t('schema.system.uploadDatas'),
value: 'items',
sortable: false
},
{
text: this.$t('schema.dpi.actions'),
value: 'option',
sortable: false,
width: 80
}
]
}
},
methods: {
addSyslogServer() {
// if (this.syslogServers.length >= 2) {
// error(this.$t('schema.system.syslogServerlen'))
// return
// }
this.icon = 'add_circle'
this.title = this.$t('schema.system.addSyslogServer')
this.model = this.getDef()
this.serverDialog = true
},
editServer(item) {
this.icon = 'edit'
this.title = this.$t('schema.system.editSyslogServer')
let itemsys = JSON.parse(JSON.stringify(item))
itemsys.items = itemsys.items.map(o => {
for (let i = 0; i < this.uploadDatas.length; i++) {
if (this.uploadDatas[i].text === o) {
return this.uploadDatas[i].value
}
}
})
this.model = itemsys
this.serverDialog = true
},
refresh() {
this.findSyslogServer()
},
async deleteServer(item) {
const yes = await confirm(this.$t('common.messages.deleteConfirm'))
if (!yes) {
return
}
try {
await remove(item.id)
this.refresh()
success()
} catch (err) {
error()
throw new Error(err)
}
},
async findSyslogServer() {
const res = await findSyslogServer()
this.syslogServers = res.map(item => {
item.items = item.items.map(o => {
for (let i = 0; i < this.uploadDatas.length; i++) {
if (this.uploadDatas[i].value === o) {
return this.uploadDatas[i].text
}
}
})
return item
})
},
getDef() {
return {
ip: '',
port: '',
items: []
}
}
},
created() {
this.uploadDatas = enums.list('UploadDatas')
this.findSyslogServer()
}
}
</script>
-----------------------------------------------------------------------------------
<!--
FilePath: \src\views\devices\outdata\syslogServer-dialog.vue
Project: xxx
CreatedAt: 2021-05-09 11:33:46
CreatedBy: 666
Copyright: (c) 2021
Task: #1
新增/修改syslog服务器弹框
-->
<template>
<single-dialog
:actions="actions"
:icon="icon"
:title="title"
@cancel="cancel"
@ok="ok"
max-width="500"
v-model="value"
>
<vee-ob ref="ob">
<form-flex class="pb-0">
<v-row class="mx-0">
<v-col
class="pb-0"
cols="6"
>
<vee
:customMessages="{remote:$t('common.messages.alreadyExist')}"
:debounce="500"
:rules="{required: true, ip: true, remote: { callback: uniqueValue, args:{id: currentModel.id }}}"
v-slot="{ errors }"
>
<v-text-field
:error-messages="errors"
:label="$t('schema.system.ip')"
placeholder="192.168.1.1"
v-model="currentModel.ip"
></v-text-field>
</vee>
</v-col>
<v-col
class="pb-0"
cols="2"
>
<vee
rules="required|port"
v-slot="{ errors }"
>
<v-text-field
:error-messages="errors"
:label="$t('schema.system.port')"
placeholder="514"
v-model="currentModel.port"
></v-text-field>
</vee>
</v-col>
<v-col
class="mt-n8"
cols="12"
>
<div>
<h4 class="pt-4 pb-1">{{$t('schema.system.uploadData')}}</h4>
<v-row class="mb-n3">
<v-col
:key="index"
class="mt-n6"
cols="4"
v-for="(item, index) in this.uploadDatas"
>
<v-checkbox
:label="item.text"
:value="item.value"
class="pt-0"
dense
hide-details
v-model="currentModel.items"
></v-checkbox>
</v-col>
</v-row>
</div>
</v-col>
</v-row>
</form-flex>
</vee-ob>
</single-dialog>
</template>
<script>
import { singleDialog } from '@c/dialogs'
import { formFlex } from '@c/forms'
import { update, create, validateSyslogServerIp } from '@api/system/outData'
import { success, error } from '@utils/message'
export default {
components: { singleDialog, formFlex },
props: {
value: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
},
uploadDatas: {
type: Array,
default: () => []
},
model: {
type: Object,
default: () => {}
}
},
data() {
return {
actions: true,
currentModel: {}
}
},
watch: {
model: {
handler(val) {
this.currentModel = JSON.parse(JSON.stringify(val))
},
immediate: true
}
},
methods: {
async uniqueValue(value, args) {
const res = await validateSyslogServerIp(value, args.id)
return res.length <= 0
},
cancel() {
this.$emit('input', false)
},
async ok() {
const valid = await this.$refs.ob.validate()
if (!valid) {
return
}
const { ip, port, items } = this.currentModel
let data = {
ip,
port: Number(port),
items
}
try {
if (this.currentModel.id) {
data = {
ip: { set: ip },
port: { set: Number(port) },
items
}
await update(this.currentModel.id, data)
} else {
await create(data)
}
this.$emit('changed')
this.$emit('input', false)
success()
} catch (err) {
error()
throw new Error(err)
}
}
}
}
</script>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)