subsection.nvue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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-subsection
  7. :list="list"
  8. mode="subsection"
  9. :current="current1"
  10. @change="change1"
  11. ></u-subsection>
  12. </view>
  13. </view>
  14. <view class="u-demo-block">
  15. <text class="u-demo-block__title">按钮模式</text>
  16. <view class="u-demo-block__content">
  17. <u-subsection
  18. :list="list"
  19. mode="button"
  20. :current="current2"
  21. @change="change2"
  22. ></u-subsection>
  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-subsection
  29. :list="list"
  30. mode="subsection"
  31. :current="current3"
  32. activeColor="#f56c6c"
  33. @change="change3"
  34. ></u-subsection>
  35. </view>
  36. </view>
  37. <view class="u-demo-block">
  38. <text class="u-demo-block__title">默认位置</text>
  39. <view class="u-demo-block__content">
  40. <u-subsection
  41. :list="list"
  42. mode="button"
  43. :current="current4"
  44. activeColor="#f9ae3d"
  45. @change="change4"
  46. ></u-subsection>
  47. </view>
  48. </view>
  49. </view>
  50. </template>
  51. <script>
  52. export default {
  53. data() {
  54. return {
  55. current1: 0,
  56. current2: 0,
  57. current3: 0,
  58. current4: 1,
  59. list: ['未付款', '待评价', '已付款'],
  60. // 或者如下,也可以配置keyName参数修改对象键值
  61. // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
  62. current: 1
  63. }
  64. },
  65. methods: {
  66. change1(index) {
  67. this.current1 = index
  68. },
  69. change2(index) {
  70. this.current2 = index
  71. },
  72. change3(index) {
  73. this.current3 = index
  74. },
  75. change4(index) {
  76. this.current4 = index
  77. }
  78. },
  79. }
  80. </script>
  81. <style lang="scss">
  82. .album {
  83. @include flex;
  84. align-items: flex-start;
  85. &__avatar {
  86. background-color: $u-bg-color;
  87. padding: 5px;
  88. border-radius: 3px;
  89. }
  90. &__content {
  91. margin-left: 10px;
  92. flex: 1;
  93. }
  94. }
  95. </style>