diff --git a/README.md b/README.md index 10e0817..fd9770a 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,25 @@ __markdown content__ ~~~ +### With options +If you have a lot of tabbed sections in your documentation you might want +to see all of them switch together when one is changed. +To enable this behavior, just set the `sync` option to `true`: + +```js +module.exports = { + // Your remaining configuration ... + plugins: [ + [ + 'vuepress-plugin-element-tabs', + { + sync: true, + }, + ], + ], +} +``` + ## Documents > Accepted Value Like That ~~~md diff --git a/index.js b/index.js index 69b7511..1c779cb 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,9 @@ const path = require('path') module.exports = (options, context) => ({ + extendPageData($page) { + $page.elementTabsOptions = options + }, enhanceAppFiles: [ path.resolve(__dirname, './lib/client.js') ], @@ -9,8 +12,8 @@ module.exports = (options, context) => ({ }, chainMarkdown (config) { config - .plugin('@superbiger/tabs') - .use(require('./lib/markdownItPlugin'), [options]) - .end() + .plugin('@superbiger/tabs') + .use(require('./lib/markdownItPlugin'), [options]) + .end() } }) \ No newline at end of file diff --git a/lib/components/Tabs.vue b/lib/components/Tabs.vue index 60ceda1..c334c94 100644 --- a/lib/components/Tabs.vue +++ b/lib/components/Tabs.vue @@ -7,7 +7,14 @@ }, props: { type: String, - activeName: String, + activeName: { + type: String, + default () { + if (typeof localStorage !== 'undefined') { + return localStorage.getItem('vuepress-plugin-element-tabs@activeId'); + } + } + }, closable: Boolean, addable: Boolean, value: {}, @@ -65,7 +72,15 @@ handleTabClick(tab, tabName, event) { if (tab.disabled) return; this.setCurrentName(tabName); + if (Array.every([ + this.$page.elementTabsOptions, + this.$page.elementTabsOptions.sync, + typeof localStorage !== 'undefined' + ])) { + localStorage.setItem('vuepress-plugin-element-tabs@activeId', tabName); + } this.$emit('tab-click', tab, event); + this.$root.$emit('tab-change', tabName, tab, event); }, handleTabRemove(pane, ev) { if (pane.disabled) return; @@ -162,6 +177,13 @@ }, created() { + if (this.$page.elementTabsOptions.sync) { + this.$root.$on('tab-change', (tabName, tab, event) => { + this.setCurrentName(tabName) + }); + } else if (typeof localStorage !== 'undefined') { + localStorage.removeItem('vuepress-plugin-element-tabs@activeId') + } if (!this.currentName) { this.setCurrentName('0'); }