feat(steps): 增加多端自定义步骤条块的样式功能

Author: chenxi-20

examples/sites/demos/apis/steps.js

@@ -115,6 +115,16 @@ export default {
           mode: ['pc'],
           pcDemo: 'node-width'
         },
+        {
+          name: 'itemStyle',
+          type: 'Object',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '自定义单链型步骤条块的内联样式',
+            'en-US': 'Customize the inline style of single chain step blocks'
+          },
+          mode: ['mobile-first']
+        },
         {
           name: 'line',
           type: 'boolean',

packages/vue/src/steps/src/index.ts

@@ -49,7 +49,11 @@ export const stepsProps = {
   },
   noArrow: Boolean,
   flex: Boolean,
-  contentCenter: Boolean
+  contentCenter: Boolean,
+  itemStyle: {
+    type: Object,
+    default: () => ({})
+  }
 }
 
 export default defineComponent({

packages/vue/src/steps/src/mobile-first.vue

@@ -50,7 +50,11 @@ export default defineComponent({
     },
     noArrow: Boolean,
     flex: Boolean,
-    contentCenter: Boolean
+    contentCenter: Boolean,
+    itemStyle: {
+      type: Object,
+      default: () => ({})
+    }
   },
   setup(props, context) {
     return $setup({ props, context, template })

packages/vue/src/steps/src/mobile-first/mobile-first-normal.vue

@@ -44,6 +44,7 @@
     <!-- visible step section -->
     <div
       data-tag="tiny-steps-block"
+      :style="itemStyle"
       v-for="(node, index) in data"
       v-show="isVisibleHandler(index) === 'visible'"
       :key="index"
@@ -232,7 +233,18 @@ export default defineComponent({
     IconFinish: IconFinish(),
     IconWarn: IconWarn()
   },
-  props: [...props, 'vertical', 'nameField', 'statusField', 'data', 'active', 'visibleNum', 'descriptionField', 'size'],
+  props: [
+    ...props,
+    'vertical',
+    'nameField',
+    'statusField',
+    'data',
+    'active',
+    'visibleNum',
+    'descriptionField',
+    'size',
+    'itemStyle'
+  ],
   setup(props: any, context: any) {
     return setup({ props, context, renderless, api, classes })
   }