▲扩展面板

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

使用<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>

---