vue timeline 開箱即用的時間軸元件,日誌更新時間軸元件
阿新 • • 發佈:2021-09-22
年月展示時間軸元件
<template> <div> <Timeline :title="title" :data-list="dataList" :show-weather="showWeather"> </Timeline> </div> </template> <script> import Timeline from '@/components/Timeline' export default { name: 'timeline', components: { Timeline }, data() { return { title: '時間軸', showWeather: true, dataList: [ { year: '2021', date: '2021/09/10', weather: '晴天☀️', body: [ { month: '9月', children: [ { title: 'oauth' }, { title: '設計原則' } ] }, { month: '8月', children: [ { title: 'guacamole' }, { title: 'java netty websocket' }, { title: 'python websocket' }, { title: 'git lfs檔案' } ] }, { month: '7月', children: [ { title: 'java springboot spring.factories作用' }, { title: '資料庫建模 : 概念模型 , 邏輯模型和物理模型' }, { title: '資料中應不應使用外來鍵' }, { title: '學習雜談' } ] }, { month: '5月', children: [ { title: 'Django時區設定問題' } ] }, { month: '2月', children: [ { title: 'Typescript Install' }, { title: 'Django_Celery' } ] }, { month: '1月', children: [ { title: 'Anaconda In Docker with CodeServer' } ] }, ] }, { year: '2020', date: '2021/09/12', weather: '陰天☁️', body: [ { month: '10月', children: [ { title: 'What is k8s' } ] }, { month: '9月', children: [ { title: 'jmockit' } ] }, { month: '8月', children: [ { title: 'java併發程式設計' }, { title: 'add colorful' } ] }, { month: '7月', children: [ { title: 'Elastic Mapping Field DataType' }, { title: '阿里巴巴高階演算法專家威視:組建技術團隊的一些思考' }, { title: 'ElasticSearch Mapping' } ] } ] }, { year: '2019', date: '2021/09/13', weather: '雨天☔️', body: [ { month: '12月', children: [ { title: 'ChatBot對話管理' } ] }, { month: '9月', children: [ { title: 'ubuntu20 network config' }, { title: 'file share' } ] } ] }, { year: '2018', date: '2021/09/15', weather: '下雪❄️', body: [ { month: '11月', children: [ { title: 'mysql關鍵字' } ] }, { month: '9月', children: [ { title: 'docker安裝' } ] } ] } ] } } } </script> <style lang="scss" scoped> </style>
Timeline時間軸元件:
<template> <div class="timeline-wrap"> <div class="timeline-header"> <span>{{ title }}</span> </div> <div class="timeline-item" v-for="(item,index) in dataList" :key="index"> <div class="item-version"> <span>{{ item.year }}</span> </div> <!-- <div class="timeline-item-time"> <code>{{ item.date }}</code> <span class="item-weather" v-if="showWeather">{{ item.weather }}</span> </div> --> <div class="timeline-item-content"> <div v-for="(subItem,subIndex) in item.body" :key="subIndex"> <span class="subItem-title">{{ subItem.month }}</span> <div class="subItem-children"> <span v-for="(threeItem,threeIndex) in subItem.children" :key="threeIndex">{{ threeItem.title }}</span> </div> </div> </div> </div> </div> </template> <script> export default { name: 'Timeline', data(){ return { } }, props: { title: { type: String }, showWeather: { type: Boolean }, dataList: { type: Array } } } </script> <style lang="scss" scoped> @import "@/styles/timeline.scss"; </style>
Timeline時間軸樣式:
$base-color: #84b9e5; .timeline-wrap { padding: 20px 40px; .timeline-header { padding-bottom: 16px; span { font-size: 18px; font-weight: bold; } } .timeline-item { padding: 0px 10px 20px 20px; border-left: 1px solid $base-color; line-height: 1; position: relative; &::before { content: ''; display: inline-block; width: 6px; height: 6px; position: absolute; left: -4px; top: 0px; border: 1px solid $base-color; border-radius: 50%; background: #fff; background: $base-color; } .item-version { font-size: 24px; font-weight: bold; margin-bottom: 0.6em; } .timeline-item-time { margin-bottom: 12px; width: 200px; display: flex; justify-content: space-between; align-items: center; code { margin: 0 1px; padding: .2em .4em; font-size: .9em; background: #f2f4f5; border: 1px solid #f0f0f0; border-radius: 3px } .item-weather { font-size: 14px; } } .timeline-item-content { font-size: 14px; .subItem-title { padding: 8px 0 8px 0; display: block; color: #000; font-size: 16px; font-weight: bold; // margin-left: 12px; } .subItem-children { line-height: 1; text-indent: 1em; padding: 7px 0 0 7px; span { display: block; position: relative; margin-bottom: 8px; text-indent: 2em; line-height: 1.2; cursor: pointer; text-decoration: underline; &::before { content: ''; display: inline-block; width: 5px; height: 5px; position: absolute; left: 14px; top: 4px; border: 1px solid $base-color; border-radius: 50%; background: #fff; } &:hover { color: $base-color; } } } } } }
日誌更新時間軸元件
效果如下,
具體程式碼在github倉庫裡:https://github.com/Ritusan/color-library
本文來自部落格園,作者:葉子玉,轉載請註明原文連結:https://www.cnblogs.com/knuzy/p/15319829.html