John-Hong 2 жил өмнө
parent
commit
f242e0bbde

+ 0 - 198
src/kui/components/k-tab/k-tab copy.vue

@@ -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>