t20-common-lib 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",

package/packages/main-page/index.js

@@ -0,0 +1,8 @@
+import MainPage from './src/main';
+
+/* istanbul ignore next */
+MainPage.install = function(Vue) {
+  Vue.component(MainPage.name, MainPage);
+};
+
+export default MainPage;

package/packages/main-page/src/main.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex-column">
+    <div v-if="$slots.header" class="header">
+      <slot name="header"></slot>
+    </div>
+    <div v-if="$slots.card || $slots.tab" style="position: relative;">
+      <slot name="card"></slot>
+      <div class="tab" v-if="$slots.tab">
+        <slot name="tab"></slot>
+      </div>
+    </div>
+    <div class="bg-white flex-1 overflow">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MainPage'
+}
+</script>
+
+<style lang="scss" scoped>
+.tab {
+  position: absolute; 
+  bottom: -34px;
+}
+
+.header {
+  height: 32px; 
+  line-height: 32px;
+}
+</style>

package/packages/tab-pane/index.js

@@ -0,0 +1,8 @@
+import TabPane from './src/main';
+
+/* istanbul ignore next */
+TabPane.install = function(Vue) {
+  Vue.component(TabPane.name, TabPane);
+};
+
+export default TabPane;

package/packages/tab-pane/src/main.vue

@@ -0,0 +1,128 @@
+<template>
+  <div v-if="data.length === 0" class="n20-secondary-tab m-b-s">
+    <div class="el-tabs__item is-active" style="padding: 0;">{{ init }}</div>
+  </div>
+  <div v-else-if="data.length === 1" class="n20-secondary-tab m-b-s">
+    <div class="el-tabs__item is-active" style="padding: 0;">
+      <span v-if="data[0].icon" :class="data[0].icon"></span>
+      <sup v-if="data[0].badge" class="el-tabs__item-badge"></sup>
+      {{ data[0].name }}
+    </div>
+  </div>
+  <el-tabs v-else :value="init" :class="classes" :tabPosition="tabPosition" :before-leave="beforeFn" @tab-click="clickFn">
+    <el-tab-pane
+      v-for="item of data"
+      :key="item.name"
+      :tab-info="item"
+      :name="item.name"
+      :icon="item.icon"
+      :disabled="item.disabled"
+    >
+      <template slot="label">
+        <span v-if="item.icon" :class="item.icon"></span>
+        <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
+        <span v-if="item.content" v-title="`${item.content}`"> {{ item.name }}</span>
+        <span v-else>{{ item.name }}</span>
+        <i
+          v-if="item.tips"
+          v-title="item.tips"
+          class="n20-icon-xinxitishi"
+          style="color: var(--color-text-secondary); align-self: flex-start;"
+        ></i>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+
+export default {
+  name: 'TabPane',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    init: {
+      type: String,
+      default: ''
+    },
+    stop: {
+      type: Boolean,
+      default: false
+    },
+    tabPosition: {
+      type: String,
+      default: 'top'
+    }
+  },
+  computed: {
+    classes(){
+      return {
+        'n20-secondary-tab': true,
+        'm-b-s': this.tabPosition == 'top',
+        'left-css': this.tabPosition == 'left'
+      }
+    }
+  },
+  methods: {
+    getTooltip(name, tips) {
+      return `<el-tooltip content="${tips}">${name}</el-tooltip>`
+    },
+    clickFn(C) {
+      let item = C.$attrs['tab-info']
+      if (this.$listeners['update:init']) {
+        !item.disabled && this.$emit('update:init', item.name)
+      }
+      if (this.$listeners['click']) {
+        this.$emit('click', item)
+      }
+    },
+    beforeFn(name) {
+      return !this.stop
+    }
+  }
+}
+</script>
+
+<style>
+.tooltip {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 9999;
+  background-color: black;
+  color: white;
+  padding: 5px;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip::after {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-bottom-color: black;
+}
+
+.tooltip.show {
+  opacity: 1;
+}
+.left-css .el-tabs__item.is-active:after{
+  width: 2px;
+  height: 20px!important;
+  margin-top: -22px!important;
+  margin-left: -10px;
+}
+.left-css .el-tabs__item.is-left {
+  text-align: left!important;
+}
+.left-css .el-tabs__header.is-left{
+  margin-right: 0!important;
+  margin-left: 10px!important;
+}
+</style>

package/src/index.js

@@ -3,10 +3,12 @@ import fitlers from './filters/index'
 import repairEl from './utils/repairElementUI'
 // 导入组件
 import MyButton from '../packages/mybutton/index.js'
+import MainPage from '../packages/main-page/index.js'
 
 // 存储组件列表
 const components = [
-  MyButton
+  MyButton,
+  MainPage
 ]
 
 // 定义 install 方法，接收 Vue 作为参数
@@ -36,5 +38,6 @@ export default {
 export {
   // 以下是具体的组件列表
   MyButton,
+  MainPage,
   repairEl
 }