Vuetify2.x学习笔记(肆)：扩展面板(expansion panel)、菜单(menu)、对话框(dialog/popup)、表单(form)、日期选择器(date picker)【完结】

最新推荐文章于 2024-01-31 11:07:12 发布

Piconjo_Official

最新推荐文章于 2024-01-31 11:07:12 发布

阅读量5.5k

点赞数 3

分类专栏：前端文章标签： css html javascript vue vuetify

本文链接：https://blog.youkuaiyun.com/Piconjo/article/details/105959460

版权

前端专栏收录该内容

99 篇文章

订阅专栏

这篇博客详细介绍了Vuetify2.x中的扩展面板，包括如何控制其展开和折叠；菜单的创建与设置，如禁用、悬停展开等；对话框的属性配置，如宽度、可滚动性；表单的创建、校验规则及其操作；以及日期选择器的使用和集成。内容覆盖了Vuetify组件的多种交互和样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

▲扩展面板

该组件是一个信息栏当点击展开后能显示更多信息
在这里插入图片描述
使用<v-expansion-panels>标签创建一个扩展面板组里面可以有很多独立的扩展面板项

添加accordion手风琴效果移除扩展面板打开后的边距(默认离其它扩展面板之间是有一些距离的)
添加popout使面板以弹出的形式打开(默认是下拉方式打开)
添加inset使面板以嵌入的形式打开(默认是下拉方式打开)
添加multiple使面板能同时打开多个(默认是若打开一个后再打开另一个则原来的会被折叠)
添加disabled禁用整个扩展面板组
添加readonly使扩展面板组为只读状态(即只能看折叠的但不能打开)
添加focusable使当前打开的扩展面板有颜色加深效果
添加flat移除所有扩展面板的阴影和边框
添加hover当鼠标悬停在扩展面板上时被悬停的扩展面板有颜色加深效果
添加tile移除扩展面板组的边框圆角效果

在扩展面板组的区域里使用<v-expansion-panel>标签创建每一个扩展面板

添加disabled禁用整个扩展面板组
添加readonly使扩展面板组为只读状态(即只能看折叠的但不能打开)

使用<v-expansion-panel-header>标签创建扩展面板的标题即当扩展面板折叠起来时显示的内容
使用<v-expansion-panel-content>标签创建扩展面板的内容即当扩展面板展开后显示的内容

设置color属性修改背景颜色

<v-expansion-panels>
    <v-expansion-panel>
        <v-expansion-panel-header>Item</v-expansion-panel-header>
        <v-expansion-panel-content>
            <div class="font-weight-bold">测试</div>
            <div>内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        </v-expansion-panel-content>
    </v-expansion-panel>
</v-expansion-panels>

还可通过JS控制扩展面板的展开和折叠：

在<v-expansion-panels>上用v-model控制
v-model绑定的是一个数组其中数组的下标即为展开的扩展面板项的下标(下标从0开始)

<v-expansion-panels multiple v-model="panel">
    <v-expansion-panel v-for="project in projects" :key="project.title">
        <v-expansion-panel-header>{{project.title}}</v-expansion-panel-header>
        <v-expansion-panel-content>
            <div class="font-weight-bold">{{project.status}}</div>
            <div>{{project.lorem}}</div>
        </v-expansion-panel-content>
    </v-expansion-panel>
</v-expansion-panels>

...


<script>
export default {
    data()
    {
        return {
            panel:[1,2], // 数组里只有1和2 那么第2和第3个扩展面板项将被默认展开
            projects:[
                {title:"标题3",person:"陈涛",weather:"晴",status:"Great",lorem:"  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur minima quis impedit cum nemo suscipit ratione repellendus voluptatibus commodi, explicabo dolore aliquid quod autem eius voluptate mollitia? Quod, sequi minima!"},
                {title:"标题2",person:"张涛",weather:"暴雨",status:"Relax",lorem:"  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur minima quis impedit cum nemo suscipit ratione repellendus voluptatibus commodi, explicabo dolore aliquid quod autem eius voluptate mollitia? Quod, sequi minima!"},
                {title:"标题1",person:"王涛",weather:"小雨",status:"Angry",lorem:"  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur minima quis impedit cum nemo suscipit ratione repellendus voluptatibus commodi, explicabo dolore aliquid quod autem eius voluptate mollitia? Quod, sequi minima!"},
                {title:"标题4",person:"李涛",weather:"阴",status:"Great",lorem:"  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur minima quis impedit cum nemo suscipit ratione repellendus voluptatibus commodi, explicabo dolore aliquid quod autem eius voluptate mollitia? Quod, sequi minima!"},
                {title:"标题5",person:"陈涛",weather:"晴",status:"Great",lorem:"  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur minima quis impedit cum nemo suscipit ratione repellendus voluptatibus commodi, explicabo dolore aliquid quod autem eius voluptate mollitia? Quod, sequi minima!"}

            ]
        }
    }
}
</script>

▲菜单

当点击菜单按钮即可弹出一个下拉框展示出里面所有的条目
在这里插入图片描述
使用<v-menu>标签创建一个菜单

添加disabled 使菜单被禁用(可以点击但点击无作用点击后无法展开)
添加open-on-hover 当鼠标悬停在菜单按钮时即展开菜单
使用close-on-click属性 设置点击菜单外部能否使菜单折叠(值为true/false 默认true)
使用close-on-content-click属性 设置点击菜单中的列表项时能否使菜单折叠(值为true/false 默认true)
添加offset-x 使展开后的菜单不遮挡按钮而是在按钮的x轴方向的旁边(默认展开菜单后会遮挡按钮)
添加offset-y 使展开后的菜单不遮挡按钮而是在按钮的y轴方向的旁边(默认展开菜单后会遮挡按钮)

用<template v-slot:activator="{on}">标签创建菜单按钮区
用<v-btn>创建菜单按钮(必须添加v-on="on"属性)

不仅是按钮菜单组件可以放入几乎任何组件例如图标(icon)或是文本且也需要添加v-on="on"属性

在<template>标签下方用<v-list>创建下拉列表

<v-menu offset-x>
    <!-- 菜单按钮 -->
    <template v-slot:activator="{on}">
        <v-btn v-on="on">
            <v-icon left>expand_more</v-icon>
            <span>menu</span>
        </v-btn>
    </template>
    <!-- 下拉列表 -->
    <v-list>
        <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
            <v-list-item-title>{{link.text}}</v-list-item-title>
        </v-list-item>
    </v-list>
</v-menu>

...

<script>
export default {
    data(){
        return {
            drawer:false,
            links:[
                { text: 'Homepare', icon: 'home',route:"/"},
                { text: 'Story', icon: 'book',route:"/story"},
                { text: 'about', icon: 'face',route:"/about"},
            ]
        }
    }
}
</script>

▲对话框/弹出框

使用<v-dialog>标签创建对话框

添加disabled 使弹出框被禁用(可以点击但点击无作用点击后无法弹出)
使用width属性 设置弹出框的宽度
使用max-width属性 设置弹出框的最大宽度
使用overlay-color属性 设置弹出框的遮罩层颜色
使用overlay-opacity属性 设置弹出框的遮罩层透明度
添加persistent 使弹出框只有点击弹出框内部的按钮才可被隐藏(默认是点击弹出框外部遮罩层也能使弹出框隐藏)
使用value属性 控制弹出框的显示和隐藏(值为true/false)
添加scrollable 使弹出框可滚动(还需给内部的<v-card-text>设置高度)

用<template v-slot:activator="{on}">标签创建对话框按钮区
用<v-btn>创建对话框按钮(必须添加v-on="on"属性)

不仅是按钮对话框组件可以放入几乎任何组件例如图标(icon)或是文本且也需要添加v-on="on"属性

在<template>标签下方用<v-card>创建弹出的对话框的内容

<v-dialog max-width="600px">
    <!-- 弹出框按钮 -->
    <template v-slot:activator="{ on }">
        <v-btn outlined class="success" v-on="on">Add new story</v-btn>
    </template>
    <!-- 弹出内容 -->
    <v-card>
        <v-card-title>
            <h2>Add a New Story</h2>
        </v-card-title>
    </v-card>
</v-dialog>

可滚动的对话框

<v-dialog scrollable max-width="300px" v-model="dialog">
  <template v-slot:activator="{ on }">
    <v-btn color="primary" dark v-on="on">可滚动的对话框</v-btn>
  </template>
  <v-card>
    <v-card-text style="height: 300px;"> <!--必须设置高度height-->
      <v-radio-group v-model="dialogm1" column>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
        <v-radio label="内容" value="1"></v-radio>
      </v-radio-group>
    </v-card-text>
    <v-divider></v-divider>
    <v-card-actions>
      <v-btn @click="dialog = false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

...

<script>
export default {
    data()
    {
        return {
            dialog: false
        }
    }
}
</script>

▲表单

使用<v-form>标签创建一个表单区域

使用<v-text-field>标签创建文本输入框(即<input type="text>)
在这里插入图片描述

使用label属性为输入框设置提示标题
默认标题在输入框中当输入框获得焦点标题会缩小并移动到输入框上方

<v-text-field label="标题" v-model="title"></v-text-field>

在这里插入图片描述

使用prepend-icon属性为输入框的前面添加一个小图标

<v-textarea label="详细信息" v-model="content" prepend-icon="edit"></v-textarea>

在这里插入图片描述

使用<v-textarea>标签创建文本输入域(即<textarea></textarea>)
也有label属性和prepend-icon属性

<v-textarea label="详细信息" v-model="content" prepend-icon="edit"></v-textarea>

表单校验

使用rules属性设置表单校验规则(rules属性必须用v-bind绑定)
然后在JS里进行配置规则规则是数组类型的可以有多个校验规则
当不符合某一条校验规则那么会在表单上显示对应的返回值

在数组里 v代表了输入框中的值可用正则表达式及其它逻辑运算符自定义校验规则

<v-text-field label="标题" v-model="title" prepend-icon="folder" :rules="titleRules"></v-text-field>

...

<script>
export default {
    data()
    {
        return {
            title: "",
            // 标题校验规则
            titleRules:[
                v => !!v || "标题不能为空",
                v => (v && v.length <= 10) || "标题不能超出10个字符",
            ],
            // 邮箱校验规则
            emailRules: [
                v => !!v || "邮箱不能为空",
                v => /.+@.+\..+/.test(v) || "请输入邮箱格式",
            ],
        }
    }
}
</script>

在这里插入图片描述

还可校验表单的提交

使用validate()验证表单内所有输入是否有效
使用reset()清空表单内所有输入值并重置校验失败提示语
使用resetValidation()仅重置校验失败提示语而不清空输入值

使用时需要在表单标签上添加ref属性将表单注册到父组件的$refs上

<v-form ref="form">
...

<v-btn @click="submit">保存</v-btn>
</v-form>

...

<script>
export default {
    methods: {
        submit()
        {
            if (this.$refs.form.validate())
            {
            	// 校验成功
                ...
            }
        }
    }
}
</script>

▲日期选择器

使用<v-date-picker>标签创建一个日期选择器

使用color属性和header-color属性设置颜色

也可将日期选择器集成在菜单中

可给<v-text-field>加上readonly属性以避免手误输入不符合规范的日期数值

<v-menu min-width="290px">
    <template v-slot:activator="{ on }">
        <v-text-field laber="日期" prepend-icon="event" v-on="on" v-model="date" readonly></v-text-field>
    </template>
    <v-date-picker v-model="date"></v-date-picker>
</v-menu>

...

<script>
export default {
    data()
    {
        return {
            date:null
        }
    }
}
</script>