|
@@ -1,198 +0,0 @@
|
|
|
-<template>
|
|
|
- <view
|
|
|
- :class="[
|
|
|
- {
|
|
|
- 'k-tab-group-plain': type == 'plain',
|
|
|
- 'k-tab-group-fill': type == 'fill',
|
|
|
- },
|
|
|
- ]"
|
|
|
- :style="[
|
|
|
- themeColor ? { '--k-color-primary-01': themeColor } : {},
|
|
|
- type == 'plain'
|
|
|
- ? { paddingLeft: paddingLr + 'rpx', paddingRight: paddingLr + 'rpx' }
|
|
|
- : {},
|
|
|
- ]"
|
|
|
- >
|
|
|
- <template v-if="type == 'fill'">
|
|
|
- <text
|
|
|
- v-for="(tab, index) in tabs"
|
|
|
- :key="index"
|
|
|
- :class="[
|
|
|
- 'k-tab-group__item',
|
|
|
- {
|
|
|
- 'k-tab-group__item-first': index == 0,
|
|
|
- 'k-tab-group__item-last': index == tabs.length - 1,
|
|
|
- 'k-tab-group__item--active': current == index,
|
|
|
- },
|
|
|
- ]"
|
|
|
- @click="changeTab(index)"
|
|
|
- >{{ tab }}</text
|
|
|
- >
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view
|
|
|
- :class="[
|
|
|
- 'k-tab-group__item',
|
|
|
- { 'k-tab-group__item--active': current == index },
|
|
|
- ]"
|
|
|
- v-for="(tab, index) in tabs"
|
|
|
- @click="changeTab(index)"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <text class="k-tab-group__item__text">{{ tab }}</text>
|
|
|
- <view
|
|
|
- :style="{ width: lineWidth }"
|
|
|
- class="k-tab-group__item__line"
|
|
|
- ></view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts">
|
|
|
-import Vue from 'vue';
|
|
|
-export default Vue.extend({
|
|
|
- name: 'k-tab',
|
|
|
- props: {
|
|
|
- type: {
|
|
|
- type: String,
|
|
|
- default: 'plain', // 'plain' | 'fill'
|
|
|
- },
|
|
|
- tabs: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- defaultCurrent: {
|
|
|
- type: Number,
|
|
|
- default: 0,
|
|
|
- },
|
|
|
- lineWidth: {
|
|
|
- type: String,
|
|
|
- default: '64rpx',
|
|
|
- },
|
|
|
- // TODO 多端自适应如何处理
|
|
|
- // width: {
|
|
|
- // type: String,
|
|
|
- // default: '350px',
|
|
|
- // },
|
|
|
- themeColor: {
|
|
|
- type: String,
|
|
|
- default: '',
|
|
|
- },
|
|
|
- // padding-left & padding-right, 单位 rpx
|
|
|
- // 仅在 type = plain 时有效
|
|
|
- paddingLr: {
|
|
|
- type: Number,
|
|
|
- default: 40,
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- current: this.defaultCurrent,
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- styleObj() {
|
|
|
- // 在真机上不能给 --k-color-primary-01 传入空值
|
|
|
- // 用 styleObj 这个计算属性加上 template 中写 :style="styleObj" 也不行
|
|
|
- if (this.themeColor) {
|
|
|
- return { '--k-color-primary-01': this.themeColor };
|
|
|
- }
|
|
|
- return {};
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- defaultCurrent(newVal) {
|
|
|
- this.current = newVal;
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
- changeTab(index: number) {
|
|
|
- this.current = index;
|
|
|
- this.$emit('change', index);
|
|
|
- },
|
|
|
- },
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-/* stylelint-disable selector-class-pattern */
|
|
|
-.k-tab-group-plain,
|
|
|
-.k-tab-group-fill {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: var(--k-color-neutral-01, #333);
|
|
|
-}
|
|
|
-
|
|
|
-.k-tab-group-plain {
|
|
|
- justify-content: space-between;
|
|
|
- border-bottom: 0.5px solid #e1e2e8; // TODO 需要替换为 css 变量
|
|
|
-
|
|
|
- .k-tab-group__item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding-top: 8px;
|
|
|
-
|
|
|
- .k-tab-group__item__text {
|
|
|
- color: var(--k-color-neutral-01, #333);
|
|
|
- text-align: center;
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .k-tab-group__item__line {
|
|
|
- width: 100%;
|
|
|
- height: 2px;
|
|
|
- margin-top: 2px;
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .k-tab-group__item.k-tab-group__item--active {
|
|
|
- .k-tab-group__item__text {
|
|
|
- color: var(--k-color-primary-01, #064c8a);
|
|
|
- }
|
|
|
-
|
|
|
- .k-tab-group__item__line {
|
|
|
- background-color: var(--k-color-primary-01, #064c8a);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.k-tab-group-fill {
|
|
|
- .k-tab-group__item {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border-top: 1px var(--k-color-primary-01, #064c8a) solid;
|
|
|
- border-bottom: 1px var(--k-color-primary-01, #064c8a) solid;
|
|
|
- padding: 8px 16px;
|
|
|
- margin-left: -15px;
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
-
|
|
|
- .k-tab-group__item.k-tab-group__item-first {
|
|
|
- border-left: 1px var(--k-color-primary-01, #064c8a) solid;
|
|
|
- margin-left: 0;
|
|
|
- border-radius: 22px 0 0 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .k-tab-group__item.k-tab-group__item-last {
|
|
|
- border-right: 1px var(--k-color-primary-01, #064c8a) solid;
|
|
|
- border-radius: 0 22px 22px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .k-tab-group__item.k-tab-group__item--active {
|
|
|
- border: 1px var(--k-color-primary-01, #064c8a) solid;
|
|
|
- border-radius: 22px;
|
|
|
- background-color: var(--k-color-primary-01, #064c8a);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-}
|
|
|
-// TODO plain 模式下选中后加一点动画?
|
|
|
-// TODO 左右滑动
|
|
|
-</style>
|