1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- 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() {
- const { prefixCls, direction } = this.data
- 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)
- },
- })
|