all files / src/tabs/ tabsItem.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12×
 
 
 
 
 
15×
 
 
 
 
 
 
 
12×
 
9×
 
 
 
 
2×
1×
 
1×
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <div class="am-tabs-item" :data-name="name" @click="onClick" :class="classes">
    <slot></slot>
  </div>
</template>
 
<script>
export default {
  name: "amTabsItem",
  inject: ["eventBus", "direction"],
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    name: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      active: false
    };
  },
  computed: {
    classes() {
      return {
        active: this.active,
        disabled: this.disabled,
        vertical: this.direction == "vertical"
      };
    }
  },
  created() {
    this.eventBus &&
      this.eventBus.$on("update:selected", name => {
        this.active = name === this.name;
      });
  },
  methods: {
    onClick() {
      if (this.disabled) {
        return false;
      }
      this.eventBus && this.eventBus.$emit("update:selected", this.name, this);
      this.$emit("click", this);
    }
  }
};
</script>
 
<style lang="scss" scoped>
@import "var";
$darkblue: #1890ff;
.am-tabs-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  &:hover {
    color: $blue;
  }
  & + .am-tabs-item {
    margin-left: 10px;
  }
  &.vertical + .am-tabs-item {
    margin-top: 10px;
    margin-left: 0;
  }
  &.active {
    color: $darkblue;
    font-weight: 700;
  }
  &.disabled {
    color: #ccc;
  }
}
</style>