<template>
    <div class="nus_imgc">
        <nu-aspect
            v-if="imgUrl"
            @click="_onClick"
            @tap="_onTap"
            :aspect="aspect"
            :className="className"
            class="nu_img-wrap">
            <img
                class="nu_imgc-img"
                v-if="isLazy"
                v-lazy="myLazyOptions"
                alt="" />
            <img
                class="nu_imgc-img"
                v-else
                :src="imgUrl"
                alt="" />
            <slot></slot>
        </nu-aspect>
    </div>
</template>

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

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

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';
.nus_imgc {
    font-size: 0;// 防止两个图片垂直之间有间距
    .nu_imgc-img {
        display: inline-block;
        margin: 0 auto;
        line-height: 1;
        max-width: 100%;
        max-height: 100%;
        font-size: 0;
    }
}
</style>
