el-popover 的content内容换行

news2024/12/24 2:51:44

需求:把el-popover的content内容进行换行

<el-popover
       placement="bottom"
       width="450"
       trigger="click"
                     >
          <div class="custom-content">
                  示例:如果您在 2 个托盘上运输 40 箱纸(每个托盘上20 箱),<br>
                  您将输入:<br/>
                  商品数量:40<br/>
                  商品单位:BOX<br/>
                  打托数量:2<br/>
                  打托类型:PALLETS<br/>
          </div>
          <i class="el-icon-question" slot="reference"></i>
</el-popover>

以上代码就能实现el-popover的content内容换行,实现效果图:

疑惑:

el-popover里面的content参数也可以通过slot传入DOM

 

 于是我看网上很多都是这样传入的

 <el-popover
       placement="bottom"
       width="450"
       trigger="click"
                     >
         <template slot="content">
             <div class="custom-content">
                示例:如果您在 2 个托盘上运输 40 箱纸(每个托盘上20 箱),<br>
                您将输入:<br/>
                商品数量:40<br/>
                商品单位:BOX<br/>
                打托数量:2<br/>
                打托类型:PALLETS<br/>
              </div>
         </template>
             <i class="el-icon-question" slot="reference"></i>
</el-popover> 

这样写content里面的内容直接不显示了,懵圈。。。。,如果有知道的友友们,请指教。 

 

 

 

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

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

相关文章

基于SpringBoot+Vue的“智慧食堂”系统设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

三、Web安全相关知识

请勿用于非法用途 文章目录 一、Web源码框架二、目录结构1、静态资源2、WEB-INF&#xff08;1&#xff09;classes&#xff08;2&#xff09;lib&#xff08;3&#xff09;web.xml 二、web脚本语言1、脚本种类&#xff08;1&#xff09;ASP&#xff08;2&#xff09;ASP.NET&am…

Vue的下载以及MVVM分析

&#x1f600;前言本片文章是vue系列第一篇整理了vue的基础和发展史 &#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&#x1f609;&#x1f6…

服务器——Nginx安装及静态配置、部署

目录 Nginx 安装Nginx步骤 安装yum-utils 配置nginx.repo源 安装nginx 系统启动nginx服务器 nginx.conf配置 关闭nginx服务器 配置文件启动nginx服务 配置文件编写 启动nginx服务 关闭nginx服务 服务器——Nginx安装及静态配置、部署。 直接在云服务器中启动项目&…

【C# 数据结构】Heap 堆

【C# 数据结构】Heap 堆 先看看C#中有那些常用的结构堆的介绍完全二叉树最大堆 Heap对类进行排序实现 IComparable<T> 接口 对CompareTo的一点解释 参考资料 先看看C#中有那些常用的结构 作为 数据结构系类文章 的开篇文章&#xff0c;我们先了解一下C# 有哪些常用的数据…

Android开发之Fragment动态添加与管理

文章目录 主界面布局资源两个工具Fragment主程序 主界面布局资源 在activity_main.xml中&#xff0c;声明两个按钮备用&#xff0c;再加入一个帧布局&#xff0c;待会儿用来展示Fragment。 <?xml version"1.0" encoding"utf-8"?> <LinearLayo…

一文快速入门任务调度框架-Quartz

前言 还不会 Quartz&#xff1f;如果你还没有接触过Quartz&#xff0c;那么你可能错过了一个很棒的任务调度框架&#xff01;Quartz 提供了一种灵活、可靠的方式来管理和执行定时任务&#xff0c;让咱们的定时任务更加优雅。本篇文章将为你介绍 Quartz 框架的核心概念、API 和…

Vue3封装函数组件(ElImageViewer)预览图片

目录结构 index.vue <template><el-image-viewer v-if"show" v-bind"$attrs" hide-on-click-modal close"show false" /> </template><script setup> import { ref, watch } from "vue" import { ElImageV…

D2L学习记录-10-词嵌入word2vec

NLP-1-词嵌入(word2vec) 参考: 《动手学深度学习 Pytorch 第1版》第10章 自然语言处理 第1、2、3 和 4节 (词嵌入) 词嵌入 (word2vec)&#xff1a; 词向量&#xff1a;自然语言中&#xff0c;词是表义的基本单元。词向量是用来表示词的向量。词嵌入 (word embedding)&#x…

余切拉普拉斯算子推导 cotangent Laplace-Beltrami operator

欢迎关注更多精彩 关注我&#xff0c;学习常用算法与数据结构&#xff0c;一题多解&#xff0c;降维打击。 参考自polygon mesh proccessing这本书 基本思路及原理 余切拉普拉斯算子是一种考虑了网格底层几何联系的一种算子&#xff0c;在网格平滑&#xff0c;参数化等算法中…

no instance(s) of type variable(s) R exist so that void conforms to R 解决方法

一、问题描述 使用函数式编程stream().map()的时候报错&#xff1a; no instance(s) of type variable(s) R exist so that void conforms to R 二、报错原因 map()函数需要有一个返回值&#xff0c;但是setter方法返回值为void,即setChildren()返回值为void. 三、解决方法 …

SpringBoot前后端分离项目中实现将图片上传至Linux服务器(极简)

FileController /*** 文件上传至服务器 */ ApiOperation("文件上传") PostMapping("/upload") public R upload(MultipartFile file){String uploadUrl fileService.upload(file);return R.ok().message("文件上传成功").data("url",…

一遍看懂面试算法——二叉树

目录 二叉树的种类 满二叉树 完全二叉树 二叉搜索树 平衡二叉搜索树 二叉树的存储方式 二叉树的遍历方式 二叉树的递归遍历 二叉树的迭代遍历 前序遍历&#xff08;迭代法&#xff09; 中序遍历&#xff08;迭代法&#xff09; 后序遍历&#xff08;迭代法&#xff…

Python-如何使用正则表达式

如何利用Python使用正则表达式 目录 正则表达式常用匹配规则 ​编辑re库的使用 match()方法&#xff1a; search()方法: findall()方法 : sub()方法: compile()方法; 通用匹配 贪婪与非贪婪匹配 贪婪匹配 非贪婪匹配 修饰符 转义匹配 正则表达式是处理字符的强大…

高电压放大器ATA-2021B技术指标

随着ATA-2021H高压放大器的升级改版&#xff0c;新品ATA-2021B高电压放大器走进了更多工程师、研究人员的视野。相比于升级之前&#xff0c;ATA-2021B高压放大器拥有了更多更好地优势&#xff0c;可以更好地的帮助研究人员高效完成测试项目。今天Aigtek小编就带大家了解一下关于…

liunx时间慢几分钟,定时更新系统时间

#&#xff01;/bin/sh hwclock --hctosys echo "执行成功" 定时5分钟执行一次

minitab学习系列(2)--DOE逐步方法选择

系列文章目录 文章目录 系列文章目录前言一、DOE>因子>分析因子设计>逐步二、DOE>因子>分析因子设计>逐步>层次结构总结 前言 一、DOE>因子>分析因子设计>逐步 逐步删除和向模型中添加项以确定有用的项的子集。Minitab提供了三个常用过程&…

油画欣赏|《沧海的线条》在群山之间

《沧海的线条》80x65cm陈可之•2006年绘油画《沧海的线条》&#xff0c;通过绘画艺术的手法&#xff0c;描绘出三峡群山之间那一层层波浪般的纹理&#xff0c;展现出天地间岁月的古老沧桑变迁。此作品是陈可之先生百余幅三峡系列作品之一。夜&#xff0c;群山高大挺立。没有植被…

[SSM]Spring中的JdbcTemplate

目录 十三、JdbcTemplate 13.1环境准备 13.2新增 13.3修改 13.4删除 13.5查询 13.6查询一个值 13.7批量添加 13.8批量修改 13.9批量删除 13.10使用回调函数 13.11使用德鲁伊连接池 十三、JdbcTemplate JdbcTemplate是Spring提供的一个JDBC模板类&#xff0c;是对JDBC…

el-tree数据渲染超出省略

el-tree数据渲染超出省略 问题 <el-tree:data"deptOptions":props"defaultProps":expand-on-click-node"false":filter-node-method"filterNode"ref"tree"default-expand-allhighlight-currentnode-click"handleNo…