style: steps demo

src/packages/__VUE/step/index.scss

@@ -6,8 +6,9 @@
   font-size: 0;
   &-head {
     position: relative;
-    display: block;
-    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 12px;
   }
   &-line {
     position: absolute;
@@ -20,12 +21,13 @@
   }
   &-icon {
     position: relative;
-    display: inline-block;
+    display: flex;
     width: 25px;
     height: 25px;
     line-height: 25px;
-    font-family: PingFangSC-Medium;
     font-size: 13px;
+    align-items: center;
+    justify-content: center;
     z-index: 1;
     .nut-icon {
       width: 100%;
@@ -107,7 +109,10 @@
       background-color: $white;
     }
     .nut-step-icon.is-icon {
-      background-color: $white;
+      background-color: $step-wait-bg-color;
+      .nut-icon {
+        color: $white;
+      }
     }
     .nut-step-content {
       color: #909ca4;
@@ -177,6 +182,7 @@
           height: 14px;
           background-color: $primary-color-end;
           border-radius: 50%;
+          opacity: 0.23;
         }
       }
     }

src/packages/__VUE/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" :name="icon" />
+          <nut-icon class="nut-step-icon-inner" :name="icon" :size="size" />
         </template>
         <template v-else-if="dot"></template>
         <template v-else>
@@ -19,7 +19,7 @@
       <view class="nut-step-title">
         {{ title }}
       </view>
-      <view class="nut-step-content" v-html="content"> </view>
+      <view class="nut-step-content" v-html="content" v-if="content"> </view>
     </view>
   </view>
 </template>
@@ -49,6 +49,10 @@ export default create({
     icon: {
       type: String,
       default: null
+    },
+    size: {
+      type: [String, Number],
+      default: '12px'
     }
   },
 

src/packages/__VUE/steps/demo.vue

@@ -1,26 +1,41 @@
 <template>
-  <div class="demo">
+  <div class="demo padding">
     <h2>基本用法</h2>
-    <nut-steps current="1">
-      <nut-step title="进行中">1</nut-step>
-      <nut-step title="未开始">2</nut-step>
-      <nut-step title="未开始">3</nut-step>
-      <nut-step title="未开始">4</nut-step>
-    </nut-steps>
+    <div class="steps-wrapper">
+      <nut-steps :current="current1">
+        <nut-step title="步骤一">1</nut-step>
+        <nut-step title="步骤二">2</nut-step>
+        <nut-step title="步骤三">3</nut-step>
+      </nut-steps>
+      <div class="steps-button">
+        <nut-button type="danger" @click="handleStep('current1')"
+          >下一步</nut-button
+        >
+      </div>
+    </div>
     <h2>标题和描述信息</h2>
-    <nut-steps current="2">
-      <nut-step title="已完成" content="步骤描述">1</nut-step>
-      <nut-step title="进行中" content="步骤描述"></nut-step>
-      <nut-step title="未开始" content="步骤描述"></nut-step>
-    </nut-steps>
+    <div class="steps-wrapper">
+      <nut-steps :current="current2">
+        <nut-step title="步骤一" content="步骤描述">1</nut-step>
+        <nut-step title="步骤二" content="步骤描述"></nut-step>
+        <nut-step title="步骤三" content="步骤描述"></nut-step>
+      </nut-steps>
+      <div class="steps-button" style="margin-top: 10px">
+        <nut-button type="danger" @click="handleStep('current2')"
+          >下一步</nut-button
+        >
+      </div>
+    </div>
     <h2>自定义图标</h2>
-    <nut-steps current="1">
-      <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>
+    <div class="steps-wrapper">
+      <nut-steps current="1">
+        <nut-step title="已完成" icon="service">1</nut-step>
+        <nut-step title="进行中" icon="people">2</nut-step>
+        <nut-step title="未开始" icon="location2">3</nut-step>
+      </nut-steps>
+    </div>
     <h2>竖向步骤条</h2>
-    <div style="height: 300px; padding: 0 20px">
+    <div class="steps-wrapper" style="height: 300px; padding: 15px 30px">
       <nut-steps direction="vertical" current="2">
         <nut-step title="已完成" content="您的订单已经打包完成，商品已发出"
           >1</nut-step
@@ -33,7 +48,8 @@
         >
       </nut-steps>
     </div>
-    <div style="height: 300px; padding: 0 20px">
+    <h2>竖向步骤条</h2>
+    <div class="steps-wrapper" style="height: 300px; padding: 15px 40px">
       <nut-steps direction="vertical" progress-dot current="2">
         <nut-step title="已完成" content="您的订单已经打包完成，商品已发出"
           >1</nut-step
@@ -50,17 +66,47 @@
 </template>
 
 <script lang="ts">
+import { reactive, toRefs } from 'vue';
 import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('steps');
 export default createDemo({
   props: {},
   setup() {
-    return {};
+    const state = reactive({
+      current1: 1,
+      current2: 1,
+      current3: 1,
+      current4: 1,
+      current5: 1
+    });
+
+    const handleStep = (params) => {
+      if (state[params] >= 3) {
+        state[params] = 1;
+      } else {
+        state[params] += 1;
+      }
+    };
+
+    return {
+      ...toRefs(state),
+      handleStep
+    };
   }
 });
 </script>
 
 <style lang="scss">
-.demo-box {
+.padding {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.steps-wrapper {
+  width: 100%;
+  padding: 15px 0;
+  background-color: #fff;
+  .steps-button {
+    text-align: center;
+  }
 }
 </style>

src/packages/styles/variables.scss

@@ -254,6 +254,7 @@ $address-region-tab-line: linear-gradient(
 );
 
 //steps
+$step-wait-bg-color: #959fb1;
 
 // dialog
 $dialog-width: 296px;

src/sites/mobile-taro/vue/src/pages/index/index.vue

@@ -36,6 +36,16 @@ import { reactive, toRefs } from 'vue';
 import { nav } from '../../../../../../config.json';
 export default {
   name: 'NutUI',
+  // onShareAppMessage: function (res) {
+  //   if (res.from === 'button') {
+  //     // 来自页面内转发按钮
+  //     console.log(res.target)
+  //   }
+  //   return {
+  //     title: '自定义转发标题',
+  //     path: '/page/user?id=123'
+  //   }
+  // },
   setup() {
     const state = reactive({
       nav

src/sites/mobile-taro/vue/src/pages/picker/index.config.ts

@@ -1,3 +0,0 @@
-export default {
-  navigationBarTitleText: 'Picker'
-};

src/sites/mobile-taro/vue/src/pages/picker/index.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>基础用法</h2>
-    <nut-picker mode="selector" :list-data="listData1" @confirm="confirm">
-      <nut-cell title="请选择城市" :desc="desc"></nut-cell>
-    </nut-picker>
-    <h2>多列样式</h2>
-    <nut-picker mode="multiSelector" :list-data="listData2" @confirm="confirm2">
-      <nut-cell title="请选择时间" :desc="desc2"></nut-cell>
-    </nut-picker>
-  </div>
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-export default {
-  props: {},
-  setup() {
-    const listData1 = [
-      '南京市',
-      '无锡市',
-      '海北藏族自治区',
-      '北京市',
-      '连云港市',
-      '浙江市',
-      '江苏市'
-    ];
-    const listData2 = ref([
-      {
-        values: ['周一', '周二', '周三', '周四', '周五'],
-        defaultIndex: 2
-      },
-      {
-        values: ['上午', '下午', '晚上'],
-        defaultIndex: 1
-      }
-    ]);
-
-    const desc = ref(listData1[0]);
-    const desc2 = ref(
-      `${listData2.value[0].values[listData2.value[0].defaultIndex]} ${
-        listData2.value[1].values[listData2.value[1].defaultIndex]
-      }`
-    );
-    const confirm = (value: any, res: any) => {
-      desc.value = res;
-    };
-
-    const confirm2 = (value: any, res: any) => {
-      desc2.value = res.join(' ');
-      listData2.value.forEach((item, idx) => {
-        item.defaultIndex = value[idx];
-      });
-    };
-
-    return {
-      listData1,
-      listData2,
-      desc,
-      desc2,
-      confirm,
-      confirm2
-    };
-  }
-};
-</script>

src/sites/mobile-taro/vue/src/pages/range/index.config.ts

@@ -1,3 +0,0 @@
-export default {
-  navigationBarTitleText: 'Range'
-};

src/sites/mobile-taro/vue/src/pages/range/index.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>基础用法</h2>
-    <nut-cell class="cell">
-      <nut-range v-model="value1" @change="onChange"></nut-range>
-    </nut-cell>
-    <h2>双滑块</h2>
-    <nut-cell class="cell">
-      <nut-range range v-model="value2" @change="onChange"></nut-range>
-    </nut-cell>
-    <h2>指定范围</h2>
-    <nut-cell class="cell">
-      <nut-range
-        v-model="value3"
-        :max="10"
-        :min="-10"
-        @change="onChange"
-      ></nut-range>
-    </nut-cell>
-    <h2>设置步长</h2>
-    <nut-cell class="cell">
-      <nut-range v-model="value4" :step="5" @change="onChange"></nut-range>
-    </nut-cell>
-    <h2>隐藏范围</h2>
-    <nut-cell class="cell">
-      <nut-range hidden-range v-model="value5" @change="onChange"></nut-range>
-    </nut-cell>
-    <h2>隐藏标签</h2>
-    <nut-cell class="cell">
-      <nut-range hidden-tag v-model="value6" @change="onChange"></nut-range>
-    </nut-cell>
-    <h2>禁用</h2>
-    <nut-cell class="cell">
-      <nut-range disabled v-model="value7"></nut-range>
-    </nut-cell>
-    <h2>自定义样式</h2>
-    <nut-cell class="cell">
-      <nut-range
-        v-model="value8"
-        @change="onChange"
-        inactive-color="rgba(163,184,255,1)"
-        button-color="rgba(52,96,250,1)"
-        active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      ></nut-range>
-    </nut-cell>
-    <h2>自定义按钮</h2>
-    <nut-cell class="cell">
-      <nut-range v-model="value9" @change="onChange">
-        <template #button>
-          <div class="custom-button">{{ value10 }}</div>
-        </template>
-      </nut-range>
-    </nut-cell>
-  </div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive } from 'vue';
-export default {
-  props: {},
-  setup() {
-    const state = reactive({
-      value1: 40,
-      value2: [20, 80],
-      value3: 0,
-      value4: 20,
-      value5: 30,
-      value6: 40,
-      value7: 50,
-      value8: 40,
-      value9: 60,
-      value10: 50
-    });
-    const onChange = (value: number) => console.log('当前值：' + value);
-    return {
-      ...toRefs(state),
-      onChange
-    };
-  }
-};
-</script>
-
-<style lang="scss">
-.cell {
-  padding: 40px 18px;
-}
-.custom-button {
-  width: 26px;
-  color: #fff;
-  font-size: 10px;
-  line-height: 18px;
-  text-align: center;
-  background-color: #ee0a24;
-  border-radius: 100px;
-}
-</style>