【Vue.js】Vue.js组件库Element中的折叠面板、时间线、分割线和日历

我不是女神ヾ 2022-12-03 13:11 1158阅读 0赞

1、Collapse 折叠面板

通过折叠面板收纳内容区域。

基础用法

可同时展开多个面板，面板之间不影响。
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center

  1. <el-collapse v-model="activeNames" @change="handleChange">
  2.   <el-collapse-item title="一致性 Consistency" name="1">
  3.     <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
  4.     <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
  5.   </el-collapse-item>
  6.   <el-collapse-item title="反馈 Feedback" name="2">
  7.     <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
  8.     <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
  9.   </el-collapse-item>
  10.   <el-collapse-item title="效率 Efficiency" name="3">
  11.     <div>简化流程：设计简洁直观的操作流程；</div>
  12.     <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
  13.     <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
  14.   </el-collapse-item>
  15.   <el-collapse-item title="可控 Controllability" name="4">
  16.     <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
  17.     <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
  18.   </el-collapse-item>
  19. </el-collapse>
  20. <script> export default { data() { return { activeNames: ['1'] }; }, methods: { handleChange(val) { console.log(val); } } } </script>

手风琴效果

每次只能展开一个面板。
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1

通过 accordion 属性来设置是否以手风琴模式显示。

  1. <el-collapse v-model="activeName" accordion>
  2.   <el-collapse-item title="一致性 Consistency" name="1">
  3.     <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
  4.     <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
  5.   </el-collapse-item>
  6.   <el-collapse-item title="反馈 Feedback" name="2">
  7.     <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
  8.     <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
  9.   </el-collapse-item>
  10.   <el-collapse-item title="效率 Efficiency" name="3">
  11.     <div>简化流程：设计简洁直观的操作流程；</div>
  12.     <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
  13.     <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
  14.   </el-collapse-item>
  15.   <el-collapse-item title="可控 Controllability" name="4">
  16.     <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
  17.     <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
  18.   </el-collapse-item>
  19. </el-collapse>
  20. <script> export default { data() { return { activeName: '1' }; } } </script>

自定义面板标题

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2

  1. <el-collapse accordion>
  2.   <el-collapse-item>
  3.     <template slot="title">
  4.       一致性 Consistency<i class="header-icon el-icon-info"></i>
  5.     </template>
  6.     <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
  7.     <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
  8.   </el-collapse-item>
  9.   <el-collapse-item title="反馈 Feedback">
  10.     <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
  11.     <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
  12.   </el-collapse-item>
  13.   <el-collapse-item title="效率 Efficiency">
  14.     <div>简化流程：设计简洁直观的操作流程；</div>
  15.     <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
  16.     <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
  17.   </el-collapse-item>
  18.   <el-collapse-item title="可控 Controllability">
  19.     <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
  20.     <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
  21.   </el-collapse-item>
  22. </el-collapse>

Collapse Attributes



























参数 说明 类型 可选值 默认值
value / v-model 当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array) string / array — —
accordion 是否手风琴模式 boolean — false

Collapse Events
















事件名称 说明 回调参数
change 当前激活面板改变时触发(如果是手风琴模式，参数 activeNames 类型为string，否则为array) (activeNames: array / string)

Collapse Item Attributes


































参数 说明 类型 可选值 默认值
name 唯一标志符 string/number — —
title 面板标题 string — —
disabled 是否禁用 boolean — —

2、Timeline 时间线

可视化地呈现时间流信息。

基础用法

Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3

  1. <div class="block">
  2.   <div class="radio">
  3.     排序：
  4.     <el-radio-group v-model="reverse">
  5.       <el-radio :label="true">倒序</el-radio>
  6.       <el-radio :label="false">正序</el-radio>
  7.     </el-radio-group>
  8.   </div>
  10.   <el-timeline :reverse="reverse">
  11.     <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
  12.       {
  13.    {activity.content}}
  14.     </el-timeline-item>
  15.   </el-timeline>
  16. </div>
  18. <script> export default { data() { return { reverse: true, activities: [{ content: '活动按期开始', timestamp: '2018-04-15' }, { content: '通过审核', timestamp: '2018-04-13' }, { content: '创建成功', timestamp: '2018-04-11' }] }; } }; </script>

⾃定义节点样式

可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4

  1. <div class="block">
  2.   <el-timeline>
  3.     <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp">
  4.       {
  5.    {activity.content}}
  6.     </el-timeline-item>
  7.   </el-timeline>
  8. </div>
  10. <script> export default { data() { return { activities: [{ content: '支持使用图标', timestamp: '2018-04-12 20:46', size: 'large', type: 'primary', icon: 'el-icon-more' }, { content: '支持自定义颜色', timestamp: '2018-04-03 20:46', color: '#0bbd87' }, { content: '支持自定义尺寸', timestamp: '2018-04-03 20:46', size: 'large' }, { content: '默认样式的节点', timestamp: '2018-04-03 20:46' }] }; } }; </script>

⾃定义时间戳

当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5

  1. <div class="block">
  2.   <el-timeline>
  3.     <el-timeline-item timestamp="2018/4/12" placement="top">
  4.       <el-card>
  5.         <h4>更新 Github 模板</h4>
  6.         <p>王小虎 提交于 2018/4/12 20:46</p>
  7.       </el-card>
  8.     </el-timeline-item>
  9.     <el-timeline-item timestamp="2018/4/3" placement="top">
  10.       <el-card>
  11.         <h4>更新 Github 模板</h4>
  12.         <p>王小虎 提交于 2018/4/3 20:46</p>
  13.       </el-card>
  14.     </el-timeline-item>
  15.     <el-timeline-item timestamp="2018/4/2" placement="top">
  16.       <el-card>
  17.         <h4>更新 Github 模板</h4>
  18.         <p>王小虎 提交于 2018/4/2 20:46</p>
  19.       </el-card>
  20.     </el-timeline-item>
  21.   </el-timeline>
  22. </div>

Timeline Attributes




















参数 说明 类型 可选值 默认值
reverse 指定节点排序方向，默认为正序 boolean — false

Timeline-item Attributes






























































参数 说明 类型 可选值 默认值
timestamp 时间戳 string - —
hide-timestamp 是否隐藏时间戳 boolean — false
placement 时间戳位置 string top / bottom bottom
type 节点类型 string primary / success / warning / danger / info -
color 节点颜色 string hsl / hsv / hex / rgb -
size 节点尺寸 string normal / large normal
icon 节点图标 string — -

Timeline-Item Slot


















name 说明
— Timeline-Item 的内容
dot 自定义节点

3、Divider 分割线

区隔内容的分割线。

基础用法

对不同章节的文本段落进行分割。
20200903180728432.png_pic_center

  1. <template>
  2.   <div>
  3.     <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
  4.     <el-divider></el-divider>
  5.     <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
  6.   </div>
  7. </template>

设置文案

可以在分割线上自定义文案内容。
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6

  1. <template>
  2.   <div>
  3.     <span>头上一片晴天，心中一个想念</span>
  4.     <el-divider content-position="left">少年包青天</el-divider>
  5.     <span>饿了别叫妈, 叫饿了么</span>
  6.     <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
  7.     <span>为了无法计算的价值</span>
  8.     <el-divider content-position="right">阿里云</el-divider>
  9.   </div>
  10. </template>

垂直分割

20200903180932402.png_pic_center

  1. <template>
  2.   <div>
  3.     <span>雨纷纷</span>
  4.     <el-divider direction="vertical"></el-divider>
  5.     <span>旧故里</span>
  6.     <el-divider direction="vertical"></el-divider>
  7.     <span>草木深</span>
  8.   </div>
  9. </template>

Divider Attributes



























参数 说明 类型 可选值 默认值
direction 设置分割线方向 string horizontal / vertical horizontal
content-position 设置分割线文案的位置 string left / right / center center

4、Calendar 日历

显示日期。

基本

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7

设置 value 来指定当前显示的月份。如果 value 未指定，则显示当月。value 支持 v-model 双向绑定。

  1. <el-calendar v-model="value">
  2. </el-calendar>
  4. <script> export default { data() { return { value: new Date() } } } </script>

自定义内容

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8

通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。

  1. <el-calendar>
  2.   <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
  3.   <template slot="dateCell" slot-scope="{date, data}">
  4.     <p :class="data.isSelected ? 'is-selected' : ''">
  5.       {
  6.    { data.day.split('-').slice(1).join('-') }} {
  7.    { data.isSelected ? '✔️' : ''}}
  8.     </p>
  9.   </template>
  10. </el-calendar>
  11. <style> .is-selected { color: #1989FA; } </style>

自定义范围

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 9

设置 range 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。

  1. <el-calendar :range="['2019-03-04', '2019-03-24']">
  2. </el-calendar>

Attributes


































参数 说明 类型 可选值 默认值
value / v-model 绑定值 Date/string/number — —
range 时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月 Array — —
first-day-of-week 周起始日 Number 1 到 7 1

dateCell scoped slot 参数



























参数 说明 类型 可选值 默认值
date 单元格代表的日期 Date — —
data { type, isSelected, day}，type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd Object — —

发表评论

表情：
评论列表 （有 0 条评论，1158人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery 折叠面板

    手风琴是非常常见而实用的效果，本篇文章示例一个简单的手风琴效果。 上效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

    傷城~傷城~/ 0 赞/ 434 阅读