iview Tooltip换行及应用
第一种:
<Tooltip placement="bottom">
<Button>Multiple lines</Button>
<div slot="content" style="white-space: normal;">
A balloon appears when the mouse passes over this text
</div>
</Tooltip>
第二种:
render: (h, params) => {
let texts = ''; //表格列显示文字
if (params.row.content !== null) {
if (params.row.content.length > 6) { //进行截取列显示字数
texts = params.row.content.substring(0, 6) + ".....";
} else {
texts = params.row.content;
}
}
return h('div', [
h('Tooltip', {
props: {
placement: 'bottom',
// transfer: true //是否将弹层放置于 body 内
},
style: {
cursor: 'pointer',
}
}, [ //这个中括号表示是Tooltip标签的子标签
texts, //表格列显示文字
h('div', {
slot: 'content',
style: {
whiteSpace: 'normal'
}
}, params.row.content //整个的信息即气泡内文字
)
])
]);
}
显示结果如下:

iview Tooltip换行及应用的更多相关文章
- bootstrap Tooltip换行问题
bootstrap自身带有tooltip,使用起来很方便,但是美中不足,它的tooltip并不支持换行. 比如我们通过<textarea>输入框传入到数据库的长文本,文本是带有换行符的,但 ...
- Vue中使用 iview 之-踩坑日记
导航列表: 一.iview单选框Select验证问题 二.iview表单v-if引起的问题 三.Upload 手动上传组件 使用是出现的问题 四.Tabs嵌套使用时的问题 五.Tooltip 换行问题 ...
- Bootstrap Tooltip 显示换行
<a class="pink" href="#" data-toggle="tooltip" data-placement=" ...
- echart的tooltip自定义换行
自定义换行,内容很长的时候 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直 ...
- 关于Html中的title属性内容换行,以及Bootstrap的tooltip的使用
1.HTML中的title属性的内容换行: 鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? ...
- iview的table中Tooltip的使用
这篇文章主要介绍了iview-admin中在table中使用Tooltip提示效果. 1. table中文字溢出隐藏,提示气泡展示所有信息 jLongText(item){ item.render = ...
- iview 如何在表格中给操作图标添加Tooltip文字提示?
项目需要用到的iview 表格中操作项目有各种各样的图标,而各种各样的图标代表不同的操作,面对新用户可能很懵,那如何给这些图标添加Tooltip文字提示? 废话不多讲,直接看代码: <templ ...
- ucharts tooltip弹窗自定义换行
这个东西吧,也许是因为菜,看了3小时,下面给出解决方案 1. 找到源码下面的这个文件 2. 增加绿色方框中的代码 3.组件调用的时候有一个opts属性 :opts="{ extra: { t ...
- usb-tooltip 重写.tooltip { word-break: break-all; }解决单词内换行
<div style="padding: 5px 10px; font-size: 16px; text-align: left" class="truncate& ...
随机推荐
- JAVA编写的断点续传小程序
上了一周的课,今天终于可以休息了,太棒了,今天闲着无聊使用java语言写了一个断点续传的小程序来分享给大家, 首先要下载个用于网络请求的框架:我这里给出地址,是用的Apache的HttpClient: ...
- Netty源码分析(七):初识ChannelPipeline
ChannelPipeline单看名称就可以知道Channel的管道.本篇将结合它的默认实现类DefaultChannelPipeline来对它做一个简单的介绍. 示例图 上图是官方提供的Channe ...
- [转] ios数组基本用法和排序
http://blog.csdn.net/daiyelang/article/details/18726947 1.创建数组 // 创建一个空的数组 NSArray *array = [NSArray ...
- 关于表格——增加删除行,鼠标选定(利用JavaScript)
涉及到的知识点: 1.onmouseover,onmouseout 2.dom getElementByTagName 3.新建节点元素createElement; <!DOCTYPE html ...
- [Swift]LeetCode1079. 活字印刷 | Letter Tile Possibilities
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- STP-10-RPVST+
RPVST+(快速每VLAN生成树+)是一种以每个VLAN为基础,分别运行RSTP的形式,类似于PVST+.它拥有之前所描述的PVST+的优势,这为RSTP带来了亚秒级的收敛速度.因此,RPVST+和 ...
- Opencv级联分类器实现人脸识别
在本章中,我们将学习如何使用OpenCV使用系统相机捕获帧.org.opencv.videoio包的VideoCapture类包含使用相机捕获视频的类和方法.让我们一步一步学习如何捕捉帧 - 第1步: ...
- CSS标签大全
CSS常用标签 字体属性:(font) 大小:font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 :font-styl ...
- jQuery解决ajax请求的跨域问题
这两天工作中频繁的遇到JS的跨域问题,都通过绕开ajax请求的方式.特地百度了一下,把跨域问题解决了.在这分析一下 首先贴上js的页面代码: <html> <head> < ...
- Net Core下通过Proxy 模式
Net Core下通过Proxy 模式 NET Core下的WCF客户端也是开源的,这次发布.NET Core 2.0,同时也发布了 WCF for .NET Core 2.0.0, 本文介绍在.NE ...