//detail
<template>
    <transition name="fade">
        <div class="detail-wrap" v-show="isToShow">
            <h1 class="title">{{seller.name}}</h1>
            <section class="star">
                <v-grade :score="seller.score"/>
            </section>
        </div>
    </transition> 
</template>
<script>
import grade from 'components/grade/grade.vue';
export default {
    name:'Detail',
    components:{
        'v-grade':grade
    },
    data() {
        return {
            data:'',
            isToShow: false
        }
    },
    props:{
        seller:{
            type:[Object,Array],
            default() {
                return {}
            }
        }
    },
    methods:{
        show(){
           this.isToShow = true; 
        }
    }
}
</script>
<style lang="scss" scoped>
.detail-wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(7,17,27,.8);
    .fade{
        &-enter-active,
        &-leave-active{
            transition: all .5s;
        }
        &-enter, 
        &-leave-to{
            opacity: 0;
        }
    }
}
</style>

在星星组件里，我设想获取星星组件的dom 宽度，将分数转化成宽度参数,通过点亮的星星遮罩没有点亮的星星，通过设置点亮星星外层wrap 宽度来达到一个点亮（这样可以达到不止半颗星星的填充效果），但是我在动态获取宽度时取
不到实际宽度，点击header 后弹出详情后 获取的星星组件dom 宽度为0，考虑边界问题，代码修改成如下，还是一样。当弹窗出来时，如下图 然后我修改下星星组件，代码保存，然后就能正确打印宽度
mounted(){
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …nsole.log(this.refs.starDom.offsetWidth);
});
}