steps.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础演示</text>
  5. <view class="u-demo-block__content">
  6. <u-steps :current="current1">
  7. <u-steps-item
  8. title="已下单"
  9. desc="10:30"
  10. >
  11. </u-steps-item>
  12. <u-steps-item
  13. title="已出库"
  14. desc="10:35"
  15. >
  16. </u-steps-item>
  17. <u-steps-item
  18. title="运输中"
  19. desc="11:40"
  20. >
  21. </u-steps-item>
  22. </u-steps>
  23. </view>
  24. </view>
  25. <view class="u-demo-block">
  26. <text class="u-demo-block__title">显示点类型</text>
  27. <view class="u-demo-block__content">
  28. <u-steps
  29. :current="1"
  30. dot
  31. >
  32. <u-steps-item
  33. title="已下单"
  34. desc="10:30"
  35. >
  36. </u-steps-item>
  37. <u-steps-item
  38. title="已出库"
  39. desc="10:35"
  40. >
  41. </u-steps-item>
  42. <u-steps-item
  43. title="运输中"
  44. desc="11:40"
  45. >
  46. </u-steps-item>
  47. </u-steps>
  48. <u-steps
  49. :current="1"
  50. dot
  51. direction="column"
  52. >
  53. <u-steps-item
  54. title="已下单"
  55. desc="10:30"
  56. >
  57. </u-steps-item>
  58. <u-steps-item
  59. title="已出库"
  60. desc="10:35"
  61. >
  62. </u-steps-item>
  63. <u-steps-item
  64. title="运输中"
  65. desc="11:40"
  66. >
  67. </u-steps-item>
  68. </u-steps>
  69. </view>
  70. </view>
  71. <view class="u-demo-block">
  72. <text class="u-demo-block__title">错误状态</text>
  73. <view class="u-demo-block__content">
  74. <u-steps :current="1">
  75. <u-steps-item
  76. title="已下单"
  77. desc="10:30"
  78. >
  79. </u-steps-item>
  80. <u-steps-item
  81. error
  82. title="仓库着火"
  83. desc="10:35"
  84. >
  85. </u-steps-item>
  86. <u-steps-item
  87. title="破产清算"
  88. desc="11:40"
  89. >
  90. </u-steps-item>
  91. </u-steps>
  92. </view>
  93. </view>
  94. <view class="u-demo-block">
  95. <text class="u-demo-block__title">自定义图标</text>
  96. <view class="u-demo-block__content">
  97. <u-steps
  98. :current="1"
  99. activeIcon="checkmark"
  100. inactiveIcon="arrow-right"
  101. >
  102. <u-steps-item
  103. title="已下单"
  104. desc="10:30"
  105. >
  106. </u-steps-item>
  107. <u-steps-item
  108. title="已出库"
  109. desc="10:35"
  110. >
  111. </u-steps-item>
  112. <u-steps-item
  113. title="运输中"
  114. desc="11:40"
  115. >
  116. </u-steps-item>
  117. </u-steps>
  118. </view>
  119. </view>
  120. <view class="u-demo-block">
  121. <text class="u-demo-block__title">自定义插槽</text>
  122. <view class="u-demo-block__content">
  123. <u-steps :current="1">
  124. <u-steps-item
  125. title="已下单"
  126. desc="10:30"
  127. >
  128. </u-steps-item>
  129. <u-steps-item
  130. title="已出库"
  131. desc="10:35"
  132. >
  133. </u-steps-item>
  134. <u-steps-item
  135. title="运输中"
  136. desc="11:40"
  137. >
  138. <text class="slot-icon" slot="icon">运</text>
  139. </u-steps-item>
  140. </u-steps>
  141. </view>
  142. </view>
  143. <view class="u-demo-block">
  144. <text class="u-demo-block__title">自定义颜色</text>
  145. <view class="u-demo-block__content">
  146. <u-steps :current="1" activeColor="#3c9cff">
  147. <u-steps-item
  148. title="已下单"
  149. desc="10:30"
  150. >
  151. </u-steps-item>
  152. <u-steps-item
  153. title="已出库"
  154. desc="10:35"
  155. >
  156. </u-steps-item>
  157. <u-steps-item
  158. title="运输中"
  159. desc="11:40"
  160. >
  161. </u-steps-item>
  162. </u-steps>
  163. </view>
  164. </view>
  165. <view class="u-demo-block">
  166. <text class="u-demo-block__title">竖向展示</text>
  167. <view class="u-demo-block__content">
  168. <u-steps
  169. :current="1"
  170. direction="column"
  171. >
  172. <u-steps-item
  173. title="已下单"
  174. desc="10:30"
  175. >
  176. </u-steps-item>
  177. <u-steps-item
  178. title="已出库"
  179. desc="10:35"
  180. >
  181. </u-steps-item>
  182. <u-steps-item
  183. title="运输中"
  184. desc="11:40"
  185. >
  186. </u-steps-item>
  187. </u-steps>
  188. </view>
  189. </view>
  190. </view>
  191. </template>
  192. <script>
  193. export default {
  194. data() {
  195. return {
  196. current1: 1
  197. }
  198. },
  199. onLoad() {
  200. }
  201. }
  202. </script>
  203. <style lang="scss">
  204. .slot-icon {
  205. width: 21px;
  206. height: 21px;
  207. background-color: $u-warning;
  208. border-radius: 100px;
  209. font-size: 12px;
  210. color: #fff;
  211. line-height: 21px;
  212. text-align: center;
  213. }
  214. </style>