如图所示,有没有办法将99+那个气泡显示到标签页上面

回答

<template>
    <div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane name="second">
                <template slot="label">
                    <div>
                        <span>待付款</span>
                        <div>99+</div>
                    </div>
                </template>
                待付款
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                activeName: 'second'
            }
        }
    }
</script>

<style lang="scss" scoped>
.relative {
    position: relative;
}
.count {
    width: fit-content;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    background-color: #ff4f4f;
    position: absolute;
    top: 0px;
    right: -20px;
}
</style>

具体的样式和位置自己再根据需求详细调整吧~

以上是如图所示,有没有办法将99+那个气泡显示到标签页上面的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>