test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-01 02:37:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(components): [steps] use useNamespace (#5944)

Browse Source
This commit is contained in:
bqy 2022-02-11 04:02:21 +08:00 committed by GitHub
parent a995d4487b
commit eb1adcd491
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/components/steps/src/index.vue
View File

@ -1,10 +1,5 @@
<template>
<div
:class="[
'el-steps',
simple ? 'el-steps--simple' : `el-steps--${direction}`,
]"
>
<div :class="[ns.b(), ns.m(simple ? 'simple' : direction)]">
<slot></slot>
</div>
</template>
@ -13,6 +8,7 @@
import { defineComponent, watch, ref, provide } from 'vue'
import { CHANGE_EVENT } from '@element-plus/constants'
import { useNamespace } from '@element-plus/hooks'
export default defineComponent({
name: 'ElSteps',
@ -54,6 +50,7 @@ export default defineComponent({
},
emits: [CHANGE_EVENT],
setup(props, { emit }) {
const ns = useNamespace('steps')
const steps = ref([])
watch(steps, () => {
@ -73,6 +70,7 @@ export default defineComponent({
return {
steps,
ns,
}
},
})

33
packages/components/steps/src/item.vue
View File

@ -2,43 +2,43 @@
<div
:style="style"
:class="[
'el-step',
isSimple ? 'is-simple' : `is-${parent.props.direction}`,
isLast && !space && !isCenter && 'is-flex',
isCenter && !isVertical && !isSimple && 'is-center',
ns.b(),
ns.is(isSimple ? 'simple' : parent.props.direction),
ns.is('flex', isLast && !space && !isCenter),
ns.is('center', isCenter && !isVertical && !isSimple),
]"
>
<!-- icon & line -->
<div :class="['el-step__head', `is-${currentStatus}`]">
<div v-if="!isSimple" class="el-step__line">
<i class="el-step__line-inner" :style="lineStyle"></i>
<div :class="[ns.e('head'), ns.is(currentStatus)]">
<div v-if="!isSimple" :class="ns.e('line')">
<i :class="ns.e('line-inner')" :style="lineStyle"></i>
</div>
<div :class="['el-step__icon', `is-${icon ? 'icon' : 'text'}`]">
<div :class="[ns.e('icon'), ns.is(icon ? 'icon' : 'text')]">
<slot
v-if="currentStatus !== 'success' && currentStatus !== 'error'"
name="icon"
>
<el-icon v-if="icon" class="el-step__icon-inner">
<el-icon v-if="icon" :class="ns.e('icon-inner')">
<component :is="icon" />
</el-icon>
<div v-if="!icon && !isSimple" class="el-step__icon-inner">
<div v-if="!icon && !isSimple" :class="ns.e('icon-inner')">
{{ index + 1 }}
</div>
</slot>
<el-icon v-else class="el-step__icon-inner is-status">
<el-icon v-else :class="[ns.e('icon-inner'), ns.is('status')]">
<check v-if="currentStatus === 'success'" />
<close v-else />
</el-icon>
</div>
</div>
<!-- title & description -->
<div class="el-step__main">
<div :class="['el-step__title', `is-${currentStatus}`]">
<div :class="ns.e('main')">
<div :class="[ns.e('title'), ns.is(currentStatus)]">
<slot name="title">{{ title }}</slot>
</div>
<div v-if="isSimple" class="el-step__arrow"></div>
<div v-else :class="['el-step__description', `is-${currentStatus}`]">
<div v-if="isSimple" :class="ns.e('arrow')"></div>
<div v-else :class="[ns.e('description'), ns.is(currentStatus)]">
<slot name="description">{{ description }}</slot>
</div>
</div>
@ -60,6 +60,7 @@ import {
import { ElIcon } from '@element-plus/components/icon'
import { Close, Check } from '@element-plus/icons-vue'
import { useNamespace } from '@element-plus/hooks'
import type { Ref, PropType, Component } from 'vue'
export interface IStepsProps {
@ -112,6 +113,7 @@ export default defineComponent({
},
},
setup(props) {
const ns = useNamespace('step')
const index = ref(-1)
const lineStyle = ref({})
const internalStatus = ref('')
@ -222,6 +224,7 @@ export default defineComponent({
parent.steps.value = [...parent.steps.value, stepItemState]
return {
ns,
index,
lineStyle,
currentStatus,