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.

200 lines
4.4 KiB

3 years ago
  1. <template>
  2. <view class="">
  3. <view
  4. class="u-steps"
  5. :style="{
  6. flexDirection: direction
  7. }"
  8. >
  9. <view class="u-steps__item"
  10. :class="['u-steps__item--' + direction]"
  11. v-for="(item, index) in list" :key="index"
  12. >
  13. <view
  14. class="u-steps__item__num"
  15. v-if="mode == 'number'"
  16. :style="{
  17. backgroundColor: current < index ? 'transparent' : activeColor,
  18. borderColor: current < index ? unActiveColor : activeColor
  19. }"
  20. >
  21. <text v-if="current < index" :style="{
  22. color: current < index ? unActiveColor : activeColor,
  23. }">
  24. {{ index + 1 }}
  25. </text>
  26. <u-icon v-else size="22" color="#ffffff" :name="icon"></u-icon>
  27. </view>
  28. <view class="u-steps__item__dot" v-if="mode == 'dot'" :style="{
  29. backgroundColor: index <= current ? activeColor : unActiveColor
  30. }"></view>
  31. <text class="u-line-1" :style="{
  32. color: index <= current ? activeColor : unActiveColor,
  33. }" :class="['u-steps__item__text--' + direction]">
  34. {{ item.name }}
  35. </text>
  36. <view class="u-steps__item__line" :class="['u-steps__item__line--' + mode]" v-if="index < list.length - 1">
  37. <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. /**
  45. * steps 步骤条
  46. * @description 该组件一般用于完成一个任务要分几个步骤标识目前处于第几步的场景
  47. * @tutorial https://www.uviewui.com/components/steps.html
  48. * @property {String} mode 设置模式默认dot
  49. * @property {Array} list 数轴条数据数组具体见上方示例
  50. * @property {String} type type主题默认primary
  51. * @property {String} direction row-横向column-竖向默认row
  52. * @property {Number String} current 设置当前处于第几步
  53. * @property {String} active-color 已完成步骤的激活颜色如设置type值会失效
  54. * @property {String} un-active-color 未激活的颜色用于表示未完成步骤的颜色默认#606266
  55. * @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
  56. */
  57. export default {
  58. name: 'u-steps',
  59. props: {
  60. // 步骤条的类型,dot|number
  61. mode: {
  62. type: String,
  63. default: 'dot'
  64. },
  65. // 步骤条的数据
  66. list: {
  67. type: Array,
  68. default() {
  69. return [];
  70. }
  71. },
  72. // 主题类型, primary|success|info|warning|error
  73. type: {
  74. type: String,
  75. default: 'primary'
  76. },
  77. // 当前哪一步是激活的
  78. current: {
  79. type: [Number, String],
  80. default: 0
  81. },
  82. // 激活步骤的颜色
  83. activeColor: {
  84. type: String,
  85. default: '#2979ff'
  86. },
  87. // 未激活的颜色
  88. unActiveColor: {
  89. type: String,
  90. default: '#909399'
  91. },
  92. // 自定义图标
  93. icon: {
  94. type: String,
  95. default: 'checkmark'
  96. },
  97. // step的排列方向,row-横向,column-竖向
  98. direction: {
  99. type: String,
  100. default: 'row'
  101. }
  102. },
  103. data() {
  104. return {};
  105. },
  106. };
  107. </script>
  108. <style lang="scss" scoped>
  109. @import '../../libs/css/style.components.scss';
  110. $u-steps-item-number-width: 44rpx;
  111. $u-steps-item-dot-width: 20rpx;
  112. .u-steps {
  113. @include vue-flex;
  114. .u-steps__item {
  115. flex: 1;
  116. text-align: center;
  117. position: relative;
  118. min-width: 100rpx;
  119. font-size: 26rpx;
  120. color: #8799a3;
  121. @include vue-flex;
  122. justify-content: center;
  123. flex-direction: column;
  124. align-items: center;
  125. &--row {
  126. @include vue-flex;
  127. flex-direction: column;
  128. .u-steps__item__line {
  129. position: absolute;
  130. z-index: 0;
  131. left: 75%;
  132. width: 50%;
  133. &--dot {
  134. top: calc(#{$u-steps-item-dot-width} / 2);
  135. }
  136. &--number {
  137. top: calc(#{$u-steps-item-number-width} / 2);
  138. }
  139. }
  140. }
  141. &--column {
  142. @include vue-flex;
  143. flex-direction: row;
  144. justify-content: flex-start;
  145. min-height: 120rpx;
  146. .u-steps__item__line {
  147. position: absolute;
  148. z-index: 0;
  149. height: 50%;
  150. top: 75%;
  151. &--dot {
  152. left: calc(#{$u-steps-item-dot-width} / 2);
  153. }
  154. &--number {
  155. left: calc(#{$u-steps-item-number-width} / 2);
  156. }
  157. }
  158. }
  159. &__num {
  160. @include vue-flex;
  161. align-items: center;
  162. justify-content: center;
  163. width: $u-steps-item-number-width;
  164. height: $u-steps-item-number-width;
  165. border: 1px solid #8799a3;
  166. border-radius: 50%;
  167. overflow: hidden;
  168. }
  169. &__dot {
  170. width: $u-steps-item-dot-width;
  171. height: $u-steps-item-dot-width;
  172. @include vue-flex;
  173. border-radius: 50%;
  174. }
  175. &__text--row {
  176. margin-top: 14rpx;
  177. }
  178. &__text--column {
  179. margin-left: 14rpx;
  180. }
  181. }
  182. }
  183. </style>