learning-system-portal/src/components/Article/articleImage.vue

<template>
	<!--用于显示课程的图片-->
	<div class="img-box" id="img-box">
      <el-image style="background-color: #eeeeee;" 
		:style="`width:${width};height:${height};`"
	  fit="fill	" 
		:src="imageUrl"></el-image>
		<p v-if="isShow" :class="imageTextSize? 'mini':'max'">{{article.title}}</p>
	</div>
	
</template>

<script>
	export default {
		props:{
			article:{
				type: Object,
				default:()=>{}
			},
			height:{
				type:String,
				default:'100%'
			},
			width:{
				type:String,
				default:'100%'
			}
		},
	
		computed:{
			imageUrl(){
				if(this.article && this.article.coverurl && this.article.coverurl!=''){
					return this.fileBaseUrl+this.article.coverurl;
				}else if((this.article && this.article.courseImage && this.article.courseImage!='')){
					return this.fileBaseUrl+this.article.courseImage;
				} else if(this.article.coverurl =='' || this.article.courseImage ==''){
					this.isShow = true;
                    return this.webBaseUrl + '/images/bgimg/article.png'
				}
			}
		},

		data() {
			return {
				imageText:'',//图片上面的文字
				fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
			    isShow :false,
				imageTextSize:false,
			}
		},
		mounted(){
			let obj = document.getElementById("img-box");
		    if(obj.offsetWidth < 160) {
				this.imageTextSize = true;
			} else {
				this.imageTextSize = false;
			}
		},
		methods:{
			imageError(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.img-box{
	position: relative;
	width: 100%;
	height: 100%;
	p{
		display: -webkit-box;
		// white-space:pre-wrap;
		overflow:hidden;
		// text-overflow:ellipsis;
		-webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
		word-break:break-all;
		color: #ffffff;
		position: absolute;
		padding-right: 10px;
	}
	.mini{
		top: 40px;
		left: 10px;
		font-size: 16px;
		line-height: 24px;
		-webkit-line-clamp: 2;
	}
	.max{
		top: 100px;
		left: 34px;
		font-size: 20px;
		line-height: 35px;
	    -webkit-line-clamp: 4;
	}
}
</style>