info

2025-03-21 09:38:06 +08:00
parent 69e24fd8ab
commit 587f29f707
224 changed files with 30186 additions and 0 deletions
@@ -0,0 +1,131 @@
+<template>
+	<view class="tui-overflow__text"
+		:class="[type==1?'tui-overflow__hidden':'',type==2 && !removeGradient?'tui-gradient__hidden':'',lineClamp==1 && type==1?'tui-text__nowrap':'']"
+		:style="{width:width,height:type==1?'auto':(removeGradient?'auto':height),padding:type==2?padding:'0',background:backgroundColor,fontSize:size+'rpx',color:color,fontWeight:bold?'bold':'normal','-webkit-line-clamp':type==1?lineClamp:'none',textOverflow:textOverflow}"
+		@tap="handleClick">
+		<slot></slot>
+		<view class="tui-gradient__box" :style="{background:getBgColor}" v-if="type==2 && !removeGradient"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tui-overflow-hidden",
+		props: {
+			//内容区域宽度
+			width: {
+				type: String,
+				default: '100%'
+			},
+			//内容区域高度，type=2时生效且需要传入具体值，高度值要低于实际内容高度
+			height: {
+				type: String,
+				default: 'auto'
+			},
+			//padding值，type=2时生效
+			padding: {
+				type: String,
+				default: '0'
+			},
+			//内容区域背景色
+			backgroundColor: {
+				type: String,
+				default: 'transparent'
+			},
+			//文本字体大小 rpx
+			size: {
+				type: [Number, String],
+				default: 32
+			},
+			//文本字体颜色
+			color: {
+				type: String,
+				default: '#333'
+			},
+			//文本内容是否加粗 
+			bold: {
+				type: Boolean,
+				default: false
+			},
+			//隐藏类型：1-文本超出设定行数隐藏，2-渐变隐藏
+			type: {
+				type: [Number, String],
+				default: 1
+			},
+			//超出多少行开始隐藏，type=1时生效
+			lineClamp: {
+				type: [Number, String],
+				default: 2
+			},
+			//clip|ellipsis|string,参考CSS text-overflow 属性
+			textOverflow: {
+				type: String,
+				default: 'ellipsis'
+			},
+			//渐变隐藏遮罩背景色,与页面或内容区域背景色保持一致
+			gradientColor: {
+				type: String,
+				default: '#fff'
+			},
+			//移除渐变隐藏，显示全部内容，type=2时生效
+			removeGradient: {
+				type: Boolean,
+				default: false
+			},
+			//索引值
+			index: {
+				type: Number,
+				default: 0
+			}
+		},
+		computed: {
+			getBgColor() {
+				return `-webkit-linear-gradient(top, rgba(255,255,255,0), ${this.gradientColor} 100%)`
+			}
+		},
+		methods: {
+			handleClick(e) {
+				this.$emit('click', {
+					index: this.index
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-overflow__text {
+		position: relative;
+		box-sizing: border-box;
+		flex-shrink: 0;
+	}
+
+	.tui-overflow__hidden {
+		display: -webkit-box;
+		overflow: hidden;
+		word-break: break-all;
+		white-space: normal;
+		-webkit-box-orient: vertical;
+
+	}
+
+	.tui-gradient__hidden {
+		display: block;
+		overflow: hidden;
+		word-break: break-all;
+	}
+
+	.tui-text__nowrap {
+		display: inline-block !important;
+		word-break: normal !important;
+		white-space: nowrap !important;
+	}
+
+	.tui-gradient__box {
+		width: 100%;
+		position: absolute;
+		top: 0;
+		height: 100%;
+		left: 0;
+	}
+</style>