89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<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>
|