fix install

.npmignore

@@ -1,7 +1,6 @@
 .DS_Store
 node_modules/
 examples/
-packages/
 public/
 dist/
 vue.config.js

examples/App.vue

@@ -10,6 +10,11 @@
         </button>
       </a>
     </p>
+    <h2>Custom props</h2>
+    <p>
+      <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-save.vue" target="_blank">code</a>
+    </p>
+    <example-key />
     <h2>Default</h2>
     <p>
       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example.vue" target="_blank">code</a>
@@ -44,10 +49,11 @@ import ExampleDark from './example/example-dark'
 import ExampleCustom from './example/example-custom'
 import ExampleInsert from './example/example-insert'
 import ExampleSave from './example/example-save'
+import ExampleKey from './example/example-key'
 
 export default {
   name: 'app',
-  components: { Example, ExampleDark, ExampleCustom, ExampleInsert, ExampleSave }
+  components: { Example, ExampleDark, ExampleCustom, ExampleInsert, ExampleSave, ExampleKey }
 }
 </script>
 
@@ -98,7 +104,7 @@ a {
 }
 
 .btns {
-  padding: 50px;
+  padding: 50px 30px;
 }
 
 button {

examples/example/example-key.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="content">
+    <vue-tabs-chrome ref="tab" v-model="tab" :tabs="tabs" :props="{ key: 'meta.key', label: 'meta.title' }" />
+    <div class="btns">
+      <button @click="addTab">New Tab</button>
+      <button @click="removeTab">Remove active Tab</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tab: 'hello1',
+      tabs: [
+        {
+          label: 'google',
+          key: 'google',
+          favico: require('../assets/google.jpg'),
+          meta: {
+            key: 'hello1'
+          }
+        },
+        {
+          label: 'facebook',
+          key: 'facebook',
+          favico: require('../assets/fb.jpg'),
+          meta: {
+            key: 'hello2'
+          }
+        },
+        {
+          label: 'New Tab',
+          key: 'costomKey',
+          favico: (h, { tab, index }) => {
+            return h('span', { style: { color: 'red' } }, '*')
+          },
+          meta: {
+            title: 'aaa',
+            key: 'hello3'
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    addTab () {
+      let item = 'tab' + Date.now()
+      let newTabs = [
+        {
+          label: 'New Tab',
+          key: item,
+          meta: {
+            key: item
+          }
+        }
+      ]
+      this.$refs.tab.addTab(...newTabs)
+      this.tab = item
+    },
+    removeTab () {
+      this.$refs.tab.removeTab(this.tab)
+    }
+  }
+}
+</script>

examples/example/example.vue

@@ -23,6 +23,13 @@ export default {
           label: 'facebook',
           key: 'facebook',
           favico: require('../assets/fb.jpg')
+        },
+        {
+          label: 'New Tab',
+          key: 'costomKey',
+          favico: (h, { tab, index }) => {
+            return h('span', tab.label)
+          }
         }
       ]
     }

packages/render-temp.vue

@@ -0,0 +1,18 @@
+<script>
+export default {
+  name: 'render-temp',
+  props: {
+    render: {
+      type: Function,
+      default: () => {}
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  render (h) {
+    return this.render && this.render(h, { ...this.params })
+  }
+}
+</script>

packages/vue-tabs-chrome.vue

@@ -8,8 +8,8 @@
       )
       .tabs-item(
         v-for="(tab, i) in tabs"
-        :class="[{ active: tab[tabKey] === value }, `tab-${tab[tabKey]}`]"
-        :key="tab[tabKey]"
+        :class="[{ active: getKey(tab) === value }, `tab-${getKey(tab)}`]"
+        :key="getKey(tab)"
         :style="{ width: tabWidth + 'px' }"
         @contextmenu="e => handleMenu(e, tab, i)"
       )
@@ -31,20 +31,20 @@
               :params="{ tab, index: i }"
             )
             img(v-else-if="tab.favico" :src="tab.favico")
-          span.tabs-label {{ tab[tabLabel] }}
+          span.tabs-label {{ tab | tabLabelText(tabLabel) }}
     .tabs-footer
 </template>
 
 <script>
 import Draggabilly from 'draggabilly'
-import Vue from 'vue'
+import RenderTemp from './render-temp'
 
 const getInstanceAt = (tabs, tab, tabWidth, tabKey, gap) => {
   let halfWidth = (tabWidth - gap) / 2
   let x = tab._instance.position.x
   for (let i = 0; i < tabs.length; i++) {
     let targetX = tabs[i]._x - 1
-    if (tab[tabKey] === tabs[i][tabKey]) continue
+    if (getKey(tab, tabKey) === getKey(tabs[i], tabKey)) continue
     // in range
     if (targetX <= x && x < targetX + halfWidth / 2) {
       // before range
@@ -69,24 +69,24 @@ const getInstanceAt = (tabs, tab, tabWidth, tabKey, gap) => {
   }
 }
 
-Vue.component('render-temp', {
-  props: {
-    render: {
-      type: Function,
-      default: () => {}
-    },
-    params: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  render (h) {
-    return this.render && this.render(h, { ...this.params })
-  }
-})
+const getParams = (tab, keyStr) => {
+  let keys = keyStr.split('.')
+  let label = tab
+  keys.forEach(key => {
+    label = label[key]
+  })
+  return label
+}
+
+const getKey = (tab, tabKey) => {
+  return getParams(tab, tabKey)
+}
 
 export default {
   name: 'vue-tabs-chrome',
+  components: {
+    RenderTemp
+  },
   props: {
     value: {
       type: [String, Number],
@@ -128,6 +128,11 @@ export default {
       tabWidth: null
     }
   },
+  filters: {
+    tabLabelText (tab, tabLabel = '') {
+      return getParams(tab, tabLabel)
+    }
+  },
   computed: {
     tabKey () {
       return this.props.key || 'key'
@@ -169,7 +174,7 @@ export default {
         return
       }
       let $content = this.$refs.content
-      let $el = $content.querySelector(`.tab-${tab[tabKey]}`)
+      let $el = $content.querySelector(`.tab-${getKey(tab, tabKey)}`)
       tab._instance = new Draggabilly($el, { axis: 'x', containment: $content, handle: '.tabs-main' })
       let x = (tabWidth - gap * 2) * i
       tab._x = x
@@ -181,7 +186,7 @@ export default {
     addTab (...tabs) {
       let { insertToAfter, value, tabKey } = this
       if (insertToAfter) {
-        let i = this.tabs.findIndex(tab => tab[tabKey] === value)
+        let i = this.tabs.findIndex(tab => getKey(tab, tabKey) === value)
         this.tabs.splice(i + 1, 0, ...tabs)
       } else {
         this.tabs.push(...tabs)
@@ -200,7 +205,7 @@ export default {
         targetTab = this.tabs[index]
       } else {
         tabs.forEach((tab, i) => {
-          if (tab[tabKey] === key) {
+          if (getKey(tab, tabKey) === key) {
             index = i
             targetTab = tab
           }
@@ -222,16 +227,16 @@ export default {
     },
     handleDelete (tab, i) {
       let { tabKey, tabs, value } = this
-      let index = tabs.findIndex(item => item[tabKey] === value)
+      let index = tabs.findIndex(item => getKey(item, tabKey) === value)
       let after, before
       if (i === index) {
         after = tabs[i + 1]
         before = tabs[i - 1]
       }
       if (after) {
-        this.$emit('input', after[tabKey])
+        this.$emit('input', getKey(after, tabKey))
       } else if (before) {
-        this.$emit('input', before[tabKey])
+        this.$emit('input', getKey(before, tabKey))
       } else if (tabs.length <= 1) {
         this.$emit('input', null)
       }
@@ -249,7 +254,7 @@ export default {
     },
     handlePointerDown (e, tab, i) {
       let { tabKey } = this
-      this.$emit('input', tab[tabKey])
+      this.$emit('input', getKey(tab, tabKey))
     },
     handleDragMove (e, moveVector, tab, i) {
       let { tabWidth, tabs, tabKey, gap } = this
@@ -276,10 +281,10 @@ export default {
       let { tabKey, tabs } = this
       let index, targetIndex
       for (let i = 0; i < tabs.length; i++) {
-        if (tab[tabKey] === tabs[i][tabKey]) {
+        if (getKey(tab, tabKey) === getKey(tabs[i], tabKey)) {
           index = i
         }
-        if (targetTab[tabKey] === tabs[i][tabKey]) {
+        if (getKey(targetTab, tabKey) === getKey(tabs[i], tabKey)) {
           targetIndex = i
         }
       }
@@ -311,6 +316,9 @@ export default {
         delete item._x
         return item
       })
+    },
+    getKey (tab) {
+      return getKey(tab, this.tabKey)
     }
   }
 }

vue.config.js

@@ -4,7 +4,9 @@ function resolve (dir) {
 }
 module.exports = {
   lintOnSave: false,
-  productionSourceMap: false,
+  css: {
+    extract: false
+  },
   publicPath: process.env.NODE_ENV === 'production'
     ? '/vue-tabs-chrome/'
     : '/',
@@ -29,5 +31,15 @@ module.exports = {
   chainWebpack: (config) => {
     config.resolve.alias
       .set('@', resolve('examples/assets'))
+    config.module
+      .rule('js').include
+      .add('/packages')
+      .end()
+    //   .use('babel')
+    //   .loader('babel-loader')
+    //   .tap(options => {
+    //     // 修改它的选项...
+    //     return options
+    //   })
   }
 }