dykj-outsource-12123/uni_modules/uview-plus/components/u-steps/u-steps.vue
2024-06-28 14:18:30 +08:00

84 lines
2.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view
class="u-steps"
:class="[`u-steps--${direction}`]"
>
<slot></slot>
</view>
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import test from '../../libs/function/test';
/**
* Steps 步骤条
* @description 该组件一般用于完成一个任务要分几个步骤,标识目前处于第几步的场景。
* @tutorial https://uview-plus.jiangruyi.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: [mpMixin, 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 => {
// 先判断子组件是否存在对应的方法
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>