vue 实现超长文本截取,悬浮框提示

vue 超长文本截取，悬浮框提示

样式：

<style>
 .overflow-table .ivu-table-cell{
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
</style>

table：

<Table border :columns="comDataColunms" :data="comDataList" :loading="tableDataLoading" class="overflow-table table-context"></Table>

主要代码：

{
 title: '统一信用代码',
 key: 'ucCode',
 render: (h, params) => {
 return h('span', {
  domProps: {
  title: params.row.ucCode
  }
 }, params.row.ucCode)
 }
}

补充知识：前端使用ElementUI +Vue table表头添加tooltip悬浮提示框

废话不多说，看代码~

<el-table
empty-text=“正在加载中…”
:data=“contentList”
style=“width: 100%”
@sort-change=“sort”
class=“pro-table-item”
tooltip-effect=“dark”
 <template v-for="(item,index) in titleList">
 　　 <el-table-column
  　　 v-if="index == '0'"
  　　 :prop="index.toString()"
  　　 :label="item"
  　　 sortable="custom"
  　　 min-width="120"
  　　 :render-header="renderHeader"
 　 　>
 　　 </el-table-column>
  <el-table-column
   v-else
   :prop="index.toString()"
  　　 :label="item"
  　　 min-width="120"
  　　 :render-header="renderHeader"
  　　 show-overflow-tooltip
renderHeader(h, { column }) {
if(column.label.length>13) {
return (

{column.label}

)
} else {
return (
{column.label}
)
}
},

并不想让所有的表头都弹出tooltip，只想让超出长度并且

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

以上这篇vue 实现超长文本截取,悬浮框提示就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 最简单的vue消息提示全局组件的方法

    简介 实现功能 自定义文本 自定义类型(默认,消息,成功,警告,危险) 自定义过渡时间 使用vue-cli3.0生成项目 toast全局组件编写 /src/toast/toast.vue <template> <div class="app-toast" v-if="isShow" :class="{'info': type=== 'info','success': type=== 'success','wraning': type===

  • Vue 实现从文件中获取文本信息的方法详解

    Vue 实现从文件中获取文本信息的方法详解

    本文实例讲述了Vue 实现从文件中获取文本信息的方法.分享给大家供大家参考,具体如下: 最近在使用vue做项目的时候,遇到一个需求,界面中需要显示大量的说明文字,为了保持界面的整洁和赶紧,决定采用单独的文件来存储显示信息,然后通过文件读取的方式显示到界面上. 刚开始我使用的是File和FileReader对象获取,但是比较气人的是这两个对象是IE浏览器特有的属性,chrome不支持,而且为了安全起见,现在浏览器是不推崇这种做法的,因为很容易造成文件被外部恶意删除或增加内容,安全性太低.无奈之下,

  • vue 指令之气泡提示效果的实现代码

    vue 指令之气泡提示效果的实现代码

    菜鸟学习之路 //L6zt github 自己 在造组件轮子,也就是瞎搞. 自己写了个slider组件,想加个气泡提示.为了复用和省事特此写了个指令来解决. 预览地址 项目地址github 我叫给它胡博 效果图片 我对指令的理解: 前不久看过 一部分vnode实现源码,奈何资质有限...看不懂. vnode的生命周期-----> 生成前.生成后.生成真正dom.更新 vnode.更新dom . 销毁. 而Vue的指令则是依赖于vnode 的生命周期, 无非也是有以上类似的钩子. 代码效果 指令挂

  • vue鼠标悬停事件实例详解

    具体代码如下所述: v-bind:title="message" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例化</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dis

  • vue 实现超长文本截取,悬浮框提示

    vue 超长文本截取,悬浮框提示 样式: <style> .overflow-table .ivu-table-cell{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> table: <Table border :columns="comDataColunms" :data="comDataList" :loading="t

  • Vue实现鼠标经过文字显示悬浮框效果的示例代码

    需求 在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息.最终实现的效果如下: 鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出button元素的时候,这个显示框会消失. 分析 涉及到鼠标的移动事件. 鼠标事件有下面这几种: 1.onclick(鼠标点击事件) box.onclick = function(e){ console.log(e) } 2.onmousedown(鼠标按下事件) box.onmousedown = fun

  • vue实现鼠标经过显示悬浮框效果

    vue实现鼠标经过显示悬浮框效果

    本文实例为大家分享了vue实现鼠标经过显示悬浮框效果的具体代码,供大家参考,具体内容如下 项目架构采用vue-cli脚手架搭建的webpack项目 实现的效果如下: 鼠标经过button 右边显示出一个悬浮框 鼠标移出buttom元素 悬浮框隐藏 并且悬浮框可以随着鼠标的移动而改变位置 全部代码如下: <template>   <div class="hello">     <div id="focus_toolTip" class=&

  • vue实现鼠标悬浮框效果

    vue实现鼠标悬浮框效果

    本文实例为大家分享了vue实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 效果: html: <div   @mouseenter="enter"    @mouseleave="leave"    @mousemove="move" > 鼠标触碰元素 </div>   <div v-show="popUpShow" class="hover_con" :style=&

  • Vue实现悬浮框自由移动+录音功能的示例代码

    Vue实现悬浮框自由移动+录音功能的示例代码

    目录 效果如下 主要功能 实现 1.封装第一个漂浮组件FloatBall.vue 2.封装第二个组件录音组件Audio.vue 3.recorder.js 效果如下 主要功能 1.一个漂浮的球,在全屏幕中自由移动遇到边边角角自动改变方向 ,自带动画效果 2.录音功能,可以录制用户的声音,可以下载为任意格式的音频文件到本地,也可以通过二进制流发给后端 由于后端要声音文件格式wav或者pcm,采样率16000,所以我改了配置文件,稍后我会介绍在哪里改,改什么什么样都是可以的. 注:代码我已经封装成组

  • 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框

    使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

  • Android实现自由拖动并显示文字的悬浮框

    Android实现自由拖动并显示文字的悬浮框

    项目中需要实现一个状态显示的悬浮框,要求可以设置两种模式:拖动模式和不可拖动模式. 实现效果图如下: 实现步骤: 1.首先要设置该悬浮框的基本属性: /** * 显示弹出框 * * @param context */ @SuppressWarnings("WrongConstant") public static void showPopupWindow(final Context context, String showtxt) { if (isShown) { return; }

  • js实现鼠标悬浮框效果

    js实现鼠标悬浮框效果

    本文实例为大家分享了js实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">    

  • C#实现主窗体最小化后出现悬浮框及双击悬浮框恢复原窗体的方法

    本文实例讲述了C#实现主窗体最小化后出现悬浮框及双击悬浮框恢复原窗体的方法.分享给大家供大家参考.具体如下: 这里演示C#实现主窗体最小化后出现悬浮框,双击悬浮框恢复原窗体的效果.类似于360桌面. 主窗体:frmMain using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; u

  • js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法

随机推荐