index.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. const defaultStatus = ['wait', 'process', 'finish', 'error']
  4. const defaultIcon = 'ios-checkmark'
  5. baseComponent({
  6. relations: {
  7. '../steps/index': {
  8. type: 'parent',
  9. },
  10. },
  11. properties: {
  12. prefixCls: {
  13. type: String,
  14. value: 'wux-step',
  15. },
  16. status: {
  17. type: String,
  18. value: '',
  19. },
  20. title: {
  21. type: String,
  22. value: '',
  23. },
  24. content: {
  25. type: String,
  26. value: '',
  27. },
  28. icon: {
  29. type: String,
  30. value: '',
  31. },
  32. },
  33. data: {
  34. width: '100%',
  35. length: 1,
  36. index: 0,
  37. current: 0,
  38. direction: 'horizontal',
  39. },
  40. computed: {
  41. classes() {
  42. const { prefixCls, direction } = this.data
  43. const wrap = classNames(prefixCls, {
  44. [`${prefixCls}--${direction}`]: direction,
  45. })
  46. const hd = `${prefixCls}__hd`
  47. const icon = `${prefixCls}__icon`
  48. const thumb = `${prefixCls}__thumb`
  49. const bd = `${prefixCls}__bd`
  50. const title = `${prefixCls}__title`
  51. const content = `${prefixCls}__content`
  52. const ft = `${prefixCls}__ft`
  53. return {
  54. wrap,
  55. hd,
  56. icon,
  57. thumb,
  58. bd,
  59. title,
  60. content,
  61. ft,
  62. }
  63. },
  64. },
  65. methods: {
  66. updateCurrent(opts = {}) {
  67. const width = opts.direction === 'horizontal' ? 100 / opts.length + '%' : '100%'
  68. const index = defaultStatus.indexOf(this.data.status)
  69. const hasIcon = opts.index < opts.current || this.data.icon
  70. const thumb = this.data.icon || defaultIcon
  71. const suffix = index !== -1 ? defaultStatus[index] : opts.index < opts.current ? 'finish' : opts.index === opts.current ? 'process' : ''
  72. const className = `${this.data.prefixCls}--${suffix}`
  73. const options = Object.assign({
  74. width,
  75. className,
  76. hasIcon,
  77. thumb,
  78. }, opts)
  79. this.setData(options)
  80. },
  81. },
  82. attached() {
  83. this.updateCurrent(this.data)
  84. },
  85. })