fix:是否修改

quanyawei

2023-11-30 f4991944d13b94355fb8aaf03dad7d60ca530ee9

 uni_modules/uview-ui/components/u-steps/u-steps.vue

New file
@@ -0,0 +1,80 @@
<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>