时间轴组件（Vue+element）

Posted 2023-03-21

参考技术A 说明：element UI带有时间轴插件（el-timeline），但是只显示无法实现折叠展开功能且比较单一，不满足要求，故重新封装一个；

最终效果：

实现过程：
        dom:使用无序标签li 给定title作为时间显示容器：点击时可展开或折叠 使用button标签 ，下面内容部分使用slot传入（里面内容不固定，方便组件复用），嵌套在el-collapse-transition 中以优化动画效果；
        js:数据：属性传入dataList:数组，每一项格式为time:'2019-12-22',content:,active:false    时间标题点击事件selectMenu(arr, index)  arr：该方法修改对应时间下内容是否显示；
        css:这里需要注意的是时间轴的线不能断，所以li 之间不能有margin 值，左边的线用border-left 生成，时间前面的点使用 i 标签生成，用相对定位且相对左边给一个负的left值，与标题不能换行且要有宽高使用inline-block;

vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

参考技术A 本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。

1、vue如何使用element-ui

2、创建相应文件。

a、创建父组件 src/components/tabZujian.vue

b、创建自组件（被切换的组件）src/tabComponents 文件夹

+ + tabComponents（目录）

---- tabZujianChild1.vue

---- tabZujianChild2.vue

3、编写组件实现tab切换不同子组件

tabZujian.vue

<template>
<div class="tabZujian">
<el-tabs v-model="activeName">
<el-tab-pane label="tab1" name="first" :key="'first'">
<child1></child1>
</el-tab-pane>
<el-tab-pane label="tab2" name="second" :key="'second'">
<child2></child2>
</el-tab-pane>
</el-tabs>
</div>
</template>

<script>
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from '@/tabComponents/tabZujianChild2'
export default
name: 'tabZujian',
components:
child1:tabZujianChild1,
child2:tabZujianChild2
,
data()
return //默认第一个选项卡
activeName: "first",



</script>

tabZujianChild1.vue

<template>
<div class="child1"> 我是第一个自组件 </div>
</template>

<script> export default
name: 'child1',
mounted()
console.log("tab1组件")

<
/script><

tabZujianChild2.vue

[template>
<div class="child2"> 我是第二个子组件 </div>
</template>

<script> export default
name: 'child1',
mounted()
console.log("tab2组件")

</script><
[

默认是tab1显示　　　　　　　切换到tab2显示也成功了

!* 但是不知道同学们是否注意到：

1、我在每个子组件的mounted生命周期钩子函数下分别打印了两个不同的文本

2、当路由到这个tab页面的时候，应该是没注意控制台是打印了当前显示的tab1组件中的console还是tab2组件的console

3、当你打开控制台的时候，你会很惊讶的发现。两个组件之中的console都被打印了。这说明，并不是我想象的，tab到1时候打印组件1；tab到2时候打印组件2

4、解决

这时候当你来回切换的时候，通过v-if判断是否重新渲染当前组件

更改一下tabZujian.vue

<template>
<div class="tabZujian">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="tab1" name="first" :key="'first'">
<child1 v-if="isChildUpdate1"></child1>
</el-tab-pane>
<el-tab-pane label="tab2" name="second" :key="'second'">
<child2 v-if="isChildUpdate2"></child2>
</el-tab-pane>
</el-tabs>
</div>
</template>

<script>
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from '@/tabComponents/tabZujianChild2'
export default
name: 'tabZujian',
components:
child1:tabZujianChild1,
child2:tabZujianChild2
,
data() return //默认第一个选项卡
activeName: "first",
isChildUpdate1:true,
isChildUpdate2:false

,
methods:
handleClick(tab)
if(tab.name == "first")
this.isChildUpdate1 = true;
this.isChildUpdate2 = false;
else if(tab.name == "second")
this.isChildUpdate1 = false;
this.isChildUpdate2 = true;



</script>

这回当你没吃切换tab的时候在注意v8的console

成功了