62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
|
<script setup>
|
|||
|
|
import { computed, ref, useSlots } from 'vue'
|
|||
|
|
|
|||
|
|
// 接收最大长度的 prop，默认值 100
|
|||
|
|
const props = defineProps({
|
|||
|
|
maxLength: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 100,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 记录当前是否展开
|
|||
|
|
const isExpanded = ref(false)
|
|||
|
|
|
|||
|
|
// 获取 slot 内容
|
|||
|
|
const slots = useSlots()
|
|||
|
|
|
|||
|
|
// 计算截断后的内容
|
|||
|
|
const truncatedContent = computed(() => {
|
|||
|
|
const slotContent = getSlotContent()
|
|||
|
|
return slotContent.length > props.maxLength
|
|||
|
|
? `${slotContent.slice(0, props.maxLength)}...`
|
|||
|
|
: slotContent
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 获取 slot 内容，确保返回的内容为字符串
|
|||
|
|
function getSlotContent() {
|
|||
|
|
const slotVNode = slots.default ? slots.default()[0] : null
|
|||
|
|
return slotVNode ? slotVNode.children.toString().trim() : '' // 获取并转化为字符串
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切换展开/收起状态
|
|||
|
|
function toggleExpand() {
|
|||
|
|
isExpanded.value = !isExpanded.value
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<!-- 展开/收起按钮 -->
|
|||
|
|
|
|||
|
|
<!-- 展开/收起的内容 -->
|
|||
|
|
<text v-if="isExpanded">
|
|||
|
|
<slot /> <!-- 使用 slot 来展示传递的内容 -->
|
|||
|
|
</text>
|
|||
|
|
<text v-else>
|
|||
|
|
<text>{{ truncatedContent }}</text>
|
|||
|
|
</text>
|
|||
|
|
<text
|
|||
|
|
:title="isExpanded ? '点击收起' : '点击展开'"
|
|||
|
|
class="cursor-pointer text-blue-500"
|
|||
|
|
@click="toggleExpand"
|
|||
|
|
>
|
|||
|
|
{{ isExpanded ? '收起' : '展开' }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
|
|||
|
|
</style>
|