lyui-read-more

lyui-read-more 展开阅读更多

介绍

该组件通常用于内容较多较长处, 预先收起一部分, 点击展开全部内容的场景.

使用方法

import "../../components/lyui-read-more/lyui-read-more.stml";

例子

<lyui-read-more
    @open="handleOpen"
    @close="handleClose"
    :show-height="200"
    color="#34D399"
    toggle
    close-text="查看更多"
    open-text="收起"
>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto exercitationem
    reiciendis hic laboriosam, libero sint maxime corrupti dicta repellat deserunt,
    officiis dolorem expedita consectetur iure quisquam? Mollitia quisquam sit animi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, iure cum vitae
    placeat ducimus eos illo enim est ut in. Nemo veritatis corporis ad eos officia
    fugiat quas porro repudiandae! Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Ipsum magnam fugit adipisci harum aut nostrum laborum, non molestiae
    dignissimos aspernatur sed voluptates ab necessitatibus mollitia quod unde.
    Excepturi, facere nostrum! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    Unde culpa consequatur quasi quae nam autem quaerat maxime maiores laboriosam nihil
    odit ea, ratione illum sunt enim eius incidunt? Veniam, quos. Lorem ipsum dolor sit
    amet consectetur adipisicing elit. Eum harum omnis, placeat nesciunt velit
    blanditiis est perspiciatis, id ipsa, fugiat iste ut dolores? Pariatur unde quae
    libero voluptatem rerum nihil? Lorem, ipsum dolor sit amet consectetur
</lyui-read-more>

props 属性

参数 说明 类型 默认值
show-height 内容超出此高度才会显示展开全文按钮, 选填 string | number 200
toggle 展开后是否显示收起按钮, 选填 boolean false
close-text 收起时的提示文字, 选填 string 展开阅读全文
open-text 展开后的提示文字, 选填 string 收起
color 提示文字的颜色, 选填 string #06f

events 事件

事件名 说明 回调参数
open 内容被展开时触发 -
close 内容被收起时触发 -
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18