uniapp实现多行文本溢出超过指定行数 展开 收起

news/2025/3/16 23:33:10/

一、组件封装

<template><view class="multiline"><view class="info"><view :class="{hide:!iSinfo}" :style="!iSinfo?computedStyle:''"><view :style="{ color: textColor,fontWeight:fontWeight,fontSize:fontSize + 'rpx'}">{{content}}</view></view><text @tap="showinfo" v-if="!iSinfo":style="{ color: showinfotextColor,fontWeight:showinfoFontWeight,fontSize:showinfoSize + 'rpx'}">展开</text></view><text @tap="showinfo" v-if="iSinfo" class="hidebtn":style="{ color: showinfotextColor,fontWeight:showinfoFontWeight,fontSize:showinfoSize + 'rpx'}">收起</text></view>
</template><script>export default {props: {// 文本信息content: {type: String,default: ""},// 默认显示几行文本linesCount: {type: [Number, String],default: 2},// 文字颜色textColor: {type: String,default: "#333333"},// 文字粗体大小fontWeight: {type: [Number, String],default: 400},// 文字大小fontSize: {type: [Number, String],default: 24},// 展开收起文字大小showinfoSize: {type: [Number, String],default: 24},// 展开收起文字颜色showinfotextColor: {type: String,default: "#333333"},// 展开收起文字粗体大小showinfoFontWeight: {type: [Number, String],default: 400},},data() {return {iSinfo: false,};},mounted() {},computed: {computedStyle() {const style = `-webkit-line-clamp: ${this.linesCount};`;return style;}},methods: {showinfo() {this.iSinfo = !this.iSinfo}},};
</script><style lang="scss" scoped>.multiline{display: flex;// width: 100%;flex-direction: column;background-color: #fff;position: relative;.info {display: flex;flex-direction: column;view {text-align: justify;word-break: break-word; //换行模式background-color: #fff;}text {width: 70px;display: flex;justify-content: flex-end;align-items: center;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);color: #0078FF;position: absolute;bottom: 0rpx;right: 0rpx;}}}.hidebtn {display: flex;flex: 1;justify-content: flex-end;}.hide {word-break: break-word; //换行模式overflow: hidden;text-overflow: ellipsis; //修剪文字display: -webkit-box;// -webkit-line-clamp: 2; //此处为上限行数-webkit-box-orient: vertical;}
</style>

二、使用

     <multiline-expansion content="uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起"></multiline-expansion>

http://www.ppmy.cn/news/1368021.html

相关文章

python给企微发消息

方法一&#xff1a;webhook方式。使用群机器人给企微群发消息 import requestsdef qwxsendmessage(msg):urlhttps://qyapi.weixin.qq.com/cgi-bin/webhook/send?key6c598840-804a-4eb5-a999-a023313 #url换成自己群机器人的webhookurldata{msgtype:text,text:{content:msg}}…

React入门之React_使用es5和es6语法渲染和添加class

React入门 //react的核心库 <script src"https://cdn.jsdelivr.net/npm/react17/umd/react.development.js"></script> //react操作dom的核心库&#xff0c;类似于jquery <script src"https://cdn.jsdelivr.net/npm/react-dom17/umd/react-dom.…

Codeforces Round 782 (Div. 2) E. AND-MEX Walk(思维+并查集)

原题链接&#xff1a;E. AND-MEX Walk 题目大意&#xff1a; 给出一张 n n n 个点 m m m 条边的无向图&#xff0c;边带有边权。 我们定义一条路径的价值为&#xff1a; 假设我们经过了 k k k 个点&#xff08;点和边都可重复经过&#xff09;&#xff0c;且按顺序经过的边…

存储过程基本了解

文章目录 介绍存储过程示例1. 目的2. 输入参数3. 输出参数4. 执行逻辑5. 返回值6. 示例用法7. 注意事项 存储过程的关键字有哪些简单实操 介绍 存储过程是一组预编译的SQL语句&#xff0c;以及流程控制语句&#xff0c;封装在数据库服务器中并可以被重复调用。它们可以接收参数…

2024/3/1 贪心

跳跳 跳跳&#xff01; - 洛谷 思路&#xff1a;从一个数组里面依次取出最大值和最小值&#xff0c;然后进行运算 完整代码&#xff1a; #include <bits/stdc.h> #define int long long #define PII std::pair<int,int> signed main() {int n;std::cin >>…

大数据智能化-长视频领域

随着数字化时代的到来&#xff0c;长视频领域的发展迎来了新的机遇和挑战。在这一背景下&#xff0c;大数据智能化技术的应用成为长视频行业提升用户体验、优化运营管理的重要手段之一。本文将从优爱腾3大长视频背景需求出发&#xff0c;分析静态资源CDN、视频文件存储与分发、…

27.HarmonyOS App(JAVA)可复用列表项的ListContainer

可复用列表项的ListContainer 简短的列表可以通过定向布局实现,但是如果列表项非常多,则使用定向布局就不再合适。如需要创建50个列表项的列表,那么用定向布局实现至少需要创建50个以上的组件了。然而,限于设备屏幕大小的限制,绝大多数组件不会显示在屏幕上,却会占据大量的内存…

港大提出GraphEdit, 图数据编辑大模型!

论文链接&#xff1a;https://arxiv.org/abs/2402.15183 代码链接&#xff1a;https://github.com/HKUDS/GraphEdit 摘要 图结构学习&#xff08;Graph Structure Learning, GSL&#xff09;旨在通过生成新的图结构来捕捉图结构数据中节点之间的内在依赖性和交互关系。 图神…