Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 06580e4f 编写于 作者: S suzigang
浏览文件
操作

refactor: steps

上级 bed0ef6f
隐藏空白更改
内联 并排
Showing with 110 addition and 178 deletion
.husky/commit-msg 0 → 100755
浏览文件 @ 06580e4f
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn commitlint --edit $1
\ No newline at end of file
.husky/pre-commit 0 → 100755
浏览文件 @ 06580e4f
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
node ./../jd/verifymail.js
yarn lint-staged
\ No newline at end of file
package.json
浏览文件 @ 06580e4f
...@@ -49,7 +49,8 @@ ...@@ -49,7 +49,8 @@
"publish:beta": "npm publish --tag=beta", "publish:beta": "npm publish --tag=beta",
"generate:file": "node jd/generate-nutui.js", "generate:file": "node jd/generate-nutui.js",
"generate:types": "node jd/generate-types.js", "generate:types": "node jd/generate-types.js",
"generate:themes": "node jd/generate-themes.js" "generate:themes": "node jd/generate-themes.js",
"prepare": "husky install"
}, },
"dependencies": { "dependencies": {
"axios": "^0.21.0", "axios": "^0.21.0",
...@@ -72,7 +73,7 @@ ...@@ -72,7 +73,7 @@
"front-matter": "^4.0.2", "front-matter": "^4.0.2",
"fs-extra": "^9.1.0", "fs-extra": "^9.1.0",
"highlight.js": "^10.3.1", "highlight.js": "^10.3.1",
"husky": "^4.3.0", "husky": "^6.0.0",
"lint-staged": "^10.5.0", "lint-staged": "^10.5.0",
"prettier": "^1.19.1", "prettier": "^1.19.1",
"transliteration": "^2.2.0", "transliteration": "^2.2.0",
...@@ -100,14 +101,9 @@ ...@@ -100,14 +101,9 @@
"no-debugger": "off" "no-debugger": "off"
} }
}, },
"husky": {
"hooks": {
"pre-commit": "node ./jd/verifymail.js && lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": { "lint-staged": {
"*.{ts,js,vue,scss}": "prettier --write" "*.md": "prettier --write",
"*.{ts,tsx,js,vue,scss}": "prettier --write"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
......
src/packages/datepicker/demo.vue
浏览文件 @ 06580e4f
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
<nut-datepicker <nut-datepicker
v-model="currentDate" v-model="currentDate"
title="日期选择"
@confirm=" @confirm="
val => { val => {
confirm(0, val); confirm(0, val);
......
src/packages/picker/index.vue
浏览文件 @ 06580e4f
...@@ -40,8 +40,7 @@ ...@@ -40,8 +40,7 @@
@change=" @change="
dataIndex => { dataIndex => {
changeHandler(columnIndex, dataIndex); changeHandler(columnIndex, dataIndex);
} }"
"
></nut-picker-column> ></nut-picker-column>
</view-block> </view-block>
</view-block> </view-block>
...@@ -63,7 +62,10 @@ import { ...@@ -63,7 +62,10 @@ import {
const { create, componentName } = createComponent('picker'); const { create, componentName } = createComponent('picker');
export default create({ export default create({
children: [column, popup], components: {
[column.name]: column,
[popup.name]: popup
},
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
......
src/packages/step/index.scss
浏览文件 @ 06580e4f
.nut-step { .nut-step {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
flex-basis: 33.34%; flex: 1;
text-align: center; text-align: center;
font-size: 0; font-size: 0;
&-head { &-head {
...@@ -26,7 +26,6 @@ ...@@ -26,7 +26,6 @@
line-height: 25px; line-height: 25px;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-size: 13px; font-size: 13px;
// border-color: #909CA4;
z-index: 1; z-index: 1;
.nut-icon { .nut-icon {
width: 100%; width: 100%;
...@@ -68,35 +67,35 @@ ...@@ -68,35 +67,35 @@
} }
&.nut-step-finish { &.nut-step-finish {
.nut-step-head { .nut-step-head {
color: #3790ff; color: $primary-color;
border-color: #3790ff; border-color: $primary-color;
} }
.nut-step-icon.is-text { .nut-step-icon.is-text {
background-color: #fff; background-color: $white;
} }
.nut-step-icon.is-icon { .nut-step-icon.is-icon {
background-color: #fff; background-color: $white;
} }
.nut-step-line { .nut-step-line {
background: #3790ff; background: $primary-color;
} }
.nut-step-title { .nut-step-title {
color: #3790ff; color: $primary-color;
} }
} }
&.nut-step-process { &.nut-step-process {
.nut-step-head { .nut-step-head {
color: #fff; color: $white;
border-color: #3790ff; border-color: $primary-color;
} }
.nut-step-icon.is-text { .nut-step-icon.is-text {
background-color: #3790ff; background-color: $primary-color;
} }
.nut-step-icon.is-icon { .nut-step-icon.is-icon {
background-color: #3790ff; background-color: $primary-color;
} }
.nut-step-title { .nut-step-title {
color: #3790ff; color: $primary-color;
} }
} }
&.nut-step-wait { &.nut-step-wait {
...@@ -105,30 +104,15 @@ ...@@ -105,30 +104,15 @@
border-color: #909ca4; border-color: #909ca4;
} }
.nut-step-icon.is-text { .nut-step-icon.is-text {
background-color: #fff; background-color: $white;
} }
.nut-step-icon.is-icon { .nut-step-icon.is-icon {
background-color: #fff; background-color: $white;
} }
.nut-step-content { .nut-step-content {
color: #909ca4; color: #909ca4;
} }
} }
&.nut-step-error {
.nut-step-head {
color: #fff;
border-color: #fa2c19;
}
.nut-step-icon.is-text {
background-color: #fa2c19;
}
.nut-step-icon.is-icon {
background-color: #fa2c19;
}
.nut-step-line {
background: #3790ff;
}
}
} }
.nut-steps-vertical { .nut-steps-vertical {
.nut-step { .nut-step {
...@@ -160,7 +144,7 @@ ...@@ -160,7 +144,7 @@
.nut-step-icon { .nut-step-icon {
width: 8px; width: 8px;
height: 8px; height: 8px;
background: #3790ff; background: $primary-color;
border-radius: 50%; border-radius: 50%;
box-sizing: content-box; box-sizing: content-box;
} }
...@@ -174,13 +158,13 @@ ...@@ -174,13 +158,13 @@
} }
.nut-step-finish { .nut-step-finish {
.nut-step-icon { .nut-step-icon {
background-color: #3790ff; background-color: $primary-color;
} }
} }
.nut-step-process { .nut-step-process {
.nut-step-icon { .nut-step-icon {
position: relative; position: relative;
background-color: #3790ff; background-color: $primary-color;
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
...@@ -191,7 +175,7 @@ ...@@ -191,7 +175,7 @@
margin-top: -7px; margin-top: -7px;
width: 14px; width: 14px;
height: 14px; height: 14px;
background-color: rgba(55, 144, 255, 0.23); background-color: $primary-color-end;
border-radius: 50%; border-radius: 50%;
} }
} }
......
src/packages/step/index.vue
浏览文件 @ 06580e4f
...@@ -4,14 +4,14 @@ ...@@ -4,14 +4,14 @@
<view class="nut-step-line"></view> <view class="nut-step-line"></view>
<view <view
class="nut-step-icon" class="nut-step-icon"
:class="[!state.dot ? (icon ? 'is-icon' : 'is-text') : '']" :class="[!dot ? (icon ? 'is-icon' : 'is-text') : '']"
> >
<template v-if="icon"> <template v-if="icon">
<nut-icon class="nut-step-icon-inner" :class="icon" /> <nut-icon class="nut-step-icon-inner" :class="icon" />
</template> </template>
<template v-else-if="state.dot"></template> <template v-else-if="dot"></template>
<template v-else> <template v-else>
<view class="nut-step-inner">{{ state.index }}</view> <view class="nut-step-inner">{{ index }}</view>
</template> </template>
</view> </view>
</view> </view>
...@@ -19,15 +19,14 @@ ...@@ -19,15 +19,14 @@
<view class="nut-step-title"> <view class="nut-step-title">
{{ title }} {{ title }}
</view> </view>
<view class="nut-step-content"> <view class="nut-step-content" v-html="content">
{{ content }}
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script lang="ts"> <script lang="ts">
import { reactive, computed, inject } from 'vue'; import { reactive, computed, inject, toRefs, getCurrentInstance, ComponentInternalInstance } from 'vue';
import { createComponent } from '@/utils/create'; import { createComponent } from '@/utils/create';
const { create, componentName } = createComponent('step'); const { create, componentName } = createComponent('step');
...@@ -44,39 +43,41 @@ export default create({ ...@@ -44,39 +43,41 @@ export default create({
icon: { icon: {
type: String, type: String,
default: null default: null
},
status: {
type: String,
default: null
},
data: {
type: String,
default: null
} }
}, },
setup(props, context) {
const steps: any = inject('stepsParent'); setup(props, {emit, slots}) {
const defaults = context.slots?.default(); const instance = getCurrentInstance() as ComponentInternalInstance;
console.log('defaults', context.slots); const parent: any = inject('parent');
console.log('steps', steps.props.progressDot); parent['relation'](instance);
const state = reactive({ const state = reactive({
data: [], dot: parent.props.progressDot
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 index = computed(() => parent.state.children.indexOf(instance) + 1);
const getCurrentStatus = () => {
const activeIndex = index.value;
if(activeIndex < +parent.props.current) return 'finish';
return activeIndex === +parent.props.current ? 'process' : 'wait';
};
const status = computed(() => {
return getCurrentStatus();
});
const classes = computed(() => { const classes = computed(() => {
const prefixCls = componentName; const prefixCls = componentName;
return { return {
[prefixCls]: true, [prefixCls]: true,
[props.status [`${prefixCls}-${status.value}`]: true
? 'nut-step-' + props.status
: steps.state.steps[state.index].currentStatus]: true
}; };
}); });
return { return {
state, ...toRefs(state),
index,
classes classes
}; };
} }
......
src/packages/steps/demo.vue
浏览文件 @ 06580e4f
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<nut-step title="进行中">1</nut-step> <nut-step title="进行中">1</nut-step>
<nut-step title="未开始">2</nut-step> <nut-step title="未开始">2</nut-step>
<nut-step title="未开始">3</nut-step> <nut-step title="未开始">3</nut-step>
<nut-step title="未开始">4</nut-step>
</nut-steps> </nut-steps>
<h2>标题和描述信息</h2> <h2>标题和描述信息</h2>
<nut-steps current="2"> <nut-steps current="2">
...@@ -14,15 +15,14 @@ ...@@ -14,15 +15,14 @@
icon="nutui-iconfont nut-icon-wanshangshide" icon="nutui-iconfont nut-icon-wanshangshide"
>1</nut-step >1</nut-step
> >
<nut-step title="进行中" content="步骤描述">2</nut-step> <nut-step title="进行中" content="步骤描述"></nut-step>
<nut-step title="未开始" content="步骤描述">3</nut-step> <nut-step title="未开始" content="步骤描述"></nut-step>
</nut-steps> </nut-steps>
<h2>自定义图标</h2> <h2>自定义图标</h2>
<nut-steps current="1"> <nut-steps current="1">
<nut-step <nut-step
title="已完成" title="已完成"
icon="nutui-iconfont nut-icon-wanshangshide" icon="nutui-iconfont nut-icon-notice"
status="error"
>1</nut-step >1</nut-step
> >
<nut-step title="进行中" icon="nutui-iconfont nut-icon-notice" <nut-step title="进行中" icon="nutui-iconfont nut-icon-notice"
...@@ -53,14 +53,14 @@ ...@@ -53,14 +53,14 @@
</nut-steps> </nut-steps>
</div> </div>
<div style="height: 300px"> <div style="height: 300px">
<nut-steps direction="vertical" progressDot current="2"> <nut-steps direction="vertical" progress-dot current="2">
<nut-step title="已完成" content="您的订单已经打包完成，商品已发出" <nut-step title="已完成" content="您的订单已经打包完成，商品已发出"
>1</nut-step >1</nut-step
> >
<nut-step title="进行中" content="您的订单正在配送途中">2</nut-step> <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
<nut-step <nut-step
title="未开始" title="未开始"
content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦" content="<p>收货地址为：</p><p>北京市经济技术开发区科创十一街18号院京东大厦</p>"
>3</nut-step >3</nut-step
> >
</nut-steps> </nut-steps>
......
src/packages/steps/doc.md
浏览文件 @ 06580e4f
...@@ -23,6 +23,7 @@ app.use(Steps); ...@@ -23,6 +23,7 @@ app.use(Steps);
<nut-step title="进行中">1</nut-step> <nut-step title="进行中">1</nut-step>
<nut-step title="未开始">2</nut-step> <nut-step title="未开始">2</nut-step>
<nut-step title="未开始">3</nut-step> <nut-step title="未开始">3</nut-step>
<nut-step title="未开始">4</nut-step>
</nut-steps> </nut-steps>
``` ```
...@@ -58,7 +59,7 @@ app.use(Steps); ...@@ -58,7 +59,7 @@ app.use(Steps);
### 点状步骤和垂直方向 ### 点状步骤和垂直方向
```html ```html
<nut-steps direction="vertical" progressDot current="2"> <nut-steps direction="vertical" progress-dot current="2">
<nut-step title="已完成" content="您的订单已经打包完成，商品已发出" >1</nut-step> <nut-step title="已完成" content="您的订单已经打包完成，商品已发出" >1</nut-step>
<nut-step title="进行中" content="您的订单正在配送途中">2</nut-step> <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
<nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step> <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>
...@@ -74,9 +75,9 @@ app.use(Steps); ...@@ -74,9 +75,9 @@ app.use(Steps);
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- | | ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
| direction | 显示方向，`horizontal`,`vertical` | String | horizontal | | direction | 显示方向，`horizontal`,`vertical` | String | 'horizontal' |
| current | 当前所在的步骤 | Number、String | 0 | | current | 当前所在的步骤 | Number、String | '0' |
| progressDot | 点状步骤条 | Boolean | false | | progress-dot | 点状步骤条 | Boolean | false |
...@@ -85,6 +86,5 @@ app.use(Steps); ...@@ -85,6 +86,5 @@ app.use(Steps);
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ---------------------- | ------------ | ----------- | | ---------------- | ---------------------- | ------------ | ----------- |
| title | 流程步骤的标题 | String | 步骤 | | title | 流程步骤的标题 | String | 步骤 |
| content | 流程步骤的描述性文字 | String | 步骤描述 | | content | 流程步骤的描述性文字(支持 html 结构) | String | 步骤描述 |
| icon | 图标 | String | - | | icon | 图标 | String | null |
| status | 流程状态 | String | String、Number | "process"（可选值 "wait"、"process"、"finish"、"error" | \ No newline at end of file
\ No newline at end of file
src/packages/steps/index.vue
浏览文件 @ 06580e4f
<template>
<view :class="classes">
<slot></slot>
</view>
</template>
<script lang="ts"> <script lang="ts">
import { import {
provide, provide,
computed, computed,
onMounted,
reactive, reactive,
watch, h,
onBeforeMount ComponentInternalInstance
} from 'vue'; } from 'vue';
import step from '@/packages/step/index.vue'; import Step from '@/packages/step/index.vue';
import { createComponent } from '@/utils/create'; import { createComponent } from '@/utils/create';
const { create, componentName } = createComponent('steps'); const { create, componentName } = createComponent('steps');
export default create({ export default create({
children: [step], children: [Step],
props: { props: {
direction: { direction: {
type: String, type: String,
default: 'horizontal' default: 'horizontal'
}, },
current: { current: {
type: String, type: [String, Number],
default: 'false' default: '0'
},
status: {
validator(value) {
return ['wait', 'process', 'finish', 'error'].includes(value);
},
default: 'process'
}, },
progressDot: { progressDot: {
type: Boolean, type: Boolean,
...@@ -41,87 +28,37 @@ export default create({ ...@@ -41,87 +28,37 @@ export default create({
}, },
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const state = reactive({ const state = reactive({
steps: {}, children: [] as ComponentInternalInstance[]
children: []
}); });
const classes = computed(() => { const classes = computed(() => {
const prefixCls = componentName; const prefixCls = componentName;
return { return {
[prefixCls]: true, [prefixCls]: true,
['nut-steps-' + props.direction]: true, [`${prefixCls}-${props.direction}`]: true,
[props.progressDot ? 'nut-steps-dot' : '']: true [`${prefixCls}-dot`]: !!props.progressDot
}; };
}); });
onBeforeMount(() => {
console.log('onBeforeMount');
init();
});
onMounted(() => {
console.log('onMounted');
// init();
});
// 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') { const relation = (child: ComponentInternalInstance) => {
child.total = total; child && state.children.push(child);
}
// console.log('父', child);
if (!child.currentStatus) {
if (index == props.current - 1) {
if (props.status != 'error') {
child.currentStatus = 'nut-step-process';
} else {
child.currentStatus = 'error';
}
} else if (index < props.current) {
child.currentStatus = 'nut-step-finish';
} else {
child.currentStatus = 'nut-step-wait';
}
}
if (index + 1 === total) {
child.currentStatus += ' nut-step-last';
}
});
}; };
// provide('parent', {
// slots provide('parent', {
// }); relation,
provide('stepsParent', { state,
props, props
state
}); });
return {
classes, return () => {
stepStates return h(
}; 'view',
{
class: classes.value
},
slots.default?.()
)
}
} }
}); });
</script> </script>
......
src/styles/variables.scss
浏览文件 @ 06580e4f
...@@ -253,6 +253,9 @@ $address-region-tab-line: linear-gradient( ...@@ -253,6 +253,9 @@ $address-region-tab-line: linear-gradient(
$primary-color-end 100% $primary-color-end 100%
); );
//steps
// dialog // dialog
$dialog-width: 296px; $dialog-width: 296px;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或