Bagaimana untuk melaksanakan garis masa menggunakan Vue?

Dengan populariti rangkaian sosial dan platform lain, garis masa secara beransur-ansur menjadi bentuk popular untuk orang ramai berkongsi pengalaman hidup mereka. Garis masa boleh memaparkan satu siri peristiwa atau aktiviti dalam susunan kronologi untuk membantu orang menyemak masa lalu dan memahami sejarah Ia juga boleh digunakan untuk memaparkan pertumbuhan peribadi, diari perjalanan, kemajuan projek pasukan, dll.

Dalam pembangunan web, jika anda ingin memaparkan garis masa, anda boleh menggunakan rangka kerja Vue untuk membina dan mencapai kesannya dengan cepat. Mari belajar cara menggunakan Vue untuk melaksanakan garis masa.

1. Susun atur halaman

Garis masa biasanya dibahagikan kepada dua bentuk: garis masa menegak dan garis masa mendatar. Garis masa mendatar secara amnya memaparkan satu siri peristiwa dalam tempoh masa tertentu, manakala garis masa menegak memaparkan peristiwa dalam susunan kronologi, serupa dengan garis masa.

Artikel ini mengambil garis masa menegak sebagai contoh Pertama, mengikut draf reka bentuk, kita perlu menulis kod susun atur halaman

<div class="timeline">
  <div class="timeline-header">
    <div class="timeline-header-line"></div>
  </div>
  <div class="timeline-container">
      <div class="timeline-item">
        <div class="timeline-item-time">2010年</div>
        <div class="timeline-item-content">content 1</div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-time">2012年</div>
        <div class="timeline-item-content">content 2</div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-time">2015年</div>
        <div class="timeline-item-content">content 3</div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-time">2017年</div>
        <div class="timeline-item-content">content 4</div>
      </div>
  </div>
</div>

Untuk memaparkan gaya dengan lebih baik, saya menggunakan reka letak fleksibel di sini.

2. Tentukan data dan render

Seterusnya, anda perlu menentukan data dalam contoh Vue dan memaparkan data ke dalam halaman.

new Vue({
  el: '#app',
  data: {
    list: [
      {
        time: '2010年',
        content: 'content 1'
      },
      {
        time: '2012年',
        content: 'content 2'
      },
      {
        time: '2015年',
        content: 'content 3'
      },
      {
        time: '2017年',
        content: 'content 4'
      }
    ]
  }
})

Kemudian gunakan arahan v-for untuk mengulangi data pada halaman dan gunakan {{}} untuk mengikat data ke halaman. v-for指令在页面上循环遍历数据，并使用{{}}绑定数据到页面中。

<div class="timeline-item" v-for="item in list">
  <div class="timeline-item-time">{{ item.time }}</div>
  <div class="timeline-item-content">{{ item.content }}</div>
</div>

三、实现动画效果

为了增加用户体验，我们可以为每个事件添加动画效果。将data中的list属性添加一个新属性isShow，用于标识是否显示当前事件内容。

data: {
  list: [
    {
      time: '2010年',
      content: 'content 1',
      isShow: false
    },
    {
      time: '2012年',
      content: 'content 2',
      isShow: false
    },
    {
      time: '2015年',
      content: 'content 3',
      isShow: false
    },
    {
      time: '2017年',
      content: 'content 4',
      isShow: false
    }
  ]
}

接下来，可以为每个事件添加点击事件，来控制当前事件内容展示和隐藏，这里我们需要用到Vue的事件处理器和class绑定。

<div class="timeline-item" v-for="(item, index) in list" :key="index">
  <div class="timeline-item-time" @click="item.isShow = !item.isShow">
    {{ item.time }}
  </div>
  <div class="timeline-item-content" :class="{show: item.isShow}">{{ item.content }}</div>
</div>

我们可以在class属性中添加判断，如果当前item.isShow为真则添加show

.timeline-item-content {
  display:none;
  height: 0;
  transition:all .3s linear;
}
.show {
  display:block;
  height: auto;
}

3. Laksanakan kesan animasi

Untuk meningkatkan pengalaman pengguna, kami boleh menambah kesan animasi pada setiap acara. Tambahkan atribut baharu isShow pada atribut list dalam data untuk mengenal pasti sama ada mahu memaparkan kandungan acara semasa.

<div id="app">
  <div class="timeline">
    <div class="timeline-header">
      <div class="timeline-header-line"></div>
    </div>
    <div class="timeline-container">
      <div class="timeline-item" v-for="(item, index) in list" :key="index">
        <div class="timeline-item-time" @click="item.isShow = !item.isShow">
          {{ item.time }}
        </div>
        <div class="timeline-item-content" :class="{show: item.isShow}">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .timeline {
    position: relative;
    max-width: 1000px;
    margin: 30px auto;
  }

  .timeline-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #ccc;
    transform: translate(-50%, calc(50% - 15px));
  }

  .timeline-header-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50px;
    height: 30px;
    background: #ccc;
    transform: translateX(-50%);
    border-radius: 30px;
  }

  .timeline-container {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }

  .timeline-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    margin-bottom: 50px;
    padding: 0 50px;
    cursor: pointer;
  }

  .timeline-item:after {
    content: '';
    position: absolute;
    top: 12px;
    left: -15px;
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
  }

  .timeline-item:before {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #ccc;
  }

  .timeline-item:after,
  .timeline-item:before {
    z-index: 2;
  }

  .timeline-item-content {
    display: none;
    height: 0;
    transition: all .3s linear;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: 10px;
  }

  .timeline-item-time {
    width: 150px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: right;
    flex-shrink: 0;
    margin-right: 20px;
  }

  .show {
    display: block;
    height: auto;
  }
</style>

<script>
  new Vue({
    el: '#app',
    data: {
      list: [
        {
          time: '2010年',
          content: 'content 1',
          isShow: false
        },
        {
          time: '2012年',
          content: 'content 2',
          isShow: false
        },
        {
          time: '2015年',
          content: 'content 3',
          isShow: false
        },
        {
          time: '2017年',
          content: 'content 4',
          isShow: false
        }
      ]
    }
  })
</script>

Seterusnya, anda boleh menambah acara klik pada setiap acara untuk mengawal paparan dan penyembunyian kandungan acara semasa Di sini kita perlu menggunakan pengendali acara dan pengikatan class. 🎜rrreee🎜Kita boleh menambah pertimbangan dalam atribut class Jika item.isShow semasa adalah benar, tambah kelas show, jika tidak, jangan tambah. itu, dengan itu Merealisasikan paparan dan penyembunyian kandungan acara. 🎜rrreee🎜Komponen garis masa yang paling asas boleh dilaksanakan melalui kod di atas. 🎜🎜Akhir sekali hanya tampal kod lengkap. 🎜rreeee

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan garis masa menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!