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& ...
随机推荐
- Kali Linux 工具清单
Kali Linux 工具清单 Information Gathering acccheck ace-voip Amap Automater bing-ip2hosts braa CaseFile C ...
- 黑马旅游网 解析url查询字符串
function getUrlParam(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)( ...
- JSONPath中的表达式
在JsonPath中使用表达式是一个非常好的功能,可以使用简洁和复杂的JsonPath.JsonPath中的表达式基本上是评估为布尔值的代码片段.基于结果,仅选择满足标准的节点.让我们看一下它的更多内 ...
- A-坐飞机
链接:https://ac.nowcoder.com/acm/contest/892/A 题意: 鸡尾酒要去很多很多地方玩,于是他一次买了 n 张机票,初始鸡尾酒在第一个城市,对于任意的i(1≤i≤n ...
- 牛客网Java刷题知识点之什么是内部类、为什么要使用内部类、内部类如何使用外部类的属性和方法、成员内部类、局部内部类、静态内部类、匿名内部类
不多说,直接上干货! 可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 内部类 ...
- 牛客网Java刷题知识点之面向对象java的四大特性(抽象、封装、继承、多态)
不多说,直接上干货! 面向对象java的四大特性之抽象 抽象就是有点模糊的意思,还没确定好的意思. 就比如,要定义一个方法和类.但还没确定怎么去实现它的具体一点的子方法,那我就可以用抽象类或接口.具体 ...
- plsql过期注册
Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769password:xs374ca 打开plsql工具 点击注册即可
- windows下vue-cli及webpack 构建网站(一)环境安装
1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也 ...
- 【复习笔记】CSS基础
外观 color:rgba(255,255,255,1),a表示alpha,透明度值0~1 font-family:字体1,字体2,字体3;确保某字体不存在时自动选择下一个,最好使用字体的英文名称保证 ...
- 【extjs6学习笔记】1.3 初始:根据模板创建项目
使用sencha创建应用 命令说明:sencha -sdk /path/to/sdk generate app -s /your/templates/path/ MyApp /path/to/myap ...