jiangyy
4 years ago
5 changed files with 438 additions and 242 deletions
@ -0,0 +1,135 @@ |
|||||
|
<template> |
||||
|
<div class="m-fold_text" :class="initOk ? '' : 'z-init'"> |
||||
|
<div |
||||
|
id="cnt" |
||||
|
ref="foldSlot" |
||||
|
class="fold_text-cnt" |
||||
|
:class="isFolded ? 'z-fold-' + row : ''" |
||||
|
> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
<div v-if="!noNeedFold" class="fold_text-btn" @click="shiftFold"> |
||||
|
{{ isFolded ? "展开" : "收起" }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
|
||||
|
export default { |
||||
|
name: "ResiSearch", |
||||
|
props: { |
||||
|
row: { |
||||
|
type: Number, |
||||
|
default: 2, |
||||
|
}, |
||||
|
lineHeight: { |
||||
|
type: Number, |
||||
|
default: 24, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
initOk: false, |
||||
|
|
||||
|
isFolded: false, |
||||
|
|
||||
|
noNeedFold: false, |
||||
|
}; |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: {}, |
||||
|
created() { |
||||
|
this.init(); |
||||
|
}, |
||||
|
methods: { |
||||
|
async init() { |
||||
|
await nextTick(); |
||||
|
|
||||
|
const height = await this.$refs.foldSlot.offsetHeight; |
||||
|
const { row, lineHeight } = this; |
||||
|
|
||||
|
let noNeedFold = height / row < lineHeight; |
||||
|
|
||||
|
this.noNeedFold = noNeedFold; |
||||
|
this.isFolded = !noNeedFold; |
||||
|
this.initOk = true; |
||||
|
}, |
||||
|
|
||||
|
shiftFold() { |
||||
|
let { isFolded } = this; |
||||
|
this.isFolded = !isFolded; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scope> |
||||
|
// 清除容器自身浮动 |
||||
|
@mixin cs { |
||||
|
&::after { |
||||
|
display: block; |
||||
|
visibility: hidden; |
||||
|
clear: both; |
||||
|
overflow: hidden; |
||||
|
height: 0; |
||||
|
content: ""; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 不换行显示省略号 |
||||
|
@mixin toe { |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
word-wrap: normal; |
||||
|
} |
||||
|
|
||||
|
// 强制文本换行 多行 |
||||
|
@mixin toeM($num) { |
||||
|
display: -webkit-box; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
-webkit-line-clamp: $num; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.m-fold_text { |
||||
|
@include cs; |
||||
|
|
||||
|
&.z-init { |
||||
|
background-color: rgba(#000, 0.05); |
||||
|
> view { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fold_text-cnt { |
||||
|
&.z-fold-1 { |
||||
|
@include toe; |
||||
|
} |
||||
|
&.z-fold-2 { |
||||
|
@include toeM(2); |
||||
|
} |
||||
|
&.z-fold-3 { |
||||
|
@include toeM(3); |
||||
|
} |
||||
|
&.z-fold-4 { |
||||
|
@include toeM(4); |
||||
|
} |
||||
|
&.z-fold-5 { |
||||
|
@include toeM(5); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fold_text-btn { |
||||
|
float: right; |
||||
|
margin-right: -4px; |
||||
|
padding: 0 5px; |
||||
|
line-height: 20px; |
||||
|
color: #0c81fe; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue