vue笔记（三）： badge徽章组件

徽章大多用在有新消息的时候，作为提示标识用，常见的二种展现方式：数字和小红点

思路：

徽章badge首先是一个没有宽高的行内元素容器标签组件

它有一些自定义prop参数

value是需要显示的数字值，

dot是否显示小红点，默认是显示数字，

max最大显示数字，超过这个值会自动在数字后面补上一个+号

组件容器div元素设置了相对定位，显示的子元素状态标识就是根据div做的绝对定位到右上角，并设置top和right距离，

使用的时候，把元素div放在徽章标签容器里即可

新建badge.vue

基本逻辑和样式都在这个文件里

html

<template>
    <div class="badge">
        <!-- 如果dot为false，默认显示数字 -->
        <span class="badge-mark text" ref="openbadgetext" v-if ="!dot" v-show="val">{{val}}</span>
        <!-- 如果dot为true，显示小红点 -->
        <span class="badge-mark dot" ref="openbadgedot" v-else  v-show="val"></span>
        <div class="badge-box" >
            <slot>  </slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Badge',
        props: {
            value: {
                type: Number,
                default: 50
            },
            max: {
                type: Number,
                default: 99
            },
            dot: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return{
                val: '',
            }
        },
        mounted(){
            this.filter();
        },
        methods:{
            // 负责处理props参数value的初始化处理
            filter(){
                //大于最大值时，值为最大值后跟+
                if(this.value > this.max){
                    this.val = this.max + '+';
                }else{
                    //小于0时，值等于0
                    if(this.value < 0){
                        this.val = 0;
                        return;
                    }
                    this.val = this.value；
                }
            }
        }

    }
</script>

<style scoped>
    .badge{
        display: inline-block;
        position: relative;
    }
    .empty-box{
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .badge-mark{
        display: inline-block;
        position: absolute;
        right: 0;
        top: -9px;
        transform: translateX(50%);
        background: #f56c6c;
        z-index: 99;
    }
    .text{
        height: 18px;
        line-height: 18px;
        padding: 0 6px;
        border-radius: 9px;
        color: #ffffff;
        font-size: 10px;
    }
    .dot{
        top: -5px;
        height: 10px;
        width: 10px;
        border-radius: 50%;
    }
</style>

<template>
    <div class="badge">
        <!-- 如果dot为false，默认显示数字 -->
        <span class="badge-mark text" ref="openbadgetext" v-if ="!dot" v-show="val">{{val}}</span>
        <!-- 如果dot为true，显示小红点 -->
        <span class="badge-mark dot" ref="openbadgedot" v-else  v-show="val"></span>
        <div class="badge-box" >
            <slot>  </slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Badge',
        props: {
            value: {
                type: Number,
                default: 50
            },
            max: {
                type: Number,
                default: 99
            },
            dot: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return{
                val: '',
            }
        },
        mounted(){
            this.filter();
        },
        methods:{
            // 负责处理props参数value的初始化处理
            filter(){
                //大于最大值时，值为最大值后跟+
                if(this.value > this.max){
                    this.val = this.max + '+';
                }else{
                    //小于0时，值等于0
                    if(this.value < 0){
                        this.val = 0;
                        return;
                    }
                    this.val = this.value；
                }
            }
        }

    }
</script>

<style scoped>
    .badge{
        display: inline-block;
        position: relative;
    }
    .empty-box{
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .badge-mark{
        display: inline-block;
        position: absolute;
        right: 0;
        top: -9px;
        transform: translateX(50%);
        background: #f56c6c;
        z-index: 99;
    }
    .text{
        height: 18px;
        line-height: 18px;
        padding: 0 6px;
        border-radius: 9px;
        color: #ffffff;
        font-size: 10px;
    }
    .dot{
        top: -5px;
        height: 10px;
        width: 10px;
        border-radius: 50%;
    }
</style>

调用

html

import badge from '@/components/widget/badge.vue'
 // 默认显示数字
<badge>
    <button></button>
</badge>
<span style="margin-right: 20px;"></span>
//显示小红点
<badge :dot="true">
    <button></button>
</badge>
//显示数字并设置最大值
//最大值50 设置value为100
<badge :max="50" :value="1">
    <button></button>
</badge>

import badge from '@/components/widget/badge.vue'
 // 默认显示数字
<badge>
    <button></button>
</badge>
<span style="margin-right: 20px;"></span>
//显示小红点
<badge :dot="true">
    <button></button>
</badge>
//显示数字并设置最大值
//最大值50 设置value为100
<badge :max="50" :value="1">
    <button></button>
</badge>

运行结果

本文到此结束。

反馈信息

INFO

邮箱： open_teams@163.com

vue笔记（三）： badge徽章组件 ​

反馈信息 ​

vue笔记（三）： badge徽章组件

反馈信息