vue3中如何使用el-tooltip中的插槽达到换行效果

el-tooltip的content属性中的内容可以使用插槽来替换
在这里插入图片描述

在这里插入图片描述
话不多说,直接上代码

<el-tooltip effect="light" placement="top-start"><div slot="content" class="tips">  // 在这里运用插槽<p class="tip-text">我是页面中展示的内容</p></div><template #content>  // 这里是插槽中的内容<p class="content">我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容</p></template>
</el-tooltip><style>
.content {max-width: 200px; // 设置一个最大宽度white-space: pre-wrap; // 超出这个宽度就直接换行
}
</style>

最后放上效果对比图,如果觉得有帮到你,可以给我一个赞吗😜
没换行前的效果
在这里插入图片描述
换行后的效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61675.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构--5.1图的存储结构(十字链表、邻接多重表、边集数组)

目录 一、十字链表&#xff08;Orthogonal List&#xff09; 二、邻接多重表 三、边集数组 四、深度优先遍历 一、十字链表&#xff08;Orthogonal List&#xff09; 重新定义顶点表结点结构&#xff1a; datafirstInfirstOut 重新定义边表结构结点&#xff1a; tailV…

js 将形如 ‘Aug 30 2022‘ 格式的日期转化为 ‘%Y-%m-%d‘ 的格式。

可以使用JavaScript中的Date对象和相关方法来完成此任务。具体实现如下&#xff1a; // 定义需要转换的日期字符串 const dateStr Aug 30 2022;// 将日期字符串转换为Date对象 const date new Date(dateStr);// 使用Date对象的getDate、getMonth、getFullYear方法获取年月日…

OS 死锁处理

如果P先申请mutex 则mutex从1置零&#xff0c;假设申请到的empty 0则empty变成-1阻塞态 同理C中mutex从0变为-1&#xff0c;那么如果想离开阻塞态&#xff0c;那么就需要执行V&#xff08;empty&#xff09;但是如果执行V&#xff08;empty&#xff09;就需要P&#xff08;mu…

7.react useReducer使用与常见问题

useReducer函数 1. useState的替代方案.接收一个(state, action)>newState的reducer, 并返回当前的state以及与其配套的dispatch方法2. 在某些场景下,useReducer会比useState更加适用,例如state逻辑较为复杂, 且**包含多个子值**,或者下一个state依赖于之前的state等清楚us…

后端给前端传参数忽略空属性

JsonInclude JsonInclude注解用于指定在对象序列化为JSON字符串时&#xff0c;哪些属性应该被包含进去&#xff0c;哪些属性应该被忽略掉。 JsonInclude注解有以下几个常用选项&#xff1a; JsonInclude(JsonInclude.Include.NON_NULL)&#xff1a;表示只有属性值不为null的属…

stm32之25.FLASH闪存

打开标准库 源码--- int main(void) {uint32_t d;Led_init();key_init();/* 初始化串口1波特率为115200bps&#xff0c;若发送/接收数据有乱码&#xff0c;请检查PLL */usart1_init(115200);printf("this is flash test\r\n");/* 解锁FLASH&#xff08;闪存&#xf…

GPT 系列笔记

open ai 出品, 与 google 的 bert 系列 是不同的任务, NLGeneration vs. NLUnderstanding. 二. GPT-2 hugging-face 的 transformers 库中有模型源码, 为 from transformers.models.gpt2 import GPT2Model. 成员字段 wte, Word Token Embwpe, Word Position Embh, 模型主体…

运维数据(2):全新解说运维的价值和场景

在一个项目中&#xff0c;得知客户高层一直在纠结运维的价值&#xff0c;质疑运维投入的合理性和必要性&#xff0c;要求澄清其具体价值及其与业务的关系。同时&#xff0c;当今IT界流行“场景”一词&#xff0c;不论是解决方案&#xff0c;还是具体产品都在拉关系&#xff0c;…

亚马逊云科技 re:Inforce 大会云安全合规与技术实践及 Security Jam 大赛,快来报名吧!...

‍‍ 2023年8月31日在北京 亚马逊云科技 re:Inforce 大会 首次登陆中国&#xff01; 我们期待您的莅临&#xff0c; 并与您一起迎接 AI 时代&#xff0c; 开启全面智能的安全旅程&#xff01; 在13:00-17:00的 培训与动手实验环节中 云安全合规与技术实践 及 Security Jam 大赛…

Ansible学习笔记14

实现多台的分离实现&#xff1a; [rootlocalhost playbook]# cat example3.yaml --- - hosts: 192.168.17.105remote_user: roottasks:- name: create test1 directoryfile: path/test1/ statedirectory- hosts: 192.168.17.106remote_user: roottasks:- name: create test2 d…

Jenkins测试报告样式优化

方式一&#xff1a;修改Content Security Policy&#xff08;临时解决&#xff0c;Jenkins重启后失效) 1、jenkins首页—>ManageJenkins—>Tools and Actions标题下—>Script Console 2、粘贴脚本输入框中&#xff1a;System.setProperty("hudson.model.Directo…

Ubuntu学习---跟着绍发学linux课程记录(第一部分)

文章目录 1、启动、关闭、挂起、恢复&#xff08;电源&#xff09;2、更多虚拟机操作2.1 电源设置2.2 硬件参数设置2.3 状态栏2.4 全屏显示 3、快照与系统恢复4、桌面环境5、文件系统6、用户目录7、创建目录和文件8、命令行&#xff1a;文件列表ls 9、命令行&#xff1a;切换目…

3.使用IDE的优点

IDE是集成开发环境&#xff1a;Integrated Development Environment的缩写。 1、优点 使用IDE的好处在于&#xff0c;可以把编写代码、组织项目、编译、运行、调试等放到一个环境中运行&#xff0c;能极大地提高开发效率。 IDE提升开发效率主要靠以下几点&#xff1a; 编辑器…

Docker容器:docker consul的注册与发现及consul-template

Docker容器&#xff1a;docker consul的注册与发现及consul-template守护进程 一.docker consul的注册与发现介绍 1.什么是服务注册与发现 &#xff08;1&#xff09;服务注册与发现是微服务架构中不可或缺的重要组件。 &#xff08;2&#xff09;为解决服务都是单节点的&a…

XSS结合CSRF

假设我们获得了目标CMS的源码&#xff0c;搭建了一个相同的网站&#xff0c;我们在自己的网站执行添加用户的操作&#xff0c;并且用bp抓包 如图&#xff0c;这是我们抓到的添加用户的数据包 接下来&#xff0c;我们可以根据数据包构造js代码 <script> xmlhttp new XML…

PPPoE连接无法建立的排查和修复

嗨&#xff0c;亲爱的读者朋友们&#xff01;你是否曾经遇到过PPPoE连接无法建立的问题&#xff1f;今天我将为你详细解析排查和修复这个问题的步骤。 检查物理连接 首先&#xff0c;我们需要确保物理连接没有问题。请按照以下步骤进行检查&#xff1a; - 检查网线是否插好&…

LeetCode--HOT100题(46)

目录 题目描述&#xff1a;114. 二叉树展开为链表&#xff08;中等&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;114. 二叉树展开为链表&#xff08;中等&#xff09; 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链…

vue自定义键盘

<template><div class"mark" click"isOver"></div><div class"mycar"><div class"mycar_list"><div class"mycar_list_con"><p class"mycar_list_p">车牌号</p>…

云化背景下的接口测试覆盖率自动化检查

一、问题来源 在云化场景下&#xff0c;API的测试覆盖是一项重要评估与考察指标。除了开发者自测试外&#xff08;UT&#xff09;&#xff0c;还可以利用云化测试平台、流水线等方法进行相关指标的检查与考核。利用这种方法既可以减轻开发者测试工作量&#xff0c;不必在本地做…

一、Mycat2介绍与下载安装

第一章 入门概述 1.1 是什么 Mycat 是数据库中间件。 1、数据库中间件 中间件&#xff1a;是一类连接软件组件和应用的计算机软件&#xff0c;以便于软件各部件之间的沟 通。 例子&#xff1a;Tomcat&#xff0c;web中间件。 数据库中间件&#xff1a;连接java应用程序和数据库…