一. 对话框
v-dialog 组件通知用户特定的任务，可能包含关键信息、需要决策或涉及多个任务。 请尽量少用对话框，因为它们会中断(流程)。
1. 对话框
对话框包含两个插槽，一个用于它的激活器，另一个用于它的内容（默认）。
<template>
<v-container grid-list-xs>
<v-dialog
v-model="dialog_show"
max-width="500px"
transition="dialog-transition"
>
<template v-slot:activator="{ on, attrs }">
<v-btn color="red lighten-2" dark v-bind="attrs" v-on="on">
Click Me
</v-btn>
</template>
<v-card>
<v-card-title class="text-h5 grey lighten-2"> 欢迎您 </v-card-title>
<v-card-text class="mt-4">
The literal Latin meaning of the Illuminati means "people who have
received special revelation." Naturally, there are many unrelated
groups in history who call themselves Illuminati. Usually, they claim
to possess Gnostic texts or other similar mysterious information.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" text @click="dialog_show = false">
好的
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-container>
</template>
<script>
export default {
data() {
return {
dialog_show: false,
};
},
};
</script>
2. 全屏对话框 fullscreen
<v-container grid-list-xs>
<v-dialog
v-model="dialog_show"
fullscreen
transition="dialog-transition"
>
<template v-slot:activator="{ on, attrs }">
<v-btn color="red lighten-2" dark v-bind="attrs" v-on="on">
Click Me
</v-btn>
</template>
<v-card>
<v-toolbar dark color="primary">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<v-btn text @click="dialog_show = false">OK</v-btn>
</v-toolbar>
<v-card-title> 欢迎您 </v-card-title>
<v-card-text class="mt-4">
The literal Latin meaning of the Illuminati means "people who have
received special revelation." Naturally, there are many unrelated
groups in history who call themselves Illuminati. Usually, they claim
to possess Gnostic texts or other similar mysterious information.
</v-card-text>
<v-img class="mx-4" src="~assets/gmh.jpg"></v-img>
</v-card>
</v-dialog>
</v-container>
3. 弹出方向 transition
(1). 顶部弹出
<v-dialog
v-model="dialog_show"
fullscreen
transition="dialog-top-transition"
>
(2). 底部弹出
<v-dialog
v-model="dialog_show"
fullscreen
transition="dialog-bottom-transition"
>
4. 禁用空白处点击关闭 persistent
<v-dialog
v-model="dialog_show"
persistent
transition="dialog-bottom-transition"
>
5. 可滚动内容 scrollable
<v-dialog
v-model="dialog_show"
scrollable
transition="dialog-bottom-transition"
>
6. 隐藏对话框蒙版 hide-overlay
<v-dialog
v-model="dialog_show"
hide-overlay
transition="dialog-bottom-transition"
>
7. 另类应用: 弹出加载条
<template>
<div class="text-center">
<v-btn
:disabled="dialog"
:loading="dialog"
class="white--text mt-10"
color="purple darken-2"
@click="dialog = true"
>
Start loading
</v-btn>
<v-dialog v-model="dialog" hide-overlay persistent width="300">
<v-card color="primary" dark>
<v-card-text>
Please stand by
<v-progress-linear
indeterminate
color="white"
class="mb-0"
></v-progress-linear>
</v-card-text>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialog: false,
};
},
watch: {
dialog(val) {
if (!val) return;
setTimeout(() => (this.dialog = false), 4000);
},
},
};
</script>
二. 长宽比 v-responsive
1. 长宽比 aspect-ratio
v-responsive 组件可用于将任何部分固定到特定的宽高比。
<v-card dark>
<v-responsive class="indigo" :aspect-ratio="16 / 9" max-width="10000">
<v-card-text class="text-h1 font-weight-medium">
这个卡片永远是16:9, 除非内容放不下了
</v-card-text>
</v-responsive>
</v-card>
2. 最大宽度 max-width
<template>
<v-card dark>
<v-responsive class="indigo" :aspect-ratio="16 / 9" max-width="1000">
<v-card-text class="text-h1 font-weight-medium">
这个卡片永远是16:9, 除非内容放不下了
</v-card-text>
</v-responsive>
</v-card>
</template>
3. 最大高度 max-height
最大高度的行为, 风格和最大宽度不统一
其行为如下:
三. 徽章/角标 v-badge
1. 简单徽章
<v-badge>
<v-icon>新消息</v-icon>
</v-badge>
2. 头像徽章
<v-badge color="red">
<v-avatar>
<img src="~assets/head.jpg" />
</v-avatar>
</v-badge>
3. 内容叠性 overlap
<v-badge color="red" overlap>
<v-avatar>
<img src="~assets/head.jpg" />
</v-avatar>
</v-badge>
4. 徽章的图标 icon
<v-badge dark color="red" overlap icon="mdi-lock">
<v-avatar>
<img src="~assets/head.jpg" />
</v-avatar>
</v-badge>
5. 徽章的文本 content
<v-badge dark color="red" overlap content="这是内容">
<v-avatar>
<img src="~assets/head.jpg" />
</v-avatar>
</v-badge>
6. 徽标的样式
(1). 徽标的边框 bordered
<v-badge color="red" overlap bordered content="6">
<v-btn color="success">未读消息</v-btn>
</v-badge>
(2). 瓦片徽标 tile
<v-badge color="red" overlap bordered content="6" tile>
<v-btn color="success">未读消息</v-btn>
</v-badge>
(3). 小点型徽标(不显示内容) dot
<v-badge color="red" dot>
<v-btn color="success">未读消息</v-btn>
</v-badge>
7. 徽标的位置
- left : 左置
- bottom : 置底
- offset-x : 水平偏移
- offset-y : 垂直偏移
8. 徽标插槽 v-slot:badge
我们可以使用v-slot:badge 插槽来自定义徽标的组件细节
v-slot:badge 插槽可以插入任何类型的插件
9. 插槽头像徽标
如果我们在v-slot:badge 插槽中插入头像, 同时在徽标中添加 avatar属性
<v-badge bordered overlap avatar>
<template v-slot:badge>
<v-avatar>
<v-img src="~assets/logo.png"></v-img>
</v-avatar>
</template>
<v-btn color="success">text</v-btn>
</v-badge>
10. 插槽图标徽标
<v-badge bordered overlap label color="success">
<template v-slot:badge>
<v-icon dark size="16">mdi-wechat</v-icon>
</template>
<v-btn color="info">联系我们</v-btn>
</v-badge>
四. 横幅 v-banner
1. 最简单的横幅
<v-banner>这是一个简单的banner</v-banner>
2. 横幅的阴影 elevation
<v-banner elevation="6">这是一个简单的banner</v-banner>
3. 带图标的横幅 icon
<v-banner elevation="6" icon="mdi-qqchat">这是一个简单的banner</v-banner>
图标也可以设置颜色
<v-banner elevation="6" icon="mdi-qqchat" icon-color="primary">这是一个简单的banner</v-banner>
图标点击事件
<template>
<div class="ma-4">
<br />
<v-banner
elevation="6"
icon="mdi-qqchat"
icon-color="primary"
@click:icon="alert"
>这是一个简单的banner</v-banner
>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
alert() {
alert("Hello, World!");
},
},
};
4. 横幅的样式
(1). 线型边框 outlined
<v-banner outlined>这是一个简单的banner</v-banner>
(2). 圆角 rounded
<v-banner rounded elevation="6">这是一个简单的banner</v-banner>
(3). shaped样式
<v-banner shaped elevation="6">这是一个简单的banner</v-banner>
5. 单行横幅 single-line
横幅可以有 1-2 行文本, 也可以设置single-line使其只有单行. 单行 VBanner 用于少量信息，建议仅用于桌面实现。
<v-banner
elevation="6"
single-line
color="indigo"
icon="mdi-qqchat"
dark
>这是一个简单的banner, 他只有单行, 如果文本长度超出组件宽度, 就会缩略</v-banner>
6. 横幅贴在浏览器窗口上
您可以选择启用粘性道具以确保内容固定在屏幕上（注意：在 IE11 中不起作用）
<v-banner
elevation="6"
sticky
color="indigo"
icon="mdi-qqchat"
dark
>这是一个简单的banner</v-banner>
7. 横幅的动作插槽 v-slot:actions
<v-banner elevation="6"
>这是一个简单的banner
<template v-slot:actions>
<v-btn text color="info">OK</v-btn>
<v-btn text color="error">cancel</v-btn>
</template>
</v-banner>
8. 横幅的图标插槽 v-slot:icon
<v-banner elevation="6"
>这是一个简单的banner
<template v-slot:icon>
<v-icon color="red"> mdi-lock </v-icon>
</template>
</v-banner>
