index.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <demo-section>
  3. <demo-block :title="$t('basicUsage')">
  4. <van-steps :active="active">
  5. <van-step>{{ $t('step1') }}</van-step>
  6. <van-step>{{ $t('step2') }}</van-step>
  7. <van-step>{{ $t('step3') }}</van-step>
  8. <van-step>{{ $t('step4') }}</van-step>
  9. </van-steps>
  10. <van-button @click="nextStep">{{ $t('nextStep') }}</van-button>
  11. </demo-block>
  12. <demo-block :title="$t('customStyle')">
  13. <van-steps
  14. :active="active"
  15. active-icon="success"
  16. active-color="#38f"
  17. >
  18. <van-step>{{ $t('step1') }}</van-step>
  19. <van-step>{{ $t('step2') }}</van-step>
  20. <van-step>{{ $t('step3') }}</van-step>
  21. <van-step>{{ $t('step4') }}</van-step>
  22. </van-steps>
  23. </demo-block>
  24. <demo-block :title="$t('title3')">
  25. <van-steps
  26. :active="0"
  27. direction="vertical"
  28. >
  29. <van-step>
  30. <h3>{{ $t('status1') }}</h3>
  31. <p>2016-07-12 12:40</p>
  32. </van-step>
  33. <van-step>
  34. <h3>{{ $t('status2') }}</h3>
  35. <p>2016-07-11 10:00</p>
  36. </van-step>
  37. <van-step>
  38. <h3>{{ $t('status3') }}</h3>
  39. <p>2016-07-10 09:30</p>
  40. </van-step>
  41. </van-steps>
  42. </demo-block>
  43. </demo-section>
  44. </template>
  45. <script>
  46. export default {
  47. i18n: {
  48. 'zh-CN': {
  49. nextStep: '下一步',
  50. step1: '买家下单',
  51. step2: '商家接单',
  52. step3: '买家提货',
  53. step4: '交易完成',
  54. title2: '描述信息',
  55. title3: '竖向步骤条',
  56. status1: '【城市】物流状态1',
  57. status2: '【城市】物流状态',
  58. status3: '快件已发货',
  59. customStyle: '自定义样式'
  60. },
  61. 'en-US': {
  62. nextStep: 'Next Step',
  63. step1: 'Step1',
  64. step2: 'Step2',
  65. step3: 'Step3',
  66. step4: 'Step4',
  67. title2: 'Description',
  68. title3: 'Vertical Steps',
  69. status1: '【City】Status1',
  70. status2: '【City】Status2',
  71. status3: '【City】Status3',
  72. customStyle: 'Custom Style'
  73. }
  74. },
  75. data() {
  76. return {
  77. active: 1
  78. };
  79. },
  80. methods: {
  81. nextStep() {
  82. this.active = ++this.active % 4;
  83. }
  84. }
  85. };
  86. </script>
  87. <style lang="less">
  88. @import '../../style/var';
  89. .demo-steps {
  90. .steps-success,
  91. .van-icon-location {
  92. color: @green;
  93. }
  94. .van-button {
  95. margin: 15px 0 0 15px;
  96. }
  97. .van-steps__message + p {
  98. margin-bottom: 10px;
  99. }
  100. p,
  101. h3 {
  102. margin: 0;
  103. font-size: inherit;
  104. font-weight: normal;
  105. }
  106. }
  107. </style>