移动端安卓文字垂直居中向上偏移解决方案

移动端文字垂直居中向上偏移解决方案

解决方案:
不使用line-height进行垂直居中
使用 transform scale 缩放操作

注意：既然使用缩放，则所有的大小，宽高数值扩大一倍;

基于vue封装的badge组件,
作用: 给一个值，自动定位到右上角，如果值大于99，则显示 99+， 如果为空或者零，则不显示角标

显示效果



![在这里插入图片描述](https://img-blog.csdnimg.cn/20190318165954558.png
使用方式：

<Badge :num="item.count">
    <Icon :name="item.icon" class="p-icon" slot="content"/>
</Badge>

代码:

<style lang="stylus">
    @import "~@assets/css/define.styl";
    .c-badge {
        position: relative;
        display: inline-block;
        .c-num-content {
            position: absolute;
            top: -52px;
            right: 80px;
            width: 80px;
            height: 80px;
            color: $white;
            font-size: 42px;
            transform: scale(.5);
            border-radius: 100%;
            background-color: $red;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            >i {
                font-style: normal;
                font-size: 30px;
            }
        }
    }
</style>

<template lang="html">
    <div class="c-badge">
        <span class="c-num-content" v-if="num && display">{{currentValue}}<i v-if="show">+</i></span>
        <slot name="content"></slot>
    </div>
</template>

<script>
export default {
    name: 'Badge',
    props: {
        num: [Number, String],
        display: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            show: false
        };
    },
    computed: {
        currentValue: function () {
            if (this.num === '') return
            if (this.num > 99) {
                this.show = true
                return '99'
            } else {
                this.show = false
                return this.num
            }
        }
    },
    methods: {
    }
}
</script>

参考链接-点一哈