Skip to content

feat: timeline组件增加横版模式及时间戳插槽#69

Merged
levy9527 merged 10 commits intoFEMessage:devfrom
snowlocked:feat/timeline
Sep 1, 2020
Merged

feat: timeline组件增加横版模式及时间戳插槽#69
levy9527 merged 10 commits intoFEMessage:devfrom
snowlocked:feat/timeline

Conversation

@snowlocked
Copy link
Copy Markdown

@snowlocked snowlocked commented Aug 12, 2020

Why

timeline要一个横版模式来体现事件的横向变化
1

How

  1. 增加direction属性,默认vertical,可设置为horizontal。
export default{
  props:{
     // ... 其他属性
     direction: {
       type: String,
       default: 'vertical'
     }
  }
}
  1. 添加组件class名称,添加对该class下各个dom的style。
export default{
  render() {
      // ...
      const direction = this.direction;
      const classes = {
        // ...
        'is-horizontal': direction === 'horizontal'
      };
      // ...
      return (<ul class={ classes }>
        { slots }
      </ul>);
    }
}
// timeline.scss
@include b(timeline){
   // ... 其他样式
  &.is-horizontal{
     
    @include b(timeline-item) {
        // 竖排的样式
     }
  }
}
  1. 横版排列时的时间线调整,需要放到时间戳和内容中间夹着。
<template>
  <li class="el-timeline-item">
    <!-- 原有内容 -->
    <component :is="renderTimelineWrapper"></component>
  </li>
</template>

<script>
export default {
  computed: {
    renderTimelineWrapper() {
       // 生成渲染的jsx
       const contents = [
          // 时间戳,
          // 时间线,
          // 内容 
      ]
      return {
        render() {
          return (
            <div class='el-timeline-item__wrapper'>{contents}</div>
          );
        }
      };
    }
  }
};
</script>

@auto-add-label auto-add-label bot added the enhancement New feature or request label Aug 12, 2020
@netlify
Copy link
Copy Markdown

netlify bot commented Aug 12, 2020

Deploy preview for femessage-element ready!

Built with commit 757999e

https://deploy-preview-69--femessage-element.netlify.app

@snowlocked snowlocked changed the title feat: timeline组件增加横版模式 feat: timeline组件增加横版模式及时间戳插槽 Aug 18, 2020
@levy9527 levy9527 merged commit 7794b44 into FEMessage:dev Sep 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants