Browse Source

fix: steps icon

suzigang 4 years ago
parent
commit
c9c11c9ff6
2 changed files with 6 additions and 22 deletions
  1. 1 1
      src/packages/step/index.vue
  2. 5 21
      src/packages/steps/demo.vue

+ 1 - 1
src/packages/step/index.vue

@@ -7,7 +7,7 @@
         :class="[!dot ? (icon ? 'is-icon' : 'is-text') : '']"
       >
         <template v-if="icon">
-          <nut-icon class="nut-step-icon-inner" :class="icon" />
+          <nut-icon class="nut-step-icon-inner" :name="icon" />
         </template>
         <template v-else-if="dot"></template>
         <template v-else>

+ 5 - 21
src/packages/steps/demo.vue

@@ -9,38 +9,22 @@
     </nut-steps>
     <h2>标题和描述信息</h2>
     <nut-steps current="2">
-      <nut-step
-        title="已完成"
-        content="步骤描述"
-        icon="nutui-iconfont nut-icon-wanshangshide"
-        >1</nut-step
-      >
+      <nut-step title="已完成" content="步骤描述">1</nut-step>
       <nut-step title="进行中" content="步骤描述"></nut-step>
       <nut-step title="未开始" content="步骤描述"></nut-step>
     </nut-steps>
     <h2>自定义图标</h2>
     <nut-steps current="1">
-      <nut-step
-        title="已完成"
-        icon="nutui-iconfont nut-icon-notice"
-        >1</nut-step
-      >
-      <nut-step title="进行中" icon="nutui-iconfont nut-icon-notice"
-        >2</nut-step
-      >
-      <nut-step
-        class="nut-step-wait"
-        title="未开始"
-        icon="nutui-iconfont nut-icon-notice"
-        >3</nut-step
-      >
+      <nut-step title="已完成" icon="notice">1</nut-step>
+      <nut-step title="进行中" icon="notice">2</nut-step>
+      <nut-step class="nut-step-wait" title="未开始" icon="notice">3</nut-step>
     </nut-steps>
     <h2>竖向步骤条</h2>
     <div style="height: 300px">
       <nut-steps direction="vertical" current="2">
         <nut-step
           title="已完成"
-          icon="nutui-iconfont nut-icon-wanshangshide"
+          icon="nut-icon-wanshangshide"
           content="您的订单已经打包完成,商品已发出"
           >1</nut-step
         >