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

▲扩展面板

该组件是一个信息栏 当点击展开后 能显示更多信息

使用<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!"},