| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- import { use } from '../utils';
- import { GREEN } from '../utils/color';
- import Icon from '../icon';
- const [sfc, bem] = use('steps');
- export default sfc({
- props: {
- icon: String,
- title: String,
- active: Number,
- iconClass: String,
- description: String,
- direction: {
- type: String,
- default: 'horizontal'
- },
- activeColor: {
- type: String,
- default: GREEN
- },
- activeIcon: {
- type: String,
- default: 'checked'
- }
- },
- data() {
- return {
- steps: []
- };
- },
- render(h) {
- const { icon, title, description, slots } = this;
- const StatusIcon = (slots('icon') || icon) && (
- <div class={bem('icon')}>{slots('icon') || <Icon name={icon} class={this.iconClass} />}</div>
- );
- const StatusMessage = (
- <div class={bem('message')}>
- <div class={bem('title')}>{title}</div>
- <div class={[bem('desc'), 'van-ellipsis']}>{description}</div>
- </div>
- );
- return (
- <div class={bem([this.direction])}>
- {(title || description) && (
- <div class={bem('status')}>
- {StatusIcon}
- {StatusMessage}
- {slots('message-extra')}
- </div>
- )}
- <div class={bem('items', { alone: !title && !description })}>{slots()}</div>
- </div>
- );
- }
- });
|