<template>
    <div class="nus_imgb">
        <nu-aspect
            v-if="imgUrl"
            @click="_onClick"
            @tap="_onTap"
            :aspect="aspect"
            class="nu_img-wrap">
            <div
                class="nu_imgb-img"
                v-if="isLazy"
                v-lazy.bg="myLazyOptions">
                <slot></slot>
            </div>
            <div
                class="nu_imgb-img"
                :style="{backgroundImage:'url('+ imgUrl +')'}"
                v-else>
                <slot></slot>
            </div>
        </nu-aspect>
    </div>
</template>

<script>
import ImgTmp from '../_comm/ImgTmp';
import NuAspect from '../../aspect';

export default {
    extends: ImgTmp,
    name: 'NuImgb',
    components: {
        NuAspect
    },
    props: {
        // 纵横比
        aspect: {
            type: [String, Number]
        }
    }
};
</script>

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';
.nus_imgb {
    line-height: 1;
    font-size: 0;
    .nu_imgb-img {
        display: inline-block;
        margin: 0 auto;
        line-height: 1;
        width: 100%;
        background: no-repeat center / 100% 100%;
        font-size: $fontSizeDefault;
        height: 100%;
    }
    .nus_aspect {
        .nu_imgb-img{
            height: 100%;
        }
    }
}
</style>
