bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

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

¶Ô±ÈÐÂÎļþ
@@ -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>