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& ...
随机推荐
- IT兄弟连 Java语法教程 Java语言背景
驱使计算机语言革新的因素有两个:程序设计技术的改进和计算环境的改变.Java也不例外.在大量继承C和C++的基础之上,Java还增加了反应当前程序设计技术状态的功能与精华.针对在线环境的蓬勃发展(In ...
- Python学习笔记(迭代,列表解析,生成器)
迭代(iterable):支持每次返回自己所包含一个对象的 iter()得到迭代器,.next()遍历列表. 列表解析:根据已有列表高效生成列表的方式. 生成器(Generator): 通过列表生成式 ...
- 阿里云ECS测试服务器部署
前序:为了提供一个干净的测试环境,更好地验证产品问题,也为了防止被开发人员频繁发布代码而打断测试工作,故测试团队搭建了一台阿里云ECS服务器,以下是具体的部署信息: 1. 安装JDK Java版本:J ...
- 解决 APP启动白屏黑屏问题
闪屏页简介 闪屏页,我们手机上的每个 APP 几乎都有自己的闪屏页,就是在真正进入程序前,会有一个页面停顿几秒钟.其实我们完全可以充分利用好这几秒钟做很多的程序初始化了启动. 为什么我的 APP 启动 ...
- hls流媒体视频防盗实现
HLS流媒体视频防盗实现 一.Windows安装FFmpeg 1.1 安装版本 1.1.1 网址:https://ffmpeg.org/ 1.1.2 选择Windows版本:https://ffmpe ...
- mysql8.0数据库忘记密码时进行修改方法
最近安装mysql8.0数据库,用以前的修改mysql方法,没有成功,所以参考网上前辈的做法,自己重新整理了下忘记密码时进行修改方法 1.安装mysql8.0后发现,在安装目中,是没有my.ini 和 ...
- hadoop集群启动时DataNode节点启动失败
错误日志如下: ************************************************************/ 2018-03-07 18:57:35,121 INFO o ...
- C#/.net基础知识
1 .NET 中类和结构的区别? 答:结构和类具有大体的语法,但是结构受到的限制比类要多.结构不能申明有默认的构造函数,为结构的副本是又编译器创建 和销毁的,所以不需要默认的构造函数和析构函数.结构 ...
- MVC3 自定义的错误页
ASP.NET MVC3中如果配置文件出错了,怎么跳转到自定义的错误页,现在参考网上的档案是说 添加 如下配置文件,并且在路径Views/Shared/下添加Error页面,测试下没有用的,请大家看看 ...
- fleet-运行一个全局的单元
运行一个全局的单元 正如前面所提到的,全局单元是有用的,用于在您的集群中的所有机器上运行一个单元.它不会比一个普通的单元差太多,而是一个新的x-fleet参数称为Global=true.这是一个示例单 ...