feat: steps 组件功能开发

src/assets/svg/process.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#E1251B;}
+</style>
+<path class="st0" d="M6.4,8.7h1.3V14H5.4c-0.1,0-0.2-0.1-0.2-0.2V12h1.1c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5H5.2v-0.5l0,0
+	c0,0,0,0,0-0.1L6.4,8.7z M15.9,7.3h-7c-0.1,0-0.2,0.1-0.2,0.2V14h7.2c0.1,0,0.2-0.1,0.2-0.1l0,0V7.5C16.1,7.4,16,7.3,15.9,7.3z
+	 M22,11c0,6.1-4.9,11-11,11S0,17.1,0,11S4.9,0,11,0S22,4.9,22,11z M17.1,7.5c0-0.7-0.5-1.2-1.2-1.2h-7l-0.1,0
+	C8.2,6.3,7.7,6.9,7.7,7.5v0.2H6.1c-0.2,0-0.3,0.1-0.4,0.2L4.4,9.8c-0.1,0.2-0.2,0.4-0.2,0.7v3.3c0,0.7,0.5,1.2,1.2,1.2l1.4,0
+	c0.1,0.5,0.5,0.9,1,0.9c0.5,0,1-0.4,1-0.9h4.2c0.1,0.5,0.5,0.9,1,0.9c0.5,0,1-0.4,1-0.9l0.7,0c0.7,0,1.2-0.5,1.2-1.2V7.5z"/>
+</svg>

src/packages/steps/__test__/steps.spec.js

@@ -0,0 +1,62 @@
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Steps from '../steps.vue';
+import Step from "../step.vue";
+
+describe('Steps.vue', () => {
+    const stepWrapper = {
+        render(h) {
+            return h(Step, {
+                props: {
+                    title: '运输中',
+                    content: '您的订单已达到京东【北京旧宫营业部】',
+                    time: '2020-03-03 11：09：96'
+                }
+            })
+        }
+    }
+    const wrapper = shallowMount(Steps, {
+        slots: {
+            default: [stepWrapper, stepWrapper, stepWrapper]
+        }
+    });
+    
+    
+    it('展示的步骤数', () => {
+        expect(wrapper.findAll('.nut-step').length).toBe(3);
+    });
+    it('默认展示的方向', () => {
+        expect(wrapper.contains('.nut-steps.horizontal')).toBe(false);
+    });
+
+    it('设置展示的方向', () => {
+        wrapper.setProps({
+            direction: 'horizontal'
+        });
+        expect(wrapper.contains('.nut-steps.horizontal')).toBe(true);
+    });
+
+    it('设置type为process, current', () => {
+        wrapper.setProps({
+            type: 'process',
+            current: 1,
+        });
+        setTimeout(() => {
+            expect(wrapper.find('.nut-step').exists()).toBe(true);
+            let nutStep = wrapper.findAll('.nut-step').at(0);
+            expect(nutStep.classes()).toContain('nut-step-status-finish');
+        }, 300)
+        
+        
+    });
+    it('设置时间前置', () => {
+        wrapper.setProps({
+            timeForward: true
+        });
+        setTimeout(() => {
+            expect(wrapper.find('.nut-step-time-forward').exists()).toBe(true);
+            expect(wrapper.find('.nut-step-time').exists()).toBe(true);
+        }, 300);
+    });
+    
+});

src/packages/steps/demo.vue

@@ -22,13 +22,21 @@
     </nut-steps>
     <h4>横向步骤条</h4>
     <nut-steps :current="1" type="process" direction="horizontal">
-      <nut-step title="已完成" ></nut-step>
-      <nut-step title="进行中" ></nut-step>
-      <nut-step title="等待中" ></nut-step>
+      <nut-step title="已完成"></nut-step>
+      <nut-step title="进行中">
+        <template v-slot:status-icon>
+          <nut-icon type="self" :url="require('../../assets/svg/process.svg')"></nut-icon>
+        </template>
+      </nut-step>
+      <nut-step title="等待中"></nut-step>
     </nut-steps>
     <nut-steps :current="1" type="process" direction="horizontal">
       <nut-step title="已完成" content="这里是描述文字"></nut-step>
-      <nut-step title="进行中" content="这里是描述文字"></nut-step>
+      <nut-step title="进行中" content="这里是描述文字">
+        <template v-slot:status-icon>
+          <nut-icon type="self" :url="require('../../assets/svg/process.svg')"></nut-icon>
+        </template>
+      </nut-step>
       <nut-step title="等待中" content="这里是描述文字"></nut-step>
     </nut-steps>
   </div>
@@ -42,14 +50,14 @@ export default {
 
 <style lang="scss" scoped>
 .nut-steps {
-	margin-left: 0 10px;
+  margin-left: 0 10px;
 }
 
 .next-step {
-	text-align: center;
-	line-height: 30px;
-	color: #fff;
-	background: #2d8cf0;
-	border-radius: 3px;
+  text-align: center;
+  line-height: 30px;
+  color: #fff;
+  background: #2d8cf0;
+  border-radius: 3px;
 }
 </style>

src/packages/steps/step.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="nut-step clearfix" :class="`${currentStatus ? 'nut-step-status-' + currentStatus : ''}`">
+  <div class="nut-step clearfix" :class="`${currentStatus ? currentStatus : ''}`">
     <div v-if="timeForward && time" class="nut-step-time-forward">{{ time }}</div>
     <div class="nut-step-node">
       <div class="nut-step-icon">
         <slot name="status-icon">
-          <nut-icon v-if="currentStatus === 'finish'" type="self" :url="require('../../assets/svg/finish.svg')"></nut-icon>
+          <nut-icon v-if="currentStatus === 'nut-step-status-finish'" type="self" :url="require('../../assets/svg/finish.svg')"></nut-icon>
           <span v-else class="default-icon"></span>
         </slot>
       </div>

src/packages/steps/steps.scss

@@ -13,6 +13,8 @@
 }
 
 .nut-steps {
+	background: #fff;
+	padding: 15px;
 	&.horizontal {
 		display: flex;
 

src/packages/steps/steps.vue

@@ -42,14 +42,14 @@ export default {
         // todo 如果当前是error,在current改变时需要处理
         if (!(isInit && child.currentStatus)) {
           if (this.current === index) {
-            child.currentStatus = 'process';
+            child.currentStatus = 'nut-step-status-process';
           }
           if (this.type === 'process') {
             if (index < this.current) {
-              child.currentStatus = 'finish';
+              child.currentStatus = 'nut-step-status-finish';
             }
             if (index > this.current) {
-              child.currentStatus = 'wait';
+              child.currentStatus = 'nut-step-status-wait';
             }
           }
         }