You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.4 KiB
88 lines
2.4 KiB
import baseComponent from '../helpers/baseComponent' |
|
import classNames from '../helpers/classNames' |
|
|
|
const defaultStatus = ['wait', 'process', 'finish', 'error'] |
|
const defaultIcon = 'ios-checkmark' |
|
|
|
baseComponent({ |
|
relations: { |
|
'../steps/index': { |
|
type: 'parent', |
|
}, |
|
}, |
|
properties: { |
|
prefixCls: { |
|
type: String, |
|
value: 'wux-step', |
|
}, |
|
status: { |
|
type: String, |
|
value: '', |
|
}, |
|
title: { |
|
type: String, |
|
value: '', |
|
}, |
|
content: { |
|
type: String, |
|
value: '', |
|
}, |
|
icon: { |
|
type: String, |
|
value: '', |
|
}, |
|
}, |
|
data: { |
|
width: '100%', |
|
length: 1, |
|
index: 0, |
|
current: 0, |
|
direction: 'horizontal', |
|
}, |
|
computed: { |
|
classes: ['prefixCls, direction', function(prefixCls, direction) { |
|
const wrap = classNames(prefixCls, { |
|
[`${prefixCls}--${direction}`]: direction, |
|
}) |
|
const hd = `${prefixCls}__hd` |
|
const icon = `${prefixCls}__icon` |
|
const thumb = `${prefixCls}__thumb` |
|
const bd = `${prefixCls}__bd` |
|
const title = `${prefixCls}__title` |
|
const content = `${prefixCls}__content` |
|
const ft = `${prefixCls}__ft` |
|
|
|
return { |
|
wrap, |
|
hd, |
|
icon, |
|
thumb, |
|
bd, |
|
title, |
|
content, |
|
ft, |
|
} |
|
}], |
|
}, |
|
methods: { |
|
updateCurrent(opts = {}) { |
|
const width = opts.direction === 'horizontal' ? 100 / opts.length + '%' : '100%' |
|
const index = defaultStatus.indexOf(this.data.status) |
|
const hasIcon = opts.index < opts.current || this.data.icon |
|
const thumb = this.data.icon || defaultIcon |
|
const suffix = index !== -1 ? defaultStatus[index] : opts.index < opts.current ? 'finish' : opts.index === opts.current ? 'process' : '' |
|
const className = `${this.data.prefixCls}--${suffix}` |
|
const options = Object.assign({ |
|
width, |
|
className, |
|
hasIcon, |
|
thumb, |
|
}, opts) |
|
|
|
this.setData(options) |
|
}, |
|
}, |
|
attached() { |
|
this.updateCurrent(this.data) |
|
}, |
|
})
|
|
|