65 lines
1.3 KiB
TypeScript
65 lines
1.3 KiB
TypeScript
import { PropType } from 'vue';
|
|
import { createNamespace } from '../utils';
|
|
import { useChildren } from '@vant/use';
|
|
|
|
const [createComponent, bem] = createNamespace('steps');
|
|
|
|
export const STEPS_KEY = 'vanSteps';
|
|
|
|
export type StepsDirection = 'horizontal' | 'vertical';
|
|
|
|
export type StepsProvide = {
|
|
props: {
|
|
active: number | string;
|
|
direction: StepsDirection;
|
|
activeIcon: string;
|
|
finishIcon?: string;
|
|
activeColor?: string;
|
|
inactiveIcon?: string;
|
|
inactiveColor?: string;
|
|
};
|
|
onClickStep: (index: number) => void;
|
|
};
|
|
|
|
export default createComponent({
|
|
props: {
|
|
finishIcon: String,
|
|
activeColor: String,
|
|
inactiveIcon: String,
|
|
inactiveColor: String,
|
|
active: {
|
|
type: [Number, String],
|
|
default: 0,
|
|
},
|
|
direction: {
|
|
type: String as PropType<StepsDirection>,
|
|
default: 'horizontal',
|
|
},
|
|
activeIcon: {
|
|
type: String,
|
|
default: 'checked',
|
|
},
|
|
},
|
|
|
|
emits: ['click-step'],
|
|
|
|
setup(props, { emit, slots }) {
|
|
const { linkChildren } = useChildren(STEPS_KEY);
|
|
|
|
const onClickStep = (index: number) => {
|
|
emit('click-step', index);
|
|
};
|
|
|
|
linkChildren({
|
|
props,
|
|
onClickStep,
|
|
});
|
|
|
|
return () => (
|
|
<div class={bem([props.direction])}>
|
|
<div class={bem('items')}>{slots.default?.()}</div>
|
|
</div>
|
|
);
|
|
},
|
|
});
|