Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

体验新版 GitCode，发现更多精彩内容 >>

提交 955a9ad3 编写于 作者: A ailululu
浏览文件
操作

feat: steps

上级 6cebfe69
隐藏空白更改
内联 并排
Showing with 304 addition and 58 deletion
src/packages/step/index.scss
浏览文件 @ 955a9ad3
......@@ -28,13 +28,21 @@
font-size: 13px;
// border-color: #909CA4;
z-index: 1;
.nut-icon {
width: 100%;
height: 100%;
}
&.is-text {
border-radius: 50%;
border-width: 1px;
border-style: solid;
}
}
&-inner {
&.is-icon {
border-radius: 50%;
border-width: 1px;
border-style: solid;
background-color: transparent;
}
}
&-main {
display: inline-block;
......@@ -66,9 +74,15 @@
.nut-step-icon.is-text {
background-color: #fff;
}
.nut-step-icon.is-icon {
background-color: #fff;
}
.nut-step-line {
background: #3790ff;
}
.nut-step-title {
color: #3790ff;
}
}
&.nut-step-process {
.nut-step-head {
......@@ -78,8 +92,11 @@
.nut-step-icon.is-text {
background-color: #3790ff;
}
.nut-step-line {
background: #3790ff;
.nut-step-icon.is-icon {
background-color: #3790ff;
}
.nut-step-title {
color: #3790ff;
}
}
&.nut-step-wait {
......@@ -90,6 +107,12 @@
.nut-step-icon.is-text {
background-color: #fff;
}
.nut-step-icon.is-icon {
background-color: #fff;
}
.nut-step-content {
color: #909ca4;
}
}
&.nut-step-error {
.nut-step-head {
......@@ -99,6 +122,9 @@
.nut-step-icon.is-text {
background-color: #fa2c19;
}
.nut-step-icon.is-icon {
background-color: #fa2c19;
}
.nut-step-line {
background: #3790ff;
}
......@@ -118,7 +144,57 @@
}
.nut-step-main {
display: inline-block;
padding-left: 10%;
padding-left: 6%;
text-align: left;
}
&.nut-steps-dot {
.nut-step-head {
margin-top: 7px;
margin-bottom: 0;
}
.nut-step-line {
top: 7px;
left: 50%;
right: -50%;
}
.nut-step-icon {
width: 8px;
height: 8px;
background: #3790ff;
border-radius: 50%;
box-sizing: content-box;
}
.nut-step-wait {
.nut-step-icon {
background-color: #959fb1;
}
.nut-step-content {
color: #909ca4;
}
}
.nut-step-finish {
.nut-step-icon {
background-color: #3790ff;
}
}
.nut-step-process {
.nut-step-icon {
position: relative;
background-color: #3790ff;
&:before {
content: '';
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -7px;
margin-top: -7px;
width: 14px;
height: 14px;
background-color: rgba(55, 144, 255, 0.23);
border-radius: 50%;
}
}
}
}
}
src/packages/step/index.vue
浏览文件 @ 955a9ad3
......@@ -2,12 +2,16 @@
<view :class="classes">
<view class="nut-step-head">
<view class="nut-step-line"></view>
<view class="nut-step-icon" :class="[icon ? 'is-icon' : 'is-text']">
<view
class="nut-step-icon"
:class="[!state.dot ? (icon ? 'is-icon' : 'is-text') : '']"
>
<template v-if="icon">
<nut-icon class="nut-step-icon-inner" :class="icon" />
</template>
<template v-else-if="state.dot"></template>
<template v-else>
<view class="nut-step-inner">11</view>
<view class="nut-step-inner">{{ state.index }}</view>
</template>
</view>
</view>
......@@ -23,7 +27,7 @@
</template>
<script lang="ts">
import { reactive, computed, nextTick, ref } from 'vue';
import { reactive, computed, inject } from 'vue';
import { createComponent } from '@/utils/create';
const { create, componentName } = createComponent('step');
......@@ -40,16 +44,39 @@ export default create({
icon: {
type: String,
default: null
},
status: {
type: String,
default: null
},
data: {
type: String,
default: null
}
},
setup(props, { emit, slots }) {
setup(props, context) {
const steps: any = inject('stepsParent');
const defaults = context.slots?.default();
console.log('defaults', context.slots);
console.log('steps', steps.props.progressDot);
const state = reactive({
data: [],
index: context.slots.default()[0]?.children - 1,
dot: steps.props.progressDot
});
console.log('dot', state.dot);
// console.log('context', steps.state.steps[state.index])
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
[prefixCls]: true,
[props.status
? 'nut-step-' + props.status
: steps.state.steps[state.index].currentStatus]: true
};
});
return {
state,
classes
};
}
......
src/packages/steps/demo.vue
浏览文件 @ 955a9ad3
......@@ -2,55 +2,63 @@
<div class="demo">
<h2>基本用法</h2>
<nut-steps current="1">
<nut-step class="" title="进行中">1</nut-step>
<nut-step class="nut-step-process" title="未开始">2</nut-step>
<nut-step class="" title="未开始">3</nut-step>
<nut-step title="进行中">1</nut-step>
<nut-step title="未开始">2</nut-step>
<nut-step title="未开始">3</nut-step>
</nut-steps>
<h2>基本用法</h2>
<h2>标题和描述信息</h2>
<nut-steps current="2">
<nut-step
title="已完成"
content="步骤描述"
icon="nutui-iconfont nut-icon-wanshangshide"
>1</nut-step
>
<nut-step title="进行中" content="步骤描述">2</nut-step>
<nut-step title="未开始" content="步骤描述">3</nut-step>
</nut-steps>
<h2>自定义图标</h2>
<nut-steps current="1">
<nut-step class="nut-step-finish" title="未开始">1</nut-step>
<nut-step
class="nut-step-process"
title="进行中"
content="这是一段很长很长很长的描述性文字"
title="已完成"
icon="nutui-iconfont nut-icon-wanshangshide"
status="error"
>1</nut-step
>
<nut-step title="进行中" icon="nutui-iconfont nut-icon-notice"
>2</nut-step
>
<nut-step class="nut-step-wait" title="未开始">3</nut-step>
<nut-step
class="nut-step-wait"
title="未开始"
icon="nutui-iconfont nut-icon-notice"
>3</nut-step
>
</nut-steps>
<h2>自定义图标和颜色</h2>
<div class="" style="height: 300px">
<nut-steps>
<h2>竖向步骤条</h2>
<div style="height: 300px">
<nut-steps direction="vertical" current="2">
<nut-step
class="nut-step-finish"
title="已完成"
icon="nutui-iconfont nut-icon-wanshangshide"
></nut-step>
content="您的订单已经打包完成，商品已发出"
>1</nut-step
>
<nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
<nut-step
class="nut-step-process"
title="进行中"
icon="nutui-iconfont nut-icon-notice"
>2</nut-step
title="未开始"
content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦"
>3</nut-step
>
<nut-step class="nut-step-wait" title="未开始" content="">3</nut-step>
</nut-steps>
</div>
<h2>竖向步骤条</h2>
<div class="" style="height: 300px">
<nut-steps direction="vertical">
<nut-step
class="nut-step-error"
title="已完成"
content="您的订单已经打包完成，商品已发出"
<div style="height: 300px">
<nut-steps direction="vertical" progressDot current="2">
<nut-step title="已完成" content="您的订单已经打包完成，商品已发出"
>1</nut-step
>
<nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
<nut-step
class="nut-step-process"
title="进行中"
content="您的订单正在配送途中"
>2</nut-step
>
<nut-step
class="nut-step-wait"
title="未开始"
content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦"
>3</nut-step
......
src/packages/steps/doc.md 0 → 100644
浏览文件 @ 955a9ad3
# Steps 步骤条 组件
### 介绍
拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。
### 安装
```javascript
import { createApp } from 'vue';
import { Steps } from '@nutui/nutui';
const app = createApp();
app.use(Steps);
```
## 代码演示
### 基本用法
```html
<nut-steps current="1">
<nut-step title="进行中">1</nut-step>
<nut-step title="未开始">2</nut-step>
<nut-step title="未开始">3</nut-step>
</nut-steps>
```
### 标题和描述信息
```html
<nut-steps current="2">
<nut-step title="已完成" content="步骤描述" icon="nutui-iconfont nut-icon-wanshangshide">1</nut-step>
<nut-step title="进行中" content="步骤描述">2</nut-step>
<nut-step title="未开始" content="步骤描述">3</nut-step>
</nut-steps>
```
### 自定义图标
```html
<nut-steps current="1">
<nut-step title="已完成" icon="nutui-iconfont nut-icon-wanshangshide" status="error">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-steps>
```
### 竖向步骤条
```html
<nut-steps direction="vertical" current="2">
<nut-step title="已完成" icon="nutui-iconfont nut-icon-wanshangshide" content="您的订单已经打包完成，商品已发出" >1</nut-step>
<nut-step title="进行中" content="您的订单正在配送途中" >2</nut-step>
<nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>
</nut-steps>
```
### 点状步骤和垂直方向
```html
<nut-steps direction="vertical" progressDot 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>
```
## API
### Props
#### nut-steps
| 参数 | 说明 | 类型 | 默认值 |
| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
| direction | 显示方向，`horizontal`,`vertical` | String | horizontal |
| current | 当前所在的步骤 | Number、String | 0 |
| progressDot | 点状步骤条 | Boolean | false |
#### nut-step
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ---------------------- | ------------ | ----------- |
| title | 流程步骤的标题 | String | 步骤 |
| content | 流程步骤的描述性文字 | String | 步骤描述 |
| icon | 图标 | String | - |
| status | 流程状态 | String | String、Number | "process"（可选值 "wait"、"process"、"finish"、"error" |
\ No newline at end of file
src/packages/steps/index.vue
浏览文件 @ 955a9ad3
......@@ -5,7 +5,14 @@
</template>
<script lang="ts">
import { toRefs, computed, onMounted, reactive } from 'vue';
import {
provide,
computed,
onMounted,
reactive,
watch,
onBeforeMount
} from 'vue';
import step from '@/packages/step/index.vue';
import { createComponent } from '@/utils/create';
const { create, componentName } = createComponent('steps');
......@@ -19,42 +26,73 @@ export default create({
},
current: {
type: String,
default: ''
default: 'false'
},
status: {
validator(value) {
return ['wait', 'process', 'finish', 'error'].includes(value);
},
default: 'process'
},
progressDot: {
type: Boolean,
default: false
}
},
setup(props, { emit, slots }) {
const state = reactive({
steps: {}
steps: {},
children: []
});
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true,
['nut-steps-' + props.direction]: true
['nut-steps-' + props.direction]: true,
[props.progressDot ? 'nut-steps-dot' : '']: true
};
});
onBeforeMount(() => {
console.log('onBeforeMount');
init();
});
onMounted(() => {
if (slots.default) {
state.steps = slots.default();
console.log('slots1', state.steps.length);
console.log('slots2', state.steps[0].children);
states();
}
console.log('onMounted');
// init();
});
function states() {
// watch(
// () => props.current,
// val => {
// console.log()
// states();
// }
// );
// watch(
// () => props.source,
// val => {
// init();
// }
// )
const init = () => {
state.steps = (slots as any)?.default();
stepStates();
};
const stepStates = () => {
if (props.progressDot) {
console.log('state.steps', state.steps);
state.steps.dot = true;
}
const total = state.steps.length;
state.steps.forEach((child, index) => {
child.stepNumber = index + 1;
state.children = index;
// console.log('data', state.children)
if (props.direction === 'horizontal') {
child.total = total;
}
console.log('11', child);
// console.log('父', child);
if (!child.currentStatus) {
if (index == props.current - 1) {
if (props.status != 'error') {
......@@ -69,13 +107,20 @@ export default create({
}
}
if (index + 1 === total) {
child.currentStatus += 'nut-step-last';
child.currentStatus += ' nut-step-last';
}
});
}
};
// provide('parent', {
// slots
// });
provide('stepsParent', {
props,
state
});
return {
classes,
states
stepStates
};
}
});
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或