diff --git a/CHANGELOG.md b/CHANGELOG.md index d220403..501f93a 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to `vue-tabs-component` will be documented in this file +## 1.5.0 - 2018-06-06 +- Fixed bug #32 `changed` event fires twice on each change +- Added `clicked` event, fires when active tab is clicked + ## 1.4.0 - 2017-11-06 - Added `isDisabled` prop to `Tab` diff --git a/README.md b/README.md index e6e05bb..29e2eec 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# A Vue component to easily render tabs +# A Vue component to easily render tabs [![Latest Version on NPM](https://img.shields.io/npm/v/vue-tabs-component.svg?style=flat-square)](https://npmjs.com/package/vue-tabs-component) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md) @@ -8,10 +8,10 @@ The package contains a [Vue](https://vuejs.org/) component to easily display some tabs. This is how they can be used: - += ```html
- + This is the content of the first tab @@ -122,6 +122,34 @@ When using with other libraries that use the url fragment, you can disable modif ``` +### Callbacks +Tabs has two events to which you can bind: `changed` and `clicked` + +```html + + ... + +``` + +```js +export default { + ... + methods: { + ... + tabClicked (selectedTab) { + console.log('Current tab re-clicked:' + selectedTab.tab.name); + }, + tabChanged (selectedTab) { + console.log('Tab changed to:' + selectedTab.tab.name); + }, + ... + } +} +``` + +`changed` is emitted when the tab changes and can be used as handle to load data on request. +`clicked` is emitted when an active tab is re-clicked and can be used to e.g. reload the data in the current tab. + ### Adding a suffix and a prefix to the tab name You can add a suffix and a prefix to the tab by using the `suffix` and `prefix` attributes. diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue index 91c4a1f..aea95c0 100644 --- a/src/components/Tabs.vue +++ b/src/components/Tabs.vue @@ -45,6 +45,7 @@ data: () => ({ tabs: [], activeTabHash: '', + lastActiveTabHash: '', }), computed: { @@ -98,13 +99,18 @@ return; } + if (this.lastActiveTabHash === selectedTab.hash) { + this.$emit('clicked', { tab: selectedTab }); + return; + } + this.tabs.forEach(tab => { tab.isActive = (tab.hash === selectedTab.hash); }); this.$emit('changed', { tab: selectedTab }); - this.activeTabHash = selectedTab.hash; + this.lastActiveTabHash = this.activeTabHash = selectedTab.hash; expiringStorage.set(this.storageKey, selectedTab.hash, this.cacheLifetime); },