init
This commit is contained in:
271
uni_modules/nutui-uni/components/step/index.scss
Normal file
271
uni_modules/nutui-uni/components/step/index.scss
Normal file
@@ -0,0 +1,271 @@
|
||||
.nut-step {
|
||||
flex: 1;
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
|
||||
&-head {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&-line {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: -50%;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
background: $steps-base-line-color;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $steps-base-icon-width;
|
||||
height: $steps-base-icon-height;
|
||||
font-size: $steps-base-icon-font-size;
|
||||
line-height: $steps-base-icon-line-height;
|
||||
|
||||
&-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nut-icon {
|
||||
width: $steps-base-icon-font-size;
|
||||
height: $steps-base-icon-font-size;
|
||||
}
|
||||
|
||||
&.is-icon {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
display: inline-block;
|
||||
padding-right: 10%;
|
||||
padding-left: 10%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: block;
|
||||
margin-bottom: $steps-base-title-margin-bottom;
|
||||
font-size: $steps-base-title-font-size;
|
||||
color: $steps-base-title-color;
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: block;
|
||||
font-size: $steps-base-content-font-size;
|
||||
color: $steps-base-content-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.nut-step-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.nut-step-finish {
|
||||
.nut-step-head {
|
||||
color: $steps-finish-head-color;
|
||||
border-color: $steps-finish-head-border-color;
|
||||
}
|
||||
|
||||
.nut-step-icon.is-icon {
|
||||
background-color: $steps-finish-icon-text-color;
|
||||
}
|
||||
|
||||
.nut-step-line {
|
||||
background: $steps-finish-line-background;
|
||||
}
|
||||
|
||||
.nut-step-title {
|
||||
color: $steps-finish-title-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.nut-step-process {
|
||||
.nut-step-head {
|
||||
color: $steps-process-head-color;
|
||||
border-color: $steps-process-head-border-color;
|
||||
}
|
||||
|
||||
.nut-step-icon.is-icon {
|
||||
background-color: $steps-process-icon-text-color;
|
||||
}
|
||||
|
||||
.nut-step-title {
|
||||
color: $steps-process-title-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.nut-step-wait {
|
||||
.nut-step-head {
|
||||
color: $steps-wait-head-color;
|
||||
border-color: $steps-wait-head-border-color;
|
||||
}
|
||||
|
||||
.nut-step-icon.is-icon {
|
||||
color: $steps-wait-icon-text-color;
|
||||
background-color: $steps-wait-icon-bg-color;
|
||||
|
||||
.nut-icon {
|
||||
color: $steps-wait-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-step-content {
|
||||
color: $steps-wait-content-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nut-steps-horizontal {
|
||||
&.nut-steps-dot {
|
||||
.nut-step-head {
|
||||
margin-top: 7px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nut-step-line {
|
||||
top: 50%;
|
||||
bottom: -50%;
|
||||
}
|
||||
|
||||
.nut-step-icon {
|
||||
box-sizing: content-box;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: $primary-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nut-step-wait {
|
||||
.nut-step-icon {
|
||||
background-color: $steps-wait-icon-bg-color;
|
||||
}
|
||||
|
||||
.nut-step-content {
|
||||
color: $steps-wait-content-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-step-finish {
|
||||
.nut-step-icon {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-step-process {
|
||||
.nut-step-icon {
|
||||
position: relative;
|
||||
background-color: $primary-color;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: -7px;
|
||||
margin-left: -7px;
|
||||
content: "";
|
||||
background-color: $primary-color-end;
|
||||
border-radius: 50%;
|
||||
opacity: 0.23;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nut-steps-vertical {
|
||||
.nut-step {
|
||||
display: flex;
|
||||
height: 33.34%;
|
||||
}
|
||||
|
||||
.nut-step-line {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #909ca4;
|
||||
}
|
||||
|
||||
.nut-step-main {
|
||||
display: inline-block;
|
||||
padding-left: 6%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.nut-steps-dot {
|
||||
.nut-step-head {
|
||||
margin-top: 7px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nut-step-line {
|
||||
top: 7px;
|
||||
right: -50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.nut-step-icon {
|
||||
box-sizing: content-box;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: $primary-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nut-step-wait {
|
||||
.nut-step-icon {
|
||||
background-color: $steps-wait-icon-bg-color;
|
||||
}
|
||||
|
||||
.nut-step-content {
|
||||
color: $steps-wait-content-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-step-finish {
|
||||
.nut-step-icon {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-step-process {
|
||||
.nut-step-icon {
|
||||
position: relative;
|
||||
background-color: $primary-color;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: -7px;
|
||||
margin-left: -7px;
|
||||
content: "";
|
||||
background-color: $primary-color-end;
|
||||
border-radius: 50%;
|
||||
opacity: 0.23;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
uni_modules/nutui-uni/components/step/index.ts
Normal file
1
uni_modules/nutui-uni/components/step/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export type * from './step'
|
||||
22
uni_modules/nutui-uni/components/step/step.ts
Normal file
22
uni_modules/nutui-uni/components/step/step.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
import { commonProps, isNumber } from '../_utils'
|
||||
|
||||
export const stepProps = {
|
||||
...commonProps,
|
||||
/**
|
||||
* @description 流程步骤的标题
|
||||
*/
|
||||
title: String,
|
||||
/**
|
||||
* @description 流程步骤的描述性文字(支持 html 结构)
|
||||
*/
|
||||
content: String,
|
||||
}
|
||||
|
||||
export type StepProps = ExtractPropTypes<typeof stepProps>
|
||||
|
||||
export const stepEmits = {
|
||||
clickStep: (val: number) => isNumber(val),
|
||||
}
|
||||
|
||||
export type StepEmits = typeof stepEmits
|
||||
88
uni_modules/nutui-uni/components/step/step.vue
Normal file
88
uni_modules/nutui-uni/components/step/step.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import type { ComponentInternalInstance } from 'vue'
|
||||
import { computed, defineComponent, getCurrentInstance, inject, reactive } from 'vue'
|
||||
import { PREFIX } from '../_constants'
|
||||
import { getMainClass } from '../_utils'
|
||||
import { stepEmits, stepProps } from './step'
|
||||
|
||||
const props = defineProps(stepProps)
|
||||
defineEmits(stepEmits)
|
||||
const instance = getCurrentInstance() as ComponentInternalInstance
|
||||
const parent: any = inject('parent')
|
||||
parent.relation(instance)
|
||||
|
||||
const state = reactive({
|
||||
dot: parent.props.progressDot,
|
||||
})
|
||||
|
||||
const index = computed(() => parent.state.children.indexOf(instance) + 1)
|
||||
function 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(() => {
|
||||
return getMainClass(props, componentName, {
|
||||
[`${componentName}-${status.value}`]: true,
|
||||
})
|
||||
})
|
||||
|
||||
function handleClickStep() {
|
||||
parent.onEmit(index.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
const componentName = `${PREFIX}-step`
|
||||
|
||||
export default defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view :class="classes" :style="customStyle" @click="handleClickStep">
|
||||
<view class="nut-step-head">
|
||||
<view class="nut-step-line" />
|
||||
<view class="nut-step-icon" :class="[!state.dot ? 'is-icon' : '']">
|
||||
<view class="nut-step-icon-inner">
|
||||
<slot name="icon">
|
||||
<template v-if="state.dot" />
|
||||
<template v-else>
|
||||
<view class="nut-step-inner">
|
||||
{{ index }}
|
||||
</view>
|
||||
</template>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nut-step-main">
|
||||
<view class="nut-step-title">
|
||||
<view v-if="!$slots.title">
|
||||
{{ title }}
|
||||
</view>
|
||||
<slot name="title" />
|
||||
</view>
|
||||
<view v-if="content || $slots.content" class="nut-step-content">
|
||||
<rich-text v-if="!$slots.content" :nodes="content" />
|
||||
<slot name="content" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import './index';
|
||||
</style>
|
||||
Reference in New Issue
Block a user