【uniapp】文本缩略显示&img自适应

插件地址
TextEllipsis插件：TextEllipsis插件地址
imageAdaptation插件：imageAdaptation插件

效果图

VUE

<template>
<view>
	<uni-navbar fixed="true" title="文本缩略显示&img自适应" backgroundColor="#4683ff" color="#ffffff">
		<view slot='left' class="pd-l-20 nav_left" @click="navBack()">
			<image src="/static/images/back2.png"></image>
		</view> 
	</uni-navbar>
	<view class="mg-t-20">
		<view class="pd-l-30 pd-tb-7 border font-34 bold">文本缩略显示</view>
		<view class="pd-30">
			<text-ellipsis :text='text'></text-ellipsis>
		</view>
	</view>
	<view class="mg-t-20">
		<view class="pd-l-30 border font-34 bold">img自适应</view>
		<view class="pd-20">
			<view class="c-99 font-30">一张图片</view>
			<imageAdaptation :imgList="imgLayout1"></imageAdaptation>
			<view class="c-99 font-30 mg-t-20">两张图片</view>
			<imageAdaptation :imgList="imgLayout2"></imageAdaptation>
			<view class="c-99 font-30 mg-t-20">多张图片</view>
			<imageAdaptation :imgList="imgList"></imageAdaptation>
		</view>
	</view>
</view>
</template>

<script>
import TextEllipsis from "@/components/text-ellipsis/text-ellipsis";
import imageAdaptation from "@/components/images-adaptation/imageAdaptation";
export default {
	components: { TextEllipsis, imageAdaptation },
	data() {
		return {
			text: '《火影忍者疾风传》根据漫画《火影忍者》的第二部（即单行本28卷开始的部分）改编而成，在《火影忍者》动画第一期结束后，于2007年2月15日开始在东京电视台播出，2017年3月23日正式完结。标题中的“疾风”则是主角鸣人的象征，既代表了他在作品中所拥有的“风”查克拉属性，也代表他如同疾风般勇往直前的性格',
			imgList: [
				'https://wx1.sinaimg.cn/orj360/006XkLK8ly1gsbt0r9uzkj31ck1ww1l2.jpg',
				'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gsr1qca7kaj31ck1ww7wh.jpg',
				'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gsz4c61nysj31ck1ww000.jpg',
				'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gt71b3qivqj31ck1ww7ju.jpg',
				'https://wx1.sinaimg.cn/orj360/c6d57fcaly1gtwxviygtmj20u016kdn6.jpg',
				'https://wx1.sinaimg.cn/orj360/006XkLK8ly1gsb6xkv22sj31ck1ww7wk.jpg',
				'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gsqr8xv7b4j31ck1ww4qp.jpg',
				'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gsi71c5qs0j31ck1ww7wi.jpg',
				'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gtg6nf1wmij61ck1ww7wh02.jpg'
			],
			imgLayout1: [ 'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gs76nnncnij31ck1wwnpe.jpg' ],
			imgLayout2: [
				'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gsi77s573wj31ck1wwhdv.jpg',
				'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gskwdqefe8j31ck1wwqv5.jpg',
			],
		};
	},
	methods: {
		
	}
}
</script>

<style lang="scss">
.border{
	border-left: 10rpx solid #4683ff;
}
</style>