gpc-ui 0.1.7

package/src/components/gpc-tabs/Tabs.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="tabs">
+    <div class="tabs-bar">
+      <div :class="tabCls(item)"
+           v-for="(item, index) in navList"
+           @click="handleChange(index)"
+           :key="item.name">
+        {{ item.label }}
+      </div>
+      <div class="tabs-tab-underline"
+           :style="{ left: underlineLeft, width: underlineWidth }"
+           :class="{ 'tabs-tab-underline-active': currentValue !== null }"></div>
+    </div>
+    <div class="tabs-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    curTab: [String, Number]
+  },
+  data() {
+    return {
+      currentValue: this.curTab,
+      navList: []
+    }
+  },
+  computed: {
+    underlineLeft() {
+      if (this.currentValue === null) return '0';
+      const index = this.navList.findIndex(tab => tab.name === this.currentValue);
+      if (index === -1) return '0';
+      const tabElement = this.$el.querySelectorAll('.tabs-tab')[index];
+      if (!tabElement) return '0';
+      return `${tabElement.offsetLeft}px`;
+    },
+    underlineWidth() {
+      if (this.currentValue === null) return '0';
+      const index = this.navList.findIndex(tab => tab.name === this.currentValue);
+      if (index === -1) return '0';
+      const tabElement = this.$el.querySelectorAll('.tabs-tab')[index];
+      if (!tabElement) return '0';
+      return `${tabElement.offsetWidth}px`;
+    }
+  },
+  methods: {
+    tabCls(item) {
+      return [
+        'tabs-tab',
+        {
+          'tabs-tab-active': item.name === this.currentValue
+        }
+      ]
+    },
+    getTabs() {
+      return this.$children.filter(function (item) {
+        return item.$options.name === 'TabPane'
+      })
+    },
+    updateNav() {
+      this.navList = []
+      let _this = this
+      this.getTabs().forEach(function (pane, index) {
+        _this.navList.push({
+          label: pane.label,
+          name: pane.name || index
+        })
+        if (!pane.name) pane.name = index
+        if (index === 0) {
+          if (!_this.currentValue) {
+            _this.currentValue = pane.name || index
+          }
+        }
+      })
+      this.updateStatus()
+    },
+    updateStatus() {
+      let tabs = this.getTabs()
+      let _this = this
+      tabs.forEach(function (tab) {
+        let b = tab.name === _this.currentValue
+        tab.show = b
+        return tab.show
+      })
+    },
+    handleChange(index) {
+      let nav = this.navList[index]
+      let name = nav.name
+      this.currentValue = name
+      this.$emit('input', name)
+      this.$emit('on-click', name)
+    }
+  },
+  watch: {
+    curTab: function (val) {
+      this.currentValue = val
+    },
+    currentValue() {
+      this.updateStatus()
+    }
+  },
+  mounted() {
+    this.updateNav()
+  }
+}
+</script>
+
+<style scoped>
+[v-cloak] {
+  display: none;
+}
+
+.tabs {
+  font-size: 20px;
+  color: #d3d3d3;
+}
+
+.tabs-bar {
+  position: relative;
+}
+
+.tabs-bar:after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: #d7dde4;
+}
+
+.tabs-tab {
+  display: inline-block;
+  padding: 4px 16px;
+  margin-right: 6px;
+  background: #fff;
+  cursor: pointer;
+  position: relative;
+}
+
+.tabs-tab-active {
+  color: #018a46;
+}
+
+.tabs-tab-underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: #018a46;
+  transition: width 0.3s ease, left 0.3s ease;
+}
+
+.tabs-tab-underline-active {
+  width: 100%;
+}
+</style>

package/src/components/index.js

@@ -0,0 +1,20 @@
+import gpcLogin from "./gpc-login/index.vue"
+import gpcTabs from "./gpc-tabs/Tabs.vue"
+
+const components = {
+    gpcLogin,
+    gpcTabs
+};
+
+function install(Vue) {
+    const keys = Object.keys(components);
+    keys.forEach((name) => {
+        const component = components[name];
+        Vue.component(component.name || name, component);
+    });
+}
+
+export default {
+    install,
+    ...components,
+};