@tongfun/tf-widget 0.1.7 → 0.1.8-beta

package/package/tf-layout/src/tf-layout.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="tf-layout">
+    <TfMenu :menu-info="menuInfo" />
+    <div class="tf-layout-subject">
+      <TfLaberBar @setCache="setCache" @deleteCache="deleteCache" />
+      <div class="tf-layout-subject-content">
+        <keep-alive :include="secondCacheArray">
+          <router-view />
+        </keep-alive>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TfMenu from './components/tf-menu'
+import TfLaberBar from './components/tf-labelbar'
+export default {
+  name: 'TfLayout',
+  components: {
+    TfMenu,
+    TfLaberBar
+  },
+  props: {
+    menuInfo: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      cacheMap: new Map(),
+      secondCacheArray: [],
+      thirdCacheArr: []
+    }
+  },
+  methods: {
+    setCache (value) {
+      this.cacheMap.set(value[2] || value[1], value[1])
+      this.initCacheArr()
+    },
+    initCacheArr () {
+      this.secondCacheArray.push(
+        ...this.arrayDiff([...this.cacheMap.values()], this.secondCacheArray)
+      )
+      this.thirdCacheArr.push(
+        ...this.arrayDiff([...this.cacheMap.keys()], this.thirdCacheArr)
+      )
+      this.$emit('setSecondCache', this.secondCacheArray)
+      this.$emit('setThirdCache', this.thirdCacheArr)
+    },
+    arrayDiff (arr, arrRaw) {
+      if (Array.isArray(arr)) {
+        return arr.filter((i) => {
+          return arrRaw.indexOf(i) < 0
+        })
+      }
+      return []
+    },
+    deleteCache (value) {
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          console.log(item)
+          this.cacheMap.delete(item[2] || item[1])
+          this.thirdCacheArr.splice(
+            this.thirdCacheArr.indexOf(item[2] || item[1]),
+            1
+          )
+          if ([...this.cacheMap.values()].indexOf(item[1]) === -1) {
+            this.secondCacheArray.splice(
+              this.secondCacheArray.indexOf(item[2]),
+              1
+            )
+          }
+          console.log(this.cacheMap.get(item[2] || item[1]))
+        })
+        this.$emit('setSecondCache', this.secondCacheArray)
+        this.$emit('setThirdCache', this.thirdCacheArr)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tf-layout {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  .tf-layout-subject {
+    flex: 1;
+    height: 100%;
+    width: 100vw;
+    .tf-layout-subject-content {
+      height: calc(100% - 35px);
+      background: rgb(241, 241, 241);
+      box-sizing: border-box;
+      padding: 5px 0 0 0;
+    }
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tongfun/tf-widget",
-  "version": "0.1.7",
+  "version": "0.1.8-beta",
   "description": "tf-widget",
   "main": "lib/tf-widget.umd.js",
   "private": false,

package/postinstall.js

@@ -1,10 +1,10 @@
-
-const BANNER = '\u001B[96mThank you for using tf-widget for polyfilling JavaScript standard library!\u001B[0m\n\n' +
-             '\u001B[96mWe need the best of you! Come and join us\n\n' +
-             '\u001B[96mWe are waiting for you\n'
-
-function showBanner () {
-  console.log(BANNER)
-}
-
-showBanner()
+
+const BANNER = '\u001B[96mThank you for using tf-widget for polyfilling JavaScript standard library!\u001B[0m\n\n' +
+             '\u001B[96mWe need the best of you! Come and join us\n\n' +
+             '\u001B[96mWe are waiting for you\n'
+
+function showBanner () {
+  console.log(BANNER)
+}
+
+showBanner()

package/src/index.js

@@ -1,10 +1,11 @@
 
 import TfWidget from '../package/tf-widget'
 import SvgIcon from '../package/svg-icon'
-
+import TfLayout from '../package/tf-layout'
 const components = [
   TfWidget,
-  SvgIcon
+  SvgIcon,
+  TfLayout
 ]
 
 const install = function (Vue) {
@@ -16,5 +17,6 @@ const install = function (Vue) {
 export default {
   install,
   TfWidget,
-  SvgIcon
+  SvgIcon,
+  TfLayout
 }