vue自定义标签栏

最新推荐文章于 2024-06-13 16:29:21 发布

小菜鸟and小白

最新推荐文章于 2024-06-13 16:29:21 发布

阅读量195

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45985112/article/details/138501146

版权

由于elementUI不能满足需求，自己做一个自定义的标签栏

template部分

<div class="Tabchoice">
                    <div class="tabs">
                        <div :class="activeind==index?'plan-content':'plan-contents'" v-for="(item, index) in tabsArr"
                            :key="item.title" @click="saved(index)">
                            {{item.title}}
                            <i class="el-icon-close" v-if="activeind==index&&activeind!=0"
                                @click.stop="subtract(index)"></i>
                        </div>
                    </div>
                    <div class="addtab" @click="addtabs">
                        +
                    </div>
                </div>

data部分

tabsArr: [
                {
                    title: '道路1',
                    id: 0
                }
            ],
            activeind: 0,

methods部分

addtabs () {
            let num = this.tabsArr.length + 1;
            let nobj = {
                title: `道路${num}`,
            }
            this.tabsArr.push(nobj)
        },
        subtract (ind) {
            if (ind == 0) {
                return
            }
            this.tabsArr.splice(ind, 1)
            this.$nextTick(() => {
                this.activeind = 0
            })
        },
        saved (ind) {
            this.activeind = ind
        },

css部分

.Tabchoice {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.tabs {
    display: flex;
}
.plan-content {
    color: rgb(90, 166, 238);
    border-bottom: 2px solid rgb(90, 166, 238);
    padding: 10px 20px;
}
.plan-contents {
    color: black;
    border: none;
    padding: 10px 20px;
}
.addtab {
    font-size: 25px;
    cursor: pointer;
}

注：这样就可以做出一个自己的标签栏了