132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
<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>
|