Awesome
English | ็ฎไฝไธญๆ
<p align="center"> <a href="https://bhuh12.github.io/vue-router-tab/" target="_blank" rel="noopener noreferrer"> <img width="100" src="public/img/logo.png" alt="vue-router-tab logo"> </a> </p> <p align="center"> <a target="_blank" href="https://www.travis-ci.org/bhuh12/vue-router-tab"> <img src="https://www.travis-ci.org/bhuh12/vue-router-tab.svg" alt="Build"> </a> <a href="https://github.com/vuejs/vue"> <img src="https://img.shields.io/badge/vue-2.5.22-brightgreen.svg" alt="vue"> </a> <a href="https://github.com/vuejs/vue-router"> <img src="https://img.shields.io/badge/vue--router-3.0.1-brightgreen.svg" alt="vue-router"> </a> <a target="_blank" href="https://github.com/bhuh12/vue-router-tab"> <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/bhuh12/vue-router-tab.svg"> </a> </p> <p align="center"> <a target="_blank" href="https://www.npmjs.com/package/vue-router-tab"> <img src="https://img.shields.io/npm/v/vue-router-tab.svg" alt="Version"> </a> <a target="_blank" href="https://npmcharts.com/compare/vue-router-tab?minimal=true"> <img src="https://img.shields.io/npm/dm/vue-router-tab.svg" alt="Downloads"> </a> <a target="_blank" href="https://www.npmjs.com/package/vue-router-tab"> <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/vue-router-tab.svg?label=gzip:JS"> </a> <a target="_blank" href="https://www.npmjs.com/package/vue-router-tab"> <img alt="gzip size: css" src="http://img.badgesize.io/https://unpkg.com/vue-router-tab/dist/lib/vue-router-tab.css?compression=gzip&label=gzip:CSS"> </a> <a target="_blank" href="https://github.com/bhuh12/vue-router-tab/blob/main/LICENSE"> <img src="https://img.shields.io/npm/l/vue-router-tab.svg" alt="License"> </a> </p> <h2 align="center">Vue Router Tab</h2>Vue.js tab components, based on Vue Router.
๐ Features
โ Open or switch to tabs responding to route change
โ Tabs mouse wheel scrolling
โ Tabs drag sort
โ Tab Operations: open, switch, close, refresh, reset
โ Iframe tab: for external website
โ Customized๏ผtransition, slot, contextmenu
โ I18n
โ Keep scroll position after tab switching
โ Cache control: tab rules, cacheable, maximum keep alive, reusable
โ Dynamic Tab Info: title, icon, tooltip
โ Initial Tabs: initially opened tabs when entering page
โ Restore Tabs: reopen tabs after browser refresh
โ Nuxt Support
๐ Links
๐ Installation
๐ Documentation (Gitee)
๐บ Online Demo (Gitee)
๐จโ๐ป Sample Project
๐ Changelog
๐ท NPM Task
| Task | Command | Description |
|---|---|---|
| Lib build | yarn lib:build | |
| Lib build and generate report | yarn lib:build:report | |
| Lib publish | yarn lib:publish | change version in package.json |
| Demo develop | yarn demo:dev | |
| Demo build | yarn demo:build | |
| Document develop | yarn docs:dev | |
| Document build | yarn docs:build | |
| Code format check and fix | yarn lint | |
| Commit code | yarn commit |
License
Copyright (c) 2019-present, ็ขงๆตทๅนฝ่น