pco/app/uview-ui/components/u-steps/u-steps.vue

<template>
  <view
      class="u-steps"
      :class="[`u-steps--${direction}`]"
  >
    <slot></slot>
  </view>
</template>

<script>
import props from './props.js';

/**
 * Steps 步骤条
 * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
 * @tutorial https://uviewui.com/components/steps.html
 * @property {String}      direction    row-横向，column-竖向 (默认 'row' )
 * @property {String | Number}  current      设置当前处于第几步 (默认 0 )
 * @property {String}      activeColor    激活状态颜色 (默认 '#3c9cff' )
 * @property {String}      inactiveColor  未激活状态颜色 (默认 '#969799' )
 * @property {String}      activeIcon    激活状态的图标
 * @property {String}      inactiveIcon  未激活状态图标
 * @property {Boolean}      dot        是否显示点类型 (默认 false )
 * @example <u-steps current="0"><u-steps-item title="已出库" desc="10:35" ></u-steps-item></u-steps>
 */
export default {
  name: 'u-steps',
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {}
  },
  watch: {
    children() {
      this.updateChildData()
    },
    parentData() {
      this.updateChildData()
    }
  },
  computed: {
    // 监听参数的变化，通过watch中，手动去更新子组件的数据，否则子组件不会自动变化
    parentData() {
      return [this.current, this.direction, this.activeColor, this.inactiveColor, this.activeIcon, this.inactiveIcon, this.dot]
    }
  },
  methods: {
    // 更新子组件的数据
    updateChildData() {
      this.children.map(child => {
        // 先判断子组件是否存在对应的方法
        uni.$u.test.func((child || {}).updateFromParent()) && child.updateFromParent()
      })
    },
    // 接受子组件的通知，去修改其他子组件的数据
    updateFromChild() {
      this.updateChildData()
    }
  },
  created() {
    this.children = []
  }
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-steps {
  @include flex;

  &--column {
    flex-direction: column
  }

  &--row {
    flex-direction: row;
    flex: 1;
  }
}
</style>