Vue3实现文本的展开与收起右下角环绕功能

 直接用vue文件做成组件传入你要作用的文字即可

---

​​​
<template>
    <div class="warp">
        <div ref="el" class="title text" :style="{ maxHeight: (expend ? '12em' : '6em') }">
            <button class="btn" for="exp" @click="expend = !expend">
                {
  { expend ? '收起' : '展开' }}
                <div class="dian" :class="{ wu: expend }">. . .</div>
            </button>
            {
  { title }}
        </div>
    </div>
</template>

<script lang="ts" setup>
defineProps<{
    title?: string,
}>()

const el = ref<any>()

const expend = ref<any>(false)

onMounted(() => {
    if (el.value.scrollHeight <= el.value.clientHeight) {
        el.value.classList.add('trunk&