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