65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<script>
|
|
module.exports = {
|
|
name: "index",
|
|
props: {
|
|
value: String,
|
|
/*最大高度，超过该高度显示折叠展开*/
|
|
height: Number
|
|
},
|
|
data() {
|
|
return {
|
|
isExpanded: false
|
|
}
|
|
},
|
|
methods: {
|
|
onView(e) {
|
|
if (e.target.tagName === "IMG") {
|
|
vant && vant.ImagePreview([e.target.src])
|
|
}
|
|
},
|
|
toggleDetails() {
|
|
this.isExpanded = !this.isExpanded
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="content" v-html="value" v-if="value" @click="onView" :style="{ maxHeight: isExpanded ? 'none' : height + 'px' }"></div>
|
|
<div v-if="value && height" class="toggle-button" @click="toggleDetails">
|
|
{{ isExpanded ? "收起" : "查看全部详情" }}
|
|
<van-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'"></van-icon>
|
|
</div>
|
|
<van-empty v-if="!value" description="没有更多了"></van-empty>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.content {
|
|
padding: 10px;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
overflow: hidden;
|
|
word-break: break-word;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.content img {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.toggle-button {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
margin: 10px 0;
|
|
font-size: 14px;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
color: rgb(119 115 115);
|
|
}
|
|
</style>
|