简易版纵向时间轴组件

最新推荐文章于 2026-05-18 12:31:21 发布

原创

最新推荐文章于 2026-05-18 12:31:21 发布 · 799 阅读

文章详细介绍了如何在Vue.js组件中利用CSS实现气泡边框的三角形效果，强调了计算三角形偏移量以确保边框宽度一致的重要性，并对比了正确计算与直接设置偏移值的不同结果。代码示例展示了两种不同的实现方式。

效果一

在这里插入图片描述

实现一个这样的功能其实不难，下面直接贴代码。但是案例中的气泡边框的三角形会有一个可能被忽视的问题。我们实现三角形的带边框的效果其实就是由两个三角形组成，紫色的三角形和白色的三角形叠加实现。如何实现一个三角形(下面示例把绿色当做白色)
在这里插入图片描述
把背景去掉，两个三角形重叠，紫色部分就是我们需要的气泡角。

因为我们要保证紫色部分的宽度（也就是下图黄色箭头的距离）是和我们气泡边框的宽度一致为2的话，我们就要求等腰直角三角形的斜边长度就是我们绿色三角形偏移的距离：2px / cos(45deg)。

在这里插入图片描述
大部分人可能直接设置偏移2px，下面我来展示一下一个是通过计算得出来的偏移值（图1），一个是直接设置2px偏移（图2）

代码

<template>
  <ul class="timeline-wrapper">
    <li class="timeline-wrapper-item" v-for="item in operationList" :key="item.id">
      <div class="out-circle">
        <div class="in-circle"></div>
      </div>
      <div class="timeline-content">
        <div class="timeline-content_box">
          <div class="box-title">{
  
  { item.name }}</div>
          <div class="box-desc">{
  
  { item.remark }}</div>
          <div class="box-date">{
  
  { item.createTime }}</div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
  import {
     
      defineComponent } from 'vue';

  export default defineComponent({
     
     
    name: 'OperationRecords',
    components: {
     
     },
    props: {
     
     
      operationList: {
     
     
        type: Array,
        default() {
     
     
          return [];
        },
      },
    },
    setup(props) {
     
     
      return {
     
     };
    },
  });
</script>

<style scoped lang="less">
  .timeline-wrapper {
     
     
    list-style: none;
    margin: 0;
    margin-top: 20px;
    padding: 0;

    &-item {
     
     
      position: relative;
      margin-left: 16px;
      border-left: 2px solid #ededed;
      &:last-child {
     
     
        border-left: 2px solid transparent !important;
      }
      &:first-child {