Vuejs-Vue tab: vue-swipe-tabs - A touch swipe tab component for vue.js(vue2).

vue-tab - swipe tab simplify


This component is already used in production env.

Overview

vue-tab is a touch swipe tab for vue.js.

Install

npm install --save [email protected]

Import using module

use this code in app.js(entry js):

import Tab from 'vue-swipe-tab';
Vue.use(Tab);

Usage

<script>
    export default {
        methods: {
        changePage(idx) {
            console.log(idx);
        }
    }
}
</script>

<template>
    <div class="app">
        <Tabs @changePage="changeFunc" indexTab="friend">
            <TabPanel label="好友榜" hash="friend" fontsize="36" tabheight="90" color="red">
                <div class="first"></div>
            </TabPanel>
            <TabPanel label="全省榜" hash="convince" fontsize="36" tabheight="90" color="red">
                <div class="second"></div>
            </TabPanel>
            <TabPanel label="全国榜" hash="country" fontsize="36" tabheight="90" color="red">
                <div class="three"></div>
            </TabPanel>
        </Tabs>
    </div>
</template>

Options

Here list Props on swipe component

Option Description
label Required, the text of tab header
hash Required, the hash of tab page
indexTab set the index tab by tab's hash
color set the color of tab header cursor
fontSize String, the fontSize of tab Header, is caculated by rem
tabheight String, the tabHeight of tabHeader, is caculated by rem
changePage Event, it will be fired after the page change, you can get the currentPage index in the callback function

Live Demo

https://zhangxiang958.github.io/vue-tab/demo/index.html

License

MIT License

Copyright (c) 2017 Shawn Cheung

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


Contact

Comments

  • 三个tab,点击中间那个总是弹回原来的
    三个tab,点击中间那个总是弹回原来的

    Nov 15, 2017

                                                                                                                                                                                                           
    Reply
  • Installation to use inside one component
    Installation to use inside one component

    Mar 24, 2019

    It would be good to add to the documentation that you can load this component from inside another importing it as:

    import Tabs from 'vue-swipe-tab/lib/index.vue'; import TabPanel from 'vue-swipe-tab/lib/tab.vue';

    Thanks for your component.

    Reply
  •  Whenever I use this component, he will report an error. I don't know how to solve it. Can you help me? The following is the error.
    Whenever I use this component, he will report an error. I don't know how to solve it. Can you help me? The following is the error.

    May 17, 2019

    Failed to mount component: template or render function not defined.

    found in

    --->

    Reply
  • Unexpected token <
    Unexpected token <

    Nov 4, 2019

    After installation npm install --save [email protected]

    And:

    import Tab from 'vue-swipe-tab';
    Vue.use(Tab);
    

    Without inserting any code I get as the only output in the screen:

    Unexpected token <

    Reply
  • chore: remove unuse
    chore: remove unuse

    May 27, 2020

                                                                                                                                                                                                           
    Reply
  • 不知道为什么我用的出错了
    不知道为什么我用的出错了

    Dec 27, 2019

    ![Uploading K)VMX792YNSA]KB3VNTK6(H.png…]() Uploading X_)H13YC1J_VYZ`I32FSZ(F.png…

    Reply
  • 没有webpack.config.js?
    没有webpack.config.js?

    Mar 12, 2018

    配置文件呢 大哥? 要自己凑?

                                                                                                                                                                                                           
    Reply
  • not working????
    not working????

    Dec 29, 2017

                                                                                                                                                                                                           
    Reply
  • vue-swipe-tab not working in standard vue-cli vue-webpack template environment
    vue-swipe-tab not working in standard vue-cli vue-webpack template environment

    Oct 18, 2017

    Please fix your code example in README.MD because it does not work. I currently fail to use your component.

    You advise to import Tab from 'vue-swipe-tab'; but you are actually using a custom element <tabs> in your template. Please show working code.

    In your demo code you are instead using

    import { Tabs, Tab } from './Tab';

    and then in the components property:

    components: { Tabs, Tab }

    both of which are commented out in your demo code (why?).


    This is how I tried to make it work:

    import { Tabs, Tab } from 'vue-swipe-tab';

    components: { Tabs, Tab }

    methods: { tabChange(idx) { console.log(idx); }

    <Tabs @changePage="tabChange" indexTab="friend">
                                <TabPanel
                                    label="好友榜"
                                    hash="friend"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="first">1</div>
                                </TabPanel>
                                <TabPanel
                                    label="全省榜"
                                    hash="convince"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="second">2</div>
                                </TabPanel>
                                <TabPanel
                                    label="全国榜"
                                    hash="country"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="three">3</div>
                                </TabPanel>
                            </Tabs>
    

    but that just gives me

    [Vue warn]: Unknown custom element: <Tabs> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    and

    [Vue warn]: Unknown custom element: <TabPanel> - did you register the component correctly? For recursive components, make sure to provide the "name" option.


    2nd try:

    import Tabs from 'vue-swipe-tab'; import Tab from 'vue-swipe-tab';

    and then

    <Tabs @changePage="tabChange" indexTab="friend">
                                <Tab
                                    label="好友榜"
                                    hash="friend"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="first">1</div>
                                </Tab>
                                <Tab
                                    label="全省榜"
                                    hash="convince"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="second">2</div>
                                </Tab>
                                <Tab
                                    label="全国榜"
                                    hash="country"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="three">3</div>
                                </Tab>
                            </Tabs>
    

    gives me

    [Vue warn]: Failed to mount component: template or render function not defined.

    twice in the console.

    Reply