123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- <template>
- <view class="u-page">
- <view class="u-demo-block">
- <text class="u-demo-block__title">基础使用</text>
- <view class="u-demo-block__content">
- <u-subsection
- :list="list"
- mode="subsection"
- :current="current1"
- @change="change1"
- ></u-subsection>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">按钮模式</text>
- <view class="u-demo-block__content">
- <u-subsection
- :list="list"
- mode="button"
- :current="current2"
- @change="change2"
- ></u-subsection>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">更换主题</text>
- <view class="u-demo-block__content">
- <u-subsection
- :list="list"
- mode="subsection"
- :current="current3"
- activeColor="#f56c6c"
- @change="change3"
- ></u-subsection>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">默认位置</text>
- <view class="u-demo-block__content">
- <u-subsection
- :list="list"
- mode="button"
- :current="current4"
- activeColor="#f9ae3d"
- @change="change4"
- ></u-subsection>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- current1: 0,
- current2: 0,
- current3: 0,
- current4: 1,
- list: ['未付款', '待评价', '已付款'],
- // 或者如下,也可以配置keyName参数修改对象键值
- // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
- current: 1
- }
- },
- methods: {
- change1(index) {
- this.current1 = index
- },
- change2(index) {
- this.current2 = index
- },
- change3(index) {
- this.current3 = index
- },
- change4(index) {
- this.current4 = index
- }
- },
- }
- </script>
- <style lang="scss">
- .album {
- @include flex;
- align-items: flex-start;
- &__avatar {
- background-color: $u-bg-color;
- padding: 5px;
- border-radius: 3px;
- }
- &__content {
- margin-left: 10px;
- flex: 1;
- }
- }
- </style>
|