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

最新推荐文章于 2024-08-22 15:58:08 发布

阳庚

最新推荐文章于 2024-08-22 15:58:08 发布

阅读量866

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_58875326/article/details/126723662

版权

本文介绍如何使用Vue3创建一个组件，该组件能够实现文本的展开和收起功能，并且在右下角提供环绕的视觉效果。通过将组件应用于前端项目中的文字，可以增强用户体验。

摘要由CSDN通过智能技术生成

直接用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&