for_client/src/components/imgPreview/NodeImg.vue

<template>
    <div :class="[ui, mode,filter?'filter-' + filter:'']" :style="[{ width: width }, { height: height }]" class="ui-img-box" @click="_imgClick">
        <img :class="mode" :src="src" alt="" class="ui-img" @error="_error" @load="_load"/>
    </div>
</template>

<script setup>
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    src: {
        type: String,
        default: ''
    },
    mode: {
        type: String,
        default: 'cover'
    },
    filter: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: 'auto'
    },
    height: {
        type: String,
        default: '140px'
    },
})
//事件
const emit = defineEmits(['load', 'error', 'imgClick']);
//图片加载完毕
const _load = () => {
    emit('load')
}
//图片加载出错
const _error = () => {
    emit('error')
}
//图片被点击
const _imgClick = () => {
    emit('imgClick', props.src)
}
</script>

<style lang="scss" scoped>
.ui-img-box {
    position: relative;
    width: auto;
    height: 140px;
    display: inline-block;
    z-index: 2;
    .ui-img {
        width: 100%;
        height: 100%;
        z-index: -1;
        border-radius: inherit;
    }
    &.cover {
        background-size: cover;
    }
}
</style>