| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- import { use } from '../utils';
- import Icon from '../icon';
- const [sfc, bem] = use('step');
- export default sfc({
- beforeCreate() {
- const { steps } = this.$parent;
- const index = this.$parent.slots().indexOf(this.$vnode);
- steps.splice(index === -1 ? steps.length : index, 0, this);
- },
- beforeDestroy() {
- const index = this.$parent.steps.indexOf(this);
- if (index > -1) {
- this.$parent.steps.splice(index, 1);
- }
- },
- computed: {
- status() {
- const index = this.$parent.steps.indexOf(this);
- const { active } = this.$parent;
- if (index < active) {
- return 'finish';
- }
- if (index === active) {
- return 'process';
- }
- }
- },
- render(h) {
- const { status } = this;
- const { activeIcon, activeColor, direction } = this.$parent;
- const titleStyle = status === 'process' && { color: activeColor };
- return (
- <div class={['van-hairline', bem([direction, { [status]: status }])]}>
- <div class={bem('title')} style={titleStyle}>
- {this.slots()}
- </div>
- <div class={bem('circle-container')}>
- {status !== 'process' ? (
- <i class={bem('circle')} />
- ) : (
- this.slots('active-icon') || (
- <Icon name={activeIcon} style={{ color: activeColor }} />
- )
- )}
- </div>
- <div class={bem('line')} />
- </div>
- );
- }
- });
|