Casper Dai 3 лет назад
Родитель
Сommit
0ea02b16e6
1 измененных файлов с 64 добавлено и 0 удалено
  1. 64 0
      src/views/device/detail/components/Tabs.vue

+ 64 - 0
src/views/device/detail/components/Tabs.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="l-flex--row l-flex__none c-status-bar">
+    <div
+      v-for="tab in items"
+      :key="tab.key"
+      class="l-flex__none c-status-bar__item u-pointer"
+      :class="{ active: tab.key === active }"
+      @click="onClick(tab)"
+    >
+      {{ tab.name }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tabs',
+  props: {
+    active: {
+      type: String,
+      default: ''
+    },
+    items: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  methods: {
+    onClick (tab) {
+      this.$emit('update:active', tab.key)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.c-status-bar {
+  align-self: flex-start;
+  padding: 4px;
+  margin-bottom: $spacing;
+  border-radius: 2px;
+  background-color: #f4f7fb;
+  overflow-x: auto;
+
+  &__item {
+    padding: 4px 10px;
+    color: $info--dark;
+    font-size: 16px;
+    line-height: 1;
+
+    & + & {
+      margin-left: $spacing;
+    }
+
+    &.active {
+      color: $blue;
+      background-color: #fff;
+      border-radius: inherit;
+    }
+  }
+}
+</style>