u-steps.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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>