el-timeline組件


組件默認是把文字和時間放到一起顯示,如果想要時間放一邊,文字放一邊,同時還有較好的適應性,可以考慮如下做法:

  在el-timeline-item的v-for循環中寫span來顯示時間,子元素span可以拿到父元素el-timeline-item每次循環的數組對象的值,從而用來展示時間,最后用定位把span定到合適的位置(可以使用elementui給的placement屬性來隱藏時間,這樣可以在span中直接調時間。placement屬性只有top和bottom的值,所以可以設置其為left來屏蔽時間顯示)

<el-timeline class="rightfirst-bottom-right">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp"
              placement="left"
            >
              <div class="rightfirst-bottom-right-left">
                <span>{{ activity.timestamp }}</span>
              </div>
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>

  切記不要改elementui中未暴露出來的樣式,會出現無法預測的情況。

  (還有一種待實驗的方法:去掉scoped或許可以更改elementui中未暴露出來的屬性,但是要在當前樣式的最外層套上一層來消除全局樣式污染;但是這樣更改會出現什么情況同樣也是不可預測的)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM