如何切换tabbar的active？

anjia0532 commented 6 years ago

刚用vue，不太清楚如何操作，通过@click.native 么？弄了一下不好使

ydcss commented 6 years ago

根据 router-link 提供的 linkActiveClass 判断是否激活tabbar-item。 https://router.vuejs.org/zh-cn/api/options.html#linkactiveclass

anjia0532 commented 6 years ago

感谢回答，我想问的是，通过代码，切换激活tabbar,不是要获取当前已经激活的是哪个，我看了一下源码，确实有:active-class

https://github.com/ydcss/vue-ydui/blob/master/src/components/tabbar/src/tabbar-item.vue#L3

但是，如何通过点击来切换 tabbar-item？比如类似 setActiveIndex 来切换?

通过 :active="xxxx" @click.native="xxxx=!xxxx", 一个还行，多个的话，一块切换状态，很懵

ydcss commented 6 years ago

你好，通过点击事件切换目前确实是不支持。后期修复。感谢指出问题。

anjia0532 commented 6 years ago

好的，后端一枚，对vue不是很熟，对着文档，和源码，翻烂了，也实现不了，都快怀疑人生了，哈哈哈哈。非常感谢开源此框架，很赞的一个框架。

dyb23 commented 6 years ago

将active绑定到数组，在vue路由组件里利用beforeEnter判断点击了哪个link修改对应的数组值。

anjia0532 commented 6 years ago

@Duangyongbin 可以可以，强势强势，我试试看，感谢指点

authorz commented 5 years ago

原来不是我一个人碰见这个问题了哦！！看了楼上大佬提出的方法，我就不要脸的贴个笨方法吧，js基础不好！！！！还望大佬帮忙指正、优化一下代码！！

<yd-tabbar fixed padding="0.8rem">
                <yd-tabbar-item title="首页" link="/" :active="tabBarActive.Index" @click.native="TabBarAction('Index')">
                    <yd-icon name="home" slot="icon" size="1.2rem"></yd-icon>
                </yd-tabbar-item>
                <yd-tabbar-item title="普查" link="/census" :active="tabBarActive.Census" @click.native="TabBarAction('Census')">
                    <yd-icon name="like" slot="icon" size="1.2rem"></yd-icon>
                </yd-tabbar-item>
                <yd-tabbar-item title="商城" link="/mall" :active="tabBarActive.Mall" @click.native="TabBarAction('Mall')">
                    <yd-icon name="shopcart" slot="icon" size="1.2rem"></yd-icon>
                </yd-tabbar-item>
                <yd-tabbar-item title="个人中心" link="/user" :active="tabBarActive.User" @click.native="TabBarAction('Mall')">
                    <yd-icon name="ucenter-outline" slot="icon" size="1.2rem"></yd-icon>
                </yd-tabbar-item>
            </yd-tabbar>

export default {
        name: 'App',
        data(){
            return{
                tabBarActive:{
                    Index: true,
                    Census: false,
                    Mall: false,
                    User: false
                }
            }
        },
        component:{
            TabBar, TabBarItem
        },
        methods:{
            TabBarAction(item){
                for (let i in this.tabBarActive) {
                    this.tabBarActive[i] = false;
                    if (i== item) {
                        this.tabBarActive[i] = true;
                    }
                }
            }
        }
    }

ydcss / vue-ydui

如何切换tabbar的active？ #421