学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

80 lines
2.1 KiB

1 year ago
  1. <template>
  2. <view
  3. class="u-steps"
  4. :class="[`u-steps--${direction}`]"
  5. >
  6. <slot></slot>
  7. </view>
  8. </template>
  9. <script>
  10. import props from './props.js';
  11. /**
  12. * Steps 步骤条
  13. * @description 该组件一般用于完成一个任务要分几个步骤标识目前处于第几步的场景
  14. * @tutorial https://uviewui.com/components/steps.html
  15. * @property {String} direction row-横向column-竖向 (默认 'row' )
  16. * @property {String | Number} current 设置当前处于第几步 (默认 0 )
  17. * @property {String} activeColor 激活状态颜色 (默认 '#3c9cff' )
  18. * @property {String} inactiveColor 未激活状态颜色 (默认 '#969799' )
  19. * @property {String} activeIcon 激活状态的图标
  20. * @property {String} inactiveIcon 未激活状态图标
  21. * @property {Boolean} dot 是否显示点类型 (默认 false )
  22. * @example <u-steps current="0"><u-steps-item title="已出库" desc="10:35" ></u-steps-item></u-steps>
  23. */
  24. export default {
  25. name: 'u-steps',
  26. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  27. data() {
  28. return {
  29. }
  30. },
  31. watch: {
  32. children() {
  33. this.updateChildData()
  34. },
  35. parentData() {
  36. this.updateChildData()
  37. }
  38. },
  39. computed: {
  40. // 监听参数的变化,通过watch中,手动去更新子组件的数据,否则子组件不会自动变化
  41. parentData() {
  42. return [this.current, this.direction, this.activeColor, this.inactiveColor, this.activeIcon, this.inactiveIcon, this.dot]
  43. }
  44. },
  45. methods: {
  46. // 更新子组件的数据
  47. updateChildData() {
  48. this.children.map(child => {
  49. // 先判断子组件是否存在对应的方法
  50. uni.$u.test.func((child || {}).updateFromParent()) && child.updateFromParent()
  51. })
  52. },
  53. // 接受子组件的通知,去修改其他子组件的数据
  54. updateFromChild() {
  55. this.updateChildData()
  56. }
  57. },
  58. created() {
  59. this.children = []
  60. }
  61. }
  62. </script>
  63. <style lang="scss" scoped>
  64. @import "../../libs/css/components.scss";
  65. .u-steps {
  66. @include flex;
  67. &--column {
  68. flex-direction: column
  69. }
  70. &--row {
  71. flex-direction: row;
  72. flex: 1;
  73. }
  74. }
  75. </style>