vue+elementui 简单二次封装步骤条显示大事记

最新推荐文章于 2024-08-30 16:43:39 发布

sophialise

最新推荐文章于 2024-08-30 16:43:39 发布

阅读量856

点赞数 1

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/sophialise/article/details/118521371

版权

本文展示了一个使用Vue.js创建时间轴组件的示例。组件包含自定义图标、时间描述和事件详情，通过V-for遍历数据列表进行渲染。样式采用SCSS编写，确保字体大小和颜色符合要求。在父组件中引入并传递时间轴数据，实现了设备大事记的展示。

摘要由CSDN通过智能技术生成

效果图：

实现：页面

<template>
  <div class="evnets">
    <el-steps>
      <el-step v-for="(item,index) in timeLineDataList" :key="index">
        <template slot="icon">
          <img :src="getImgUrl(item.color)" class="img">
        </template>
        <template slot="description">
          <div> {{ item.time }}</div>
          <div class="label"> {{ item.label }}</div>
          <div v-if=" item.reason != null">{{ item.reason }}</div>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

script：

<script>
export default {
  name: 'Steps',
  props: {
    timeLineDataList: {
      type: Array,
      require: true,
      default: () => []
    }
  },
  // 方法集合
  methods: {
    // 获取图片地址
    getImgUrl(color) {
      return require('@/assets/img/timeLine/timeLine' + color + '.png')
    }
  }
}
</script>

css：

<style lang='scss' scoped>
.evnets{
  margin: calc(1.5vh) calc(2vh) calc(4vh) 0;

  .img{
    width: 25px;
    height: 25px;
  }

  ::v-deep .el-steps, .el-steps--horizontal,
  .el-step__description is-wait, .label{
    font-size: 13px;
    color:#fff;
    font-weight: 800;
  }
}
</style>

父组件引用：

<template>
  <div class="sub-container">
      <time-line :time-line-data-list="timeLineDataList" />
  </div>
</template>

script：

<script>
import TimeLine from './components/Steps.vue'
export default {
  name: '',
  components: { TimeLine },
  data() {
    // 这里存放数据
    return {
      tite: '设备大事记',
      // 时间轴展示数据
      timeLineDataList: [
        { time: '2021-01-01', color: 'A', label: '设备加入' },
        { time: '2021-05-01', color: 'B', label: '设备首次运行' },
        { time: '2021-06-01', color: 'D', label: '严重故障', reason: '停机检修' },
        { time: '2021-07-01', color: 'A', label: '设备恢复运行' }
      ]
    }
  }
}
</script>