Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

src/config.json

@@ -553,6 +553,26 @@
       "sort": "6",
       "showDemo": true,
       "author": "irisSong"
+    },
+    {
+      "version": "1.0.0",
+      "name": "TimeLine",
+      "chnName": "时间轴",
+      "desc": "对一系列数据进行展示，垂直展示",
+      "type": "component",
+      "sort": "0",
+      "showDemo": true,
+      "author": "yangxiaolu"
+    },
+    {
+      "version": "1.0.0",
+      "name": "TimeLineItem",
+      "chnName": "时间轴节点",
+      "desc": "定义时间轴节点",
+      "type": "component",
+      "sort": "0",
+      "showDemo": true,
+      "author": "yangxiaolu"
     }
   ]
 }

src/nutui.js

@@ -106,6 +106,10 @@ import Video from "./packages/video/index.js";
 import "./packages/video/video.scss";
 import Signature from "./packages/signature/index.js";
 import "./packages/signature/signature.scss";
+import TimeLine from "./packages/timeline/index.js";
+import "./packages/timeline/timeline.scss";
+import TimeLineItem from "./packages/timelineitem/index.js";
+import "./packages/timelineitem/timelineitem.scss";
 
 const packages = {
   Cell,
@@ -159,7 +163,9 @@ const packages = {
   TabSelect: TabSelect,
   LuckDraw: LuckDraw,
   Video: Video,
-  Signature: Signature
+  Signature: Signature,
+  TimeLine: TimeLine,
+  TimeLineItem: TimeLineItem
 };
 
 const components = {};

src/packages/timeline/doc.md

@@ -0,0 +1,86 @@
+# TimeLine 时间轴
+
+## 基本用法
+
+```html
+<nut-timeline>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+</nut-timeline>
+```
+
+## 轴点类型
+```html
+<nut-timeline>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem pointType="hollow">
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem :pointColor="'#456700'">
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+</nut-timeline>
+```
+
+## 自定义轴点样式
+```html
+<nut-timeline>
+    <nut-timelineitem>
+        <div slot="dot">
+            <svg class="icon" width="15" height="15"></svg>
+        </div>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem pointType="hollow">
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem :pointColor="'#456700'">
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+</nut-timeline>
+```
+
+### TimeLineItem Props
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| pointType | 轴点样式：circle/hollow | String | circle
+| pointColor | 自定义轴点颜色，表示背景的颜色或表示边框颜色； | String | '‘
+
+### TimeLineItem Slot 
+
+| 字段 | 说明 | 
+|----- | ----- | 
+| title | 时间轴title | 
+| dot | 自定义轴点 | 
+| 无 | 基本内容 | 

src/packages/timeline/index.js

@@ -0,0 +1,8 @@
+import TimeLine from './timeline.vue';
+import './timeline.scss';
+
+TimeLine.install = function(Vue) {
+  Vue.component(TimeLine.name, TimeLine);
+};
+
+export default TimeLine

src/packages/timeline/timeline.scss

@@ -0,0 +1,84 @@
+
+.nut-timeline{
+    
+    .nut-timelineitem{
+
+        position: relative;
+        font-size: 12px;
+
+        .timelineitem-list-box{
+            padding: 0 18px 0 0px;
+            color:#333;
+            .timelineitem-list{
+                position: relative;
+                padding-bottom: 10px;
+
+                .timelineitem-point{
+                    position: absolute;
+                    left: 0px;
+                    top: 2px;
+                    .point-icon{
+                        width: 7px;
+                        height: 7px;
+                        border: 1px solid #f00;
+                        border-radius: 50%;
+                        &.circle-icon{
+                            background: #f00;
+                        }
+
+                        &.hollow-icon{
+                            background: transparent;
+                        }
+                    }
+
+                    .custom-icon{
+                        // width: 9px;
+                        // height: 9px;
+                        overflow: hidden;
+                        background: transparent;
+                    }
+                }
+                
+                .timelineitem-title{
+                    margin-bottom: 8px;
+                    padding-left: 13px;
+                    line-height: 13px;
+                    position: relative;
+                    .time{
+                        font-size: 12px;
+                        color: #666;
+                    }
+                }
+                .timelineitem-content{
+                    padding-left: 13px;
+                }
+        
+                
+            }
+        }
+
+        &.left-border{
+            &:before{
+                position: absolute;
+                top: 10px;
+                left: 4px;
+                content: '';
+                width: 1px;
+                height: calc(100% - 8px);
+                background: #C2C2C2;
+            };
+        }
+
+        &:last-child{
+            &.left-border{
+                &:before{
+                    width: 0px;
+                };
+            }
+        }
+    }
+    
+    
+
+
+}

src/packages/timeline/timeline.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="nut-timeline">
+        <slot :isLast="false"></slot>
+    </div>
+</template>
+<script>
+
+export default {
+    name:'nut-timeline',
+    props: {
+
+    },
+    data() {
+        return {};
+    },
+    mounted(){
+        console.log(this.$slots)
+    },
+    methods: {
+    }
+}
+</script>

src/packages/timelineitem/demo.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="">
+      <nut-timelineitem></nut-timelineitem>
+    </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  },
+  data() {
+    return {};
+  },
+  methods: {
+      
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/timelineitem/index.js

@@ -0,0 +1,8 @@
+import TimeLineItem from './timelineitem.vue';
+import './timelineitem.scss';
+
+TimeLineItem.install = function(Vue) {
+  Vue.component(TimeLineItem.name, TimeLineItem);
+};
+
+export default TimeLineItem

src/packages/timelineitem/timelineitem.scss

@@ -0,0 +1,3 @@
+.nut-timelineitem{
+
+}

src/packages/timelineitem/timelineitem.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="nut-timelineitem left-border">
+        <div class="timelineitem-list-box">
+            <div :class="['timelineitem-list']">
+
+                <div class="timelineitem-point">
+                    <div v-if="!isCustomPoint" :class="[pointClass,'point-icon']" :style="pointStyle"></div>
+
+                    <div v-else class="custom-icon">
+                        <slot name="dot"></slot>
+                    </div>
+                </div>
+
+                <div class="timelineitem-title" v-if="isShowTitle">
+                    <div class="time">
+                        <slot name="title"></slot>
+                    </div>
+                </div>
+
+                <div class="timelineitem-content">
+                    <slot></slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-timelineitem',
+    props: {
+        // 轴点的样式：circle 圆  hollow 空心
+        pointType:{
+            type: String,
+            default: "circle"
+        },
+        // 轴点的颜色
+        pointColor:{
+            type: String,
+            default: "#fa2e05"
+        }
+    },
+    data() {
+        return {
+            isCustomPoint:false, //是否自定义轴点
+        };
+    },
+    computed:{
+        pointClass(){
+            return this.pointType+'-icon'
+        },
+        pointStyle() {
+            
+            return {'borderColor':this.pointColor,'background':this.pointType=='circle'?this.pointColor:'transparent'}
+        },
+        isShowTitle(){
+            return this.$slots.title?true:false
+        }
+    },
+    mounted(){
+        
+        this.isCustomPoint = this.$slots.dot?true:false
+
+        console.log(this.$parent.$el)
+    },
+    methods: {
+    }
+}
+</script>

types/nutui.d.ts

@@ -72,3 +72,5 @@ export declare class Popup extends UIComponent {}
 export declare class LuckDraw extends UIComponent {}
 export declare class Video extends UIComponent {}
 export declare class Signature extends UIComponent {}
+export declare class TimeLine extends UIComponent {}
+export declare class TimeLineItem extends UIComponent {}