Skip to content

Commit

Permalink
chore(steps): split demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu committed Dec 18, 2023
1 parent 4fcfc5e commit d945b74
Show file tree
Hide file tree
Showing 18 changed files with 252 additions and 640 deletions.
15 changes: 15 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/steps/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<template>
<nut-steps :current="current" @click-step="onClickStep">
<nut-step title="未开始">1</nut-step>
<nut-step title="进行中">2</nut-step>
<nut-step title="已完成">3</nut-step>
</nut-steps>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const current = ref(1);
const onClickStep = (index: number) => {
console.log(index);
current.value = index;
};
</script>
16 changes: 16 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/steps/custom.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<nut-steps :current="2">
<nut-step title="未开始">
<template #icon><Service /></template>
</nut-step>
<nut-step title="进行中">
<template #icon><People /></template>
</nut-step>
<nut-step title="已完成">
<template #icon><Location2 /></template>
</nut-step>
</nut-steps>
</template>
<script setup lang="ts">
import { Service, People, Location2 } from '@nutui/icons-vue-taro';
</script>
7 changes: 7 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/steps/desc.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>
<nut-steps :current="2">
<nut-step title="未开始" content="描述信息">1</nut-step>
<nut-step title="进行中" content="描述信息">2</nut-step>
<nut-step title="已完成" content="描述信息">3</nut-step>
</nut-steps>
</template>
7 changes: 7 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/steps/dot.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>
<nut-steps :current="2" progress-dot>
<nut-step title="未开始">1</nut-step>
<nut-step title="进行中">2</nut-step>
<nut-step title="已完成">3</nut-step>
</nut-steps>
</template>
141 changes: 42 additions & 99 deletions packages/nutui-taro-demo/src/exhibition/pages/steps/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,50 @@
<template>
<Demo>
<h2>基础用法</h2>
<div class="steps-wrapper">
<nut-steps :current="state.current1">
<nut-step title="步骤一">
1
<template #title>步骤一</template>
</nut-step>
<nut-step title="步骤二">2</nut-step>
<nut-step title="步骤三">3</nut-step>
</nut-steps>
<div class="steps-button">
<nut-button type="primary" @click="handleStep('current1')">下一步</nut-button>
</div>
</div>
<h2>基础用法（点状）</h2>
<div class="steps-wrapper">
<nut-steps :current="state.current2" progress-dot>
<nut-step></nut-step>
<nut-step></nut-step>
<nut-step></nut-step>
</nut-steps>
<div class="steps-button">
<nut-button size="mini" type="primary" @click="handleStep('current2')">下一步</nut-button>
</div>
</div>
<h2>标题和描述信息</h2>
<div class="steps-wrapper">
<nut-steps :current="state.current3">
<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="primary" @click="handleStep('current3')">下一步</nut-button>
</div>
</div>
<h2>自定义图标</h2>
<div class="steps-wrapper">
<nut-steps current="4">
<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 class="steps-wrapper" style="height: 300px; padding: 15px 30px">
<nut-steps direction="vertical" current="2">
<nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
<nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
<nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>
</nut-steps>
</div>
<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>
<nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
<nut-step title="未开始"
>3
<template #content>
<p>收货地址为：</p>
<p>北京市经济技术开发区科创十一街18号院京东大厦</p>
</template>
</nut-step>
</nut-steps>
</div>
<Demo class="full">
<h2>{{ t('basic') }}</h2>
<Basic />

<h2>{{ t('dot') }}</h2>
<Dot />

<h2>{{ t('desc') }}</h2>
<Desc />

<h2>{{ t('custom') }}</h2>
<Custom />

<h2>{{ t('vertical') }}</h2>
<Vertical />

<h2>{{ t('verticalDot') }}</h2>
<VerticalDot />
</Demo>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
const state = reactive({
current1: 1,
current2: 1,
current3: 1,
current4: 1,
current5: 1
});
import { useTranslate } from '../../../utils';
import Basic from './basic.vue';
import Dot from './dot.vue';
import Desc from './desc.vue';
import Custom from './custom.vue';
import Vertical from './vertical.vue';
import VerticalDot from './vertical-dot.vue';
const handleStep = (params) => {
if (state[params] >= 3) {
state[params] = 1;
} else {
state[params] += 1;
const t = useTranslate({
'zh-CN': {
basic: '基础用法',
dot: '点状样式',
desc: '标题和描述信息',
custom: '自定义图标',
vertical: '竖向步骤条',
verticalDot: '点状步骤和垂直方向'
},
'en-US': {
basic: 'Basic Usage',
dot: 'Dot Style',
desc: 'Title and description information',
custom: 'Custom Icon',
vertical: 'Vertical step bar',
verticalDot: 'Point steps and vertical orientation'
}
};
});
</script>

<style lang="scss">
.padding {
padding-left: 0 !important;
padding-right: 0 !important;
h2 {
padding-left: 27px !important;
}
}
.steps-wrapper {
width: 100%;
padding: 15px 0;
background-color: #fff;
.steps-button {
text-align: center;
}
}
</style>
15 changes: 15 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/steps/vertical-dot.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<template>
<div style="height: 350px; padding: 15px 40px">
<nut-steps direction="vertical" progress-dot :current="2">
<nut-step title="未开始" content="您的订单已经打包完成，商品已发出">1</nut-step>
<nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
<nut-step title="已完成">
3
<template #content>
<p>收货地址为：</p>
<p>北京市经济技术开发区科创十一街18号院京东大厦</p>
</template>
</nut-step>
</nut-steps>
</div>
</template>
9 changes: 9 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/steps/vertical.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<template>
<div style="height: 300px; padding: 15px 30px">
<nut-steps direction="vertical" :current="2">
<nut-step title="未开始" content="您的订单已经打包完成，商品已发出">1</nut-step>
<nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
<nut-step title="已完成" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>
</nut-steps>
</div>
</template>
Loading

0 comments on commit d945b74

Please sign in to comment.